minimize /permission requests

Author: raheeliftikhar5

client/packages/lowcoder/src/components/PermissionDialog/AppPermissionDialog.tsx

@@ -31,7 +31,7 @@ import { SHARE_TITLE } from "../../constants/apiConstants";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
 import { default as Divider } from "antd/es/divider";
 
-export const AppPermissionDialog = (props: {
+export const AppPermissionDialog = React.memo((props: {
   applicationId: string;
   visible: boolean;
   onVisibleChange: (visible: boolean) => void;
@@ -148,7 +148,7 @@ export const AppPermissionDialog = (props: {
       }
     />
   );
-};
+});
 
 const InviteInputBtn = styled.div`
   display: flex;

client/packages/lowcoder/src/pages/common/header.tsx

@@ -25,7 +25,7 @@ import {
 } from "lowcoder-design";
 import { trans } from "i18n";
 import dayjs from "dayjs";
-import { useContext, useState } from "react";
+import { useContext, useEffect, useMemo, useState } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import {
   publishApplication,
@@ -453,67 +453,74 @@ export default function Header(props: HeaderProps) {
     </>
   );
 
-  const headerEnd = showAppSnapshot ? (
-    <HeaderProfile user={user} />
-  ) : (
-    <>
-      {applicationId && (
-        <AppPermissionDialog
-          applicationId={applicationId}
-          visible={permissionDialogVisible}
-          onVisibleChange={(visible) =>
-            !visible && setPermissionDialogVisible(false)
-          }
-        />
-      )}
-      {canManageApp(user, application) && (
-        <GrayBtn onClick={() => setPermissionDialogVisible(true)}>
-          {SHARE_TITLE}
-        </GrayBtn>
-      )}
-      <PreviewBtn buttonType="primary" onClick={() => preview(applicationId)}>
-        {trans("header.preview")}
-      </PreviewBtn>
-
-      <Dropdown
-        className="cypress-header-dropdown"
-        placement="bottomRight"
-        trigger={["click"]}
-        dropdownRender={() => (
-          <DropdownMenuStyled
-            style={{ minWidth: "110px", borderRadius: "4px" }}
-            onClick={(e) => {
-              if (e.key === "deploy") {
-                dispatch(publishApplication({ applicationId }));
-              } else if (e.key === "snapshot") {
-                dispatch(setShowAppSnapshot(true));
-              }
-            }}
-            items={[
-              {
-                key: "deploy",
-                label: (
-                  <CommonTextLabel>{trans("header.deploy")}</CommonTextLabel>
-                ),
-              },
-              {
-                key: "snapshot",
-                label: (
-                  <CommonTextLabel>{trans("header.snapshot")}</CommonTextLabel>
-                ),
-              },
-            ]}
+  const headerEnd = useMemo(() => {
+    return showAppSnapshot ? (
+      <HeaderProfile user={user} />
+    ) : (
+      <>
+        {applicationId && (
+          <AppPermissionDialog
+            applicationId={applicationId}
+            visible={permissionDialogVisible}
+            onVisibleChange={(visible) =>
+              !visible && setPermissionDialogVisible(false)
+            }
           />
         )}
-      >
-        <PackUpBtn buttonType="primary">
-          <PackUpIcon />
-        </PackUpBtn>
-      </Dropdown>
+        {canManageApp(user, application) && (
+          <GrayBtn onClick={() => setPermissionDialogVisible(true)}>
+            {SHARE_TITLE}
+          </GrayBtn>
+        )}
+        <PreviewBtn buttonType="primary" onClick={() => preview(applicationId)}>
+          {trans("header.preview")}
+        </PreviewBtn>
+
+        <Dropdown
+          className="cypress-header-dropdown"
+          placement="bottomRight"
+          trigger={["click"]}
+          dropdownRender={() => (
+            <DropdownMenuStyled
+              style={{ minWidth: "110px", borderRadius: "4px" }}
+              onClick={(e) => {
+                if (e.key === "deploy") {
+                  dispatch(publishApplication({ applicationId }));
+                } else if (e.key === "snapshot") {
+                  dispatch(setShowAppSnapshot(true));
+                }
+              }}
+              items={[
+                {
+                  key: "deploy",
+                  label: (
+                    <CommonTextLabel>{trans("header.deploy")}</CommonTextLabel>
+                  ),
+                },
+                {
+                  key: "snapshot",
+                  label: (
+                    <CommonTextLabel>{trans("header.snapshot")}</CommonTextLabel>
+                  ),
+                },
+              ]}
+            />
+          )}
+        >
+          <PackUpBtn buttonType="primary">
+            <PackUpIcon />
+          </PackUpBtn>
+        </Dropdown>
 
-      <HeaderProfile user={user} />
-    </>
-  );
+        <HeaderProfile user={user} />
+      </>
+    );
+  }, [
+    user,
+    showAppSnapshot,
+    applicationId,
+    permissionDialogVisible,
+  ]);
 
   return (
     <LayoutHeader

client/packages/lowcoder/src/pages/editor/editorSkeletonView.tsx

@@ -59,12 +59,12 @@ export default function EditorSkeletonView() {
   return (
     <>
       <Height100Div>
-        <Header
+        {/* <Header
           panelStatus={panelStatus}
           togglePanel={_.noop}
           editorModeStatus={editorModeStatus}
           toggleEditorModeStatus={_.noop}
-        />
+        /> */}
         <Body>
           <SiderStyled />
           {panelStatus.left && (