From 5a434406ff7a13bf05e4cfb5e140808774e1d949 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Thu, 12 Sep 2024 23:26:22 +0500
Subject: [PATCH 1/9] memoize cacheView and cachePropertyView

---
 .../packages/lowcoder/src/comps/comps/gridItemComp.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/gridItemComp.tsx b/client/packages/lowcoder/src/comps/comps/gridItemComp.tsx
index 2ac4e82eb..44ae164c6 100644
--- a/client/packages/lowcoder/src/comps/comps/gridItemComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/gridItemComp.tsx
@@ -62,7 +62,7 @@ const TmpComp = withTypeAndChildren<
   childrenMap
 );
 
-function CachedView(props: { comp: Comp; name: string }) {
+const CachedView = React.memo((props: { comp: Comp; name: string }) => {
   return React.useMemo(
     () => (
       <Profiler id={props.name} onRender={profilerCallback}>
@@ -73,13 +73,13 @@ function CachedView(props: { comp: Comp; name: string }) {
     ),
     [props.comp, props.name]
   );
-}
+})
 
-function CachedPropertyView(props: {
+const CachedPropertyView = React.memo((props: {
   comp: Comp;
   name: string;
   withParamsContext: WithParamsContext;
-}) {
+}) => {
   const prevHints = useContext(CompExposingContext);
   const { withParamsContext } = props;
   const hints = useMemo(
@@ -109,7 +109,7 @@ function CachedPropertyView(props: {
       </>
     );
   }, [props.comp, props.name, hints, searchText, setSearchText]);
-}
+});
 
 export class GridItemComp extends TmpComp {
   private readonly withParamsContext: WithParamsContext = { params: {} };

From 2304cd927dedba222cf728e29cc61d0588c462fd Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Thu, 12 Sep 2024 23:26:49 +0500
Subject: [PATCH 2/9] memoize lazyloadView

---
 .../lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx   | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx b/client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx
index 981d3852f..38952eb17 100644
--- a/client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx
@@ -11,6 +11,7 @@ import styled from "styled-components";
 import { RemoteCompInfo } from "types/remoteComp";
 import { withErrorBoundary } from "comps/generators/withErrorBoundary";
 import { ThemeContext } from "@lowcoder-ee/comps/utils/themeContext";
+import React from "react";
 
 const ViewError = styled.div`
   display: flex;
@@ -50,7 +51,7 @@ interface LazyCompViewProps {
   errorElement?: (error: any) => React.ReactNode;
 }
 
-function LazyCompView(props: React.PropsWithChildren<LazyCompViewProps>) {
+const LazyCompView = React.memo((props: React.PropsWithChildren<LazyCompViewProps>) => {
   const { loadComp, loadingElement, errorElement } = props;
   const [error, setError] = useState<any>("");
   const currentTheme = useContext(ThemeContext)?.theme;
@@ -83,7 +84,7 @@ function LazyCompView(props: React.PropsWithChildren<LazyCompViewProps>) {
   return (
     <WhiteLoading />
   );
-}
+});
 
 export type LazyloadCompLoader<T = RemoteCompInfo> = () => Promise<CompConstructor | null>;
 

From f50ad3872239173ac1d0b2f27177ba0c8a65deab Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Thu, 12 Sep 2024 23:30:12 +0500
Subject: [PATCH 3/9] memoize remoteCompView

---
 .../lowcoder/src/comps/comps/remoteComp/remoteComp.tsx   | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/remoteComp/remoteComp.tsx b/client/packages/lowcoder/src/comps/comps/remoteComp/remoteComp.tsx
index 5c4146eb0..a645a1f8e 100644
--- a/client/packages/lowcoder/src/comps/comps/remoteComp/remoteComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/remoteComp/remoteComp.tsx
@@ -13,6 +13,7 @@ import { loaders } from "./loaders";
 import { withErrorBoundary } from "comps/generators/withErrorBoundary";
 import { EditorContext } from "@lowcoder-ee/comps/editorState";
 import { CompContext } from "@lowcoder-ee/comps/utils/compContext";
+import React from "react";
 
 const ViewError = styled.div`
   display: flex;
@@ -53,7 +54,7 @@ interface RemoteCompViewProps {
   errorElement?: (error: any) => React.ReactNode;
 }
 
-function RemoteCompView(props: React.PropsWithChildren<RemoteCompViewProps>) {
+const RemoteCompView = React.memo((props: React.PropsWithChildren<RemoteCompViewProps>) => {
   const { loadComp, loadingElement, errorElement, isLowcoderComp } = props;
   const [error, setError] = useState<any>("");
   const editorState = useContext(EditorContext);
@@ -93,11 +94,9 @@ function RemoteCompView(props: React.PropsWithChildren<RemoteCompViewProps>) {
   }
 
   return (
-    <ViewLoadingWrapper>
-      <WhiteLoading />
-    </ViewLoadingWrapper>
+    <WhiteLoading />
   );
-}
+});
 
 export function remoteComp<T extends RemoteCompInfo = RemoteCompInfo>(
   remoteInfo?: T,

From 64dc3028ab84dcc1c441b89700ce04a05defe436 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Thu, 12 Sep 2024 23:31:21 +0500
Subject: [PATCH 4/9] memoize text comp

---
 .../lowcoder/src/comps/comps/textComp.tsx     | 161 ++++++++++--------
 1 file changed, 86 insertions(+), 75 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/comps/textComp.tsx b/client/packages/lowcoder/src/comps/comps/textComp.tsx
index 8dc56bad7..ec3acbd9c 100644
--- a/client/packages/lowcoder/src/comps/comps/textComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/textComp.tsx
@@ -21,6 +21,9 @@ import { PaddingControl } from "../controls/paddingControl";
 import React, { useContext, useEffect } from "react";
 import { EditorContext } from "comps/editorState";
 import { clickEvent, eventHandlerControl } from "../controls/eventHandlerControl";
+import { NewChildren } from "../generators/uiCompBuilder";
+import { RecordConstructorToComp } from "lowcoder-core";
+import { ToViewReturn } from "../generators/multi";
 
 const EventOptions = [clickEvent] as const;
 
@@ -130,87 +133,95 @@ const VerticalAlignmentOptions = [
   { label: <AlignVerticalCenter />, value: "center" },
   { label: <AlignBottom />, value: "flex-end" },
 ] as const;
+const childrenMap = {
+  text: stringExposingStateControl(
+    "text",
+    trans("textShow.text", { name: "{{currentUser.name}}" })
+  ),
+  onEvent: eventHandlerControl(EventOptions),
+  autoHeight: AutoHeightControl,
+  type: dropdownControl(typeOptions, "markdown"),
+  horizontalAlignment: alignWithJustifyControl(),
+  verticalAlignment: dropdownControl(VerticalAlignmentOptions, "center"),
+  style: styleControl(TextStyle, 'style'),
+  animationStyle: styleControl(AnimationStyle, 'animationStyle'),
+  margin: MarginControl,
+  padding: PaddingControl,
+};
 
-let TextTmpComp = (function () {
-  const childrenMap = {
-    text: stringExposingStateControl(
-      "text",
-      trans("textShow.text", { name: "{{currentUser.name}}" })
-    ),
-    onEvent: eventHandlerControl(EventOptions),
-    autoHeight: AutoHeightControl,
-    type: dropdownControl(typeOptions, "markdown"),
-    horizontalAlignment: alignWithJustifyControl(),
-    verticalAlignment: dropdownControl(VerticalAlignmentOptions, "center"),
-    style: styleControl(TextStyle, 'style'),
-    animationStyle: styleControl(AnimationStyle, 'animationStyle'),
-    margin: MarginControl,
-    padding: PaddingControl,
-  };
-  return new UICompBuilder(childrenMap, (props, dispatch) => {
-    const value = props.text.value;
-  
-    return (
-      <TextContainer
-        $animationStyle={props.animationStyle}
-        $type={props.type}
-        $styleConfig={props.style}
-        style={{
-          justifyContent: props.horizontalAlignment,
-          alignItems: props.autoHeight ? "center" : props.verticalAlignment,
-          textAlign: props.horizontalAlignment,
-          rotate: props.style.rotation
-        }}
-        onClick={() => props.onEvent("click")}
-      >
-        {props.type === "markdown" ? <TacoMarkDown>{value}</TacoMarkDown> : value}
-      </TextContainer>
-    );
-  })
-    .setPropertyViewFn((children) => {
-      return (
+type ChildrenType = NewChildren<RecordConstructorToComp<typeof childrenMap>>;
+
+const TextPropertyView = React.memo((props: {
+  children: ChildrenType
+}) => {
+  return (
+    <>
+      <Section name={sectionNames.basic}>
+        {props.children.type.propertyView({
+          label: trans("value"),
+          tooltip: trans("textShow.valueTooltip"),
+          radioButton: true,
+        })}
+        {props.children.text.propertyView({})}
+      </Section>
+
+      {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+        <Section name={sectionNames.interaction}>
+          {hiddenPropertyView(props.children)}
+          {props.children.onEvent.getPropertyView()}
+        </Section>
+      )}
+
+      {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
         <>
-          <Section name={sectionNames.basic}>
-            {children.type.propertyView({
-              label: trans("value"),
-              tooltip: trans("textShow.valueTooltip"),
+          <Section name={sectionNames.layout}>
+            {props.children.autoHeight.getPropertyView()}
+            {!props.children.autoHeight.getView() &&
+              props.children.verticalAlignment.propertyView({
+                label: trans("textShow.verticalAlignment"),
+                radioButton: true,
+              })}
+            {props.children.horizontalAlignment.propertyView({
+              label: trans("textShow.horizontalAlignment"),
               radioButton: true,
             })}
-            {children.text.propertyView({})}
           </Section>
-
-          {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
-            <Section name={sectionNames.interaction}>
-              {hiddenPropertyView(children)}
-              {children.onEvent.getPropertyView()}
-            </Section>
-          )}
-
-          {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
-            <>
-              <Section name={sectionNames.layout}>
-                {children.autoHeight.getPropertyView()}
-                {!children.autoHeight.getView() &&
-                  children.verticalAlignment.propertyView({
-                    label: trans("textShow.verticalAlignment"),
-                    radioButton: true,
-                  })}
-                {children.horizontalAlignment.propertyView({
-                  label: trans("textShow.horizontalAlignment"),
-                  radioButton: true,
-                })}
-              </Section>
-              <Section name={sectionNames.style}>
-                {children.style.getPropertyView()}
-              </Section>
-              <Section name={sectionNames.animationStyle} hasTooltip={true}>
-                {children.animationStyle.getPropertyView()}
-              </Section>
-            </>
-          )}
+          <Section name={sectionNames.style}>
+            {props.children.style.getPropertyView()}
+          </Section>
+          <Section name={sectionNames.animationStyle} hasTooltip={true}>
+            {props.children.animationStyle.getPropertyView()}
+          </Section>
         </>
-      );
-    })
+      )}
+    </>
+  );
+})
+
+const TextView = React.memo((props: ToViewReturn<ChildrenType>) => {
+  const value = props.text.value;
+
+  return (
+    <TextContainer
+      $animationStyle={props.animationStyle}
+      $type={props.type}
+      $styleConfig={props.style}
+      style={{
+        justifyContent: props.horizontalAlignment,
+        alignItems: props.autoHeight ? "center" : props.verticalAlignment,
+        textAlign: props.horizontalAlignment,
+        rotate: props.style.rotation
+      }}
+      onClick={() => props.onEvent("click")}
+    >
+      {props.type === "markdown" ? <TacoMarkDown>{value}</TacoMarkDown> : value}
+    </TextContainer>
+  );
+}, (prev, next) => JSON.stringify(prev) === JSON.stringify(next));
+
+let TextTmpComp = (function () {
+  return new UICompBuilder(childrenMap, (props) => <TextView {...props} />)
+    .setPropertyViewFn((children) => <TextPropertyView children={children} />)
     .build();
 })();
 

From bf383d2d3bd07e3e098b97e8e463a8548e428ad5 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Thu, 12 Sep 2024 23:32:40 +0500
Subject: [PATCH 5/9] expose autoIncrement from OptionControl

---
 client/packages/lowcoder/src/comps/controls/optionsControl.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/client/packages/lowcoder/src/comps/controls/optionsControl.tsx b/client/packages/lowcoder/src/comps/controls/optionsControl.tsx
index 5d71dbdb2..a9b7da2f6 100644
--- a/client/packages/lowcoder/src/comps/controls/optionsControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/optionsControl.tsx
@@ -359,6 +359,7 @@ export function optionsControl<T extends OptionsControlType>(
     uniqField?: keyof ConstructorToView<T>;
     // manual mode list title
     title?: string;
+    autoIncField?: keyof PickNumberFields<ConstructorToView<T>>;
   }
 ) {
   type OptionViewType = ConstructorToView<T>;
@@ -369,6 +370,7 @@ export function optionsControl<T extends OptionsControlType>(
       manual: manualOptionsControl(VariantComp, {
         initOptions: config.initOptions,
         uniqField: config.uniqField,
+        autoIncField: config.autoIncField,
       }),
       mapData: mapOptionsControl(VariantComp, config.uniqField),
     },

From cd948afee2b306f929cbfcff3cbeb13eb229d42c Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Thu, 12 Sep 2024 23:35:02 +0500
Subject: [PATCH 6/9] fixed table not loading inside kanban card

---
 .../lowcoder/src/comps/controls/slotControl.tsx | 17 ++++++++++-------
 .../generators/withSelectedMultiContext.tsx     |  4 ++++
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/controls/slotControl.tsx b/client/packages/lowcoder/src/comps/controls/slotControl.tsx
index 587a42c2a..c14532c28 100644
--- a/client/packages/lowcoder/src/comps/controls/slotControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/slotControl.tsx
@@ -16,6 +16,8 @@ import { createContext, useContext } from "react";
 import styled from "styled-components";
 import { NameGenerator } from "comps/utils";
 import { JSONValue } from "util/jsonTypes";
+import React from "react";
+import { isEqual } from "lodash";
 
 const ModalStyled = styled.div<{ $background?: string }>`
   .ant-modal-content {
@@ -42,15 +44,15 @@ export const SlotConfigContext = createContext<{
   modalWidth: 520,
 });
 
-const ContainerView = (props: ContainerBaseProps) => {
+const ContainerView = React.memo((props: ContainerBaseProps) => {
   return <InnerGrid {...props} emptyRows={15} autoHeight />;
-};
+});
 
-function ModalConfigView(props: {
+const ModalConfigView = React.memo((props: {
   visible: boolean;
   containerProps: ConstructorToView<typeof SimpleContainerComp>;
   onCancel: () => void;
-}) {
+}) => {
   const { visible, containerProps, onCancel } = props;
   const background = useContext(BackgroundColorContext);
   const { modalWidth = 520 } = useContext(SlotConfigContext);
@@ -58,7 +60,7 @@ function ModalConfigView(props: {
     return null;
   }
   return (
-    (<ModalWrapper>
+    <ModalWrapper>
       <Modal
         width={modalWidth}
         open={visible}
@@ -67,6 +69,7 @@ function ModalConfigView(props: {
         footer={null}
         styles={{ body: {padding: "0"} }}
         zIndex={Layers.modal}
+        maskClosable={false}
         modalRender={(node) => (
           <ModalStyled $background={background} onClick={() => {}}>
             {node}
@@ -81,9 +84,9 @@ function ModalConfigView(props: {
           items={gridItemCompToGridItems(containerProps.items)}
         />
       </Modal>
-    </ModalWrapper>)
+    </ModalWrapper>
   );
-}
+}, (prevProps, nextProps) => isEqual(prevProps, nextProps));
 
 const childrenMap = {
   container: SimpleContainerComp,
diff --git a/client/packages/lowcoder/src/comps/generators/withSelectedMultiContext.tsx b/client/packages/lowcoder/src/comps/generators/withSelectedMultiContext.tsx
index 68b41a59b..2743ae166 100644
--- a/client/packages/lowcoder/src/comps/generators/withSelectedMultiContext.tsx
+++ b/client/packages/lowcoder/src/comps/generators/withSelectedMultiContext.tsx
@@ -87,6 +87,10 @@ export function withSelectedMultiContext<TCtor extends MultiCompConstructor>(
         || isCustomAction<LazyCompReadyAction>(action, "LazyCompReady")
         || isCustomAction<ModuleReadyAction>(action, "moduleReady")
       ) && action.path[1] === SELECTED_KEY) {
+        if (action.path[0] === MAP_KEY && action.path[1] === SELECTED_KEY) {
+          action.path[1] = this.selection;
+          comp = super.reduce(action);
+        }
         // broadcast
         const newAction = {
           ...action,

From 0ef3216b9e328bb8c66ce80ebec6224ab851d19d Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Thu, 12 Sep 2024 23:35:34 +0500
Subject: [PATCH 7/9] memoize uiCompBuilder

---
 .../src/comps/generators/uiCompBuilder.tsx    | 101 +++++++++++-------
 1 file changed, 61 insertions(+), 40 deletions(-)

diff --git a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
index 4e9b1d24c..12905c898 100644
--- a/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
+++ b/client/packages/lowcoder/src/comps/generators/uiCompBuilder.tsx
@@ -1,5 +1,5 @@
 import { BoolCodeControl, StringControl } from "comps/controls/codeControl";
-import React, { ReactNode, useContext, useEffect, useRef, useState } from "react";
+import React, { ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState } from "react";
 import { ExternalEditorContext } from "util/context/ExternalEditorContext";
 import { Comp, CompParams, MultiBaseComp } from "lowcoder-core";
 import {
@@ -28,7 +28,7 @@ import { BoolControl } from "../controls/boolControl";
 import { valueComp, withDefault } from "./simpleGenerators";
 import { getPromiseAfterDispatch } from "@lowcoder-ee/util/promiseUtils";
 import { EditorContext } from "../editorState";
-import { values } from "lodash";
+import { isEqual, values } from "lodash";
 import { UICompType, uiCompRegistry } from "../uiCompRegistry";
 import { getNpmPackageMeta } from "../utils/remote";
 import { compPluginsList } from "constants/compPluginConstants";
@@ -289,44 +289,34 @@ const UIView = React.memo((props: {
     childrenProps['disabled'] = disabled || parentDisabled;
   }
 
-  //ADDED BY FRED
-  if (childrenProps.events) {
-    const events = childrenProps.events as {value?: any[]};
-    if (!events.value || events.value.length === 0) {
-      events.value = [];
-    }
-  }
-  //END ADD BY FRED
-
   useMergeCompStyles(
     childrenJsonProps as Record<string, any>,
     comp.dispatch
   );
 
-  // render condition for modal and drawer as we are not getting compType here
-  if (comp.children.hasOwnProperty('showMask') && comp.children.hasOwnProperty('maskClosable')) {
-    return (
-      <HidableView hidden={childrenProps.hidden as boolean}>
-        {props.viewFn(
-          childrenProps,
-          comp.dispatch
-        )}
-      </HidableView>
-    );
-  }
+  const defaultChildren = useMemo(() => comp.children, [comp.children]);
+  const isNotContainer = useMemo(() => Boolean(defaultChildren.style), [defaultChildren.style]);
+  const restrictPaddingOnRotation = useMemo(() => Boolean(defaultChildren.restrictPaddingOnRotation), [defaultChildren.restrictPaddingOnRotation]);
+  const rotationVal = useMemo(() => {
+    if (isNotContainer) {
+      return defaultChildren.style.children?.rotation?.valueAndMsg.value
+    }
+    return null;
+  }, [isNotContainer, defaultChildren.style.children?.rotation?.valueAndMsg.value]);
+  const boxShadowVal = useMemo(() => {
+    if (isNotContainer) {
+      return defaultChildren.style?.children?.boxShadow?.valueAndMsg?.value;
+    }
+    return null;
+  }, [isNotContainer, defaultChildren.style?.children?.boxShadow?.valueAndMsg?.value]);
+  const restrictPaddingOnRotationVal = useMemo(() => {
+    if (isNotContainer) {
+      return defaultChildren?.restrictPaddingOnRotation?.valueAndMsg?.value
+    }
+    return null;
+  }, [isNotContainer, defaultChildren?.restrictPaddingOnRotation?.valueAndMsg?.value]);
 
-  let defaultChildren = comp.children;
-  const isNotContainer = defaultChildren.hasOwnProperty('style');
-  const restrictPaddingOnRotation = defaultChildren.hasOwnProperty('restrictPaddingOnRotation');
-  let rotationVal:any = null
-  let boxShadowVal:any = null;
-  let restrictPaddingOnRotationVal:any=null;
-  if (isNotContainer) {
-    rotationVal = defaultChildren.style.children?.rotation?.valueAndMsg.value;
-    boxShadowVal = defaultChildren.style?.children?.boxShadow?.valueAndMsg?.value;
-    restrictPaddingOnRotationVal = defaultChildren?.restrictPaddingOnRotation?.valueAndMsg?.value;
-  }
-  const getPadding = () => {
+  const getPadding = useCallback(() => {
     if (
       (rotationVal === null ||
         rotationVal === undefined ||
@@ -386,9 +376,22 @@ const UIView = React.memo((props: {
     } else {
       return '0px'; // Default value if neither rotation nor box-shadow is applied
     }
-  };
+  }, [
+    rotationVal,
+    boxShadowVal,
+    restrictPaddingOnRotationVal,
+    restrictPaddingOnRotation,
+  ]);
 
-  return (
+  // render condition for modal and drawer as we are not getting compType here
+  
+  const uiCompRender = useMemo(() => props.viewFn(childrenProps, comp.dispatch), [
+    childrenProps,
+    comp.dispatch
+  ]);
+  
+  const uiCompRenderWithWrapper = useMemo(() => {
+    return (
     <div
       ref={props.innerRef}
       className={childrenProps.className as string}
@@ -400,9 +403,27 @@ const UIView = React.memo((props: {
         padding: getPadding()
       }}
     >
-      <HidableView hidden={childrenProps.hidden as boolean}>
-        {props.viewFn(childrenProps, comp.dispatch)}
-      </HidableView>
+      {uiCompRender}
     </div>
-  );
+  )}, [
+    uiCompRender,
+    props.innerRef,
+    childrenProps.className,
+    childrenProps.dataTestId,
+    getPadding,
+  ]);
+
+  const renderView = useMemo(() => {
+    if (
+      comp.children.hasOwnProperty('showMask')
+      && comp.children.hasOwnProperty('maskClosable')
+    ) {
+      return uiCompRender;
+    }
+    return uiCompRenderWithWrapper;
+  }, [comp.children]);
+
+  return renderView;
+}, (prevProps, nextProps) => {
+  return isEqual(prevProps, nextProps);
 });

From 6ebb066b7fee0cf5ad5d7ca8b3b19b61599b94b5 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Thu, 12 Sep 2024 23:37:31 +0500
Subject: [PATCH 8/9] added fallback for left-panel, right-panel and
 bottom-panel

---
 .../lowcoder/src/layout/gridLayout.tsx        |   1 -
 .../lowcoder/src/pages/common/header.tsx      |   2 +-
 .../lowcoder/src/pages/editor/AppEditor.tsx   |   7 +-
 .../lowcoder/src/pages/editor/appSnapshot.tsx |   5 +-
 .../lowcoder/src/pages/editor/editorView.tsx  | 131 ++++++++++--------
 5 files changed, 81 insertions(+), 65 deletions(-)

diff --git a/client/packages/lowcoder/src/layout/gridLayout.tsx b/client/packages/lowcoder/src/layout/gridLayout.tsx
index 52f4a3a1b..31f2054bf 100644
--- a/client/packages/lowcoder/src/layout/gridLayout.tsx
+++ b/client/packages/lowcoder/src/layout/gridLayout.tsx
@@ -1097,7 +1097,6 @@ const LayoutContainer = styled.div<{
   }`}
 `;
 
-// export const ReactGridLayout = React.memo(GridLayout);
 export const ReactGridLayout = React.memo(GridLayout);
 
 function moveOrResize(
diff --git a/client/packages/lowcoder/src/pages/common/header.tsx b/client/packages/lowcoder/src/pages/common/header.tsx
index 4a4ae436f..b37178659 100644
--- a/client/packages/lowcoder/src/pages/common/header.tsx
+++ b/client/packages/lowcoder/src/pages/common/header.tsx
@@ -401,7 +401,7 @@ export default function Header(props: HeaderProps) {
         size="small"
       >
         {editorModeOptions.map((option) => (
-          <Tooltip title={option.tooltip}>
+          <Tooltip key={option.key} title={option.tooltip}>
             <Radio.Button key={option.key} value={option.value}>
               {option.label}
             </Radio.Button>
diff --git a/client/packages/lowcoder/src/pages/editor/AppEditor.tsx b/client/packages/lowcoder/src/pages/editor/AppEditor.tsx
index 294367599..b11a4fce0 100644
--- a/client/packages/lowcoder/src/pages/editor/AppEditor.tsx
+++ b/client/packages/lowcoder/src/pages/editor/AppEditor.tsx
@@ -31,6 +31,7 @@ import {ErrorBoundary, FallbackProps} from 'react-error-boundary';
 import { ALL_APPLICATIONS_URL } from "@lowcoder-ee/constants/routesURL";
 import history from "util/history";
 import Flex from "antd/es/flex";
+import React from "react";
 
 const AppSnapshot = lazy(() => {
   return import("pages/editor/appSnapshot")
@@ -42,7 +43,7 @@ const AppEditorInternalView = lazy(
     .then(moduleExports => ({default: moduleExports.AppEditorInternalView}))
 );
 
-export default function AppEditor() {
+const AppEditor = React.memo(() => {
   const showAppSnapshot = useSelector(showAppSnapshotSelector);
   const params = useParams<AppPathParams>();
   const isUserViewModeCheck = useUserViewMode();
@@ -190,4 +191,6 @@ export default function AppEditor() {
       )}
     </ErrorBoundary>
   );
-}
+});
+
+export default AppEditor;
diff --git a/client/packages/lowcoder/src/pages/editor/appSnapshot.tsx b/client/packages/lowcoder/src/pages/editor/appSnapshot.tsx
index fc5099af3..2ab78926a 100644
--- a/client/packages/lowcoder/src/pages/editor/appSnapshot.tsx
+++ b/client/packages/lowcoder/src/pages/editor/appSnapshot.tsx
@@ -36,6 +36,7 @@ import { TopHeaderHeight } from "constants/style";
 import { SnapshotItemProps, SnapshotList } from "../../components/SnapshotList";
 import { trans } from "i18n";
 import EditorSkeletonView from "./editorSkeletonView";
+import React from "react";
 
 const AppEditorInternalView = lazy(
   () => import("pages/editor/appEditorInternal")
@@ -134,7 +135,7 @@ const PAGE_SIZE = 10;
 const CURRENT_ITEM_KEY = "current_key";
 const TIME_FORMAT = trans("history.timeFormat");
 
-export function AppSnapshot(props: { currentAppInfo: AppSummaryInfo }) {
+export const AppSnapshot = React.memo((props: { currentAppInfo: AppSummaryInfo }) => {
   const { currentAppInfo } = props;
   const currentDsl = currentAppInfo.dsl;
   const dispatch = useDispatch();
@@ -289,4 +290,4 @@ export function AppSnapshot(props: { currentAppInfo: AppSummaryInfo }) {
       </AppSnapshotPanel>
     </Suspense>
   );
-}
+});
diff --git a/client/packages/lowcoder/src/pages/editor/editorView.tsx b/client/packages/lowcoder/src/pages/editor/editorView.tsx
index 8855bf48b..3cf8a647f 100644
--- a/client/packages/lowcoder/src/pages/editor/editorView.tsx
+++ b/client/packages/lowcoder/src/pages/editor/editorView.tsx
@@ -54,7 +54,8 @@ import {
 import { isAggregationApp } from "util/appUtils";
 import EditorSkeletonView from "./editorSkeletonView";
 import { getCommonSettings } from "@lowcoder-ee/redux/selectors/commonSettingSelectors";
-import { isEqual } from "lodash";
+import { isEqual, noop } from "lodash";
+import { BottomSkeleton } from "./bottom/BottomContent";
 
 const LeftContent = lazy(
   () => import('./LeftContent')
@@ -374,6 +375,23 @@ function EditorView(props: EditorViewProps) {
 
   const hideBodyHeader = useTemplateViewMode() || (isViewMode && (!showHeaderInPublic || !commonSettings.showHeaderInPublicApps));
 
+  const uiCompView = useMemo(() => {
+    if (showAppSnapshot) {
+      return (
+        <ViewBody $hideBodyHeader={hideBodyHeader} $height={height}>
+          <EditorContainer>{uiComp.getView()}</EditorContainer>
+        </ViewBody>
+      );
+    }
+    
+    return uiComp.getView();
+  }, [
+    showAppSnapshot,
+    hideBodyHeader,
+    height,
+    uiComp,
+  ]);
+
   // we check if we are on the public cloud
   const isLowCoderDomain = window.location.hostname === 'app.lowcoder.cloud';
   const isLocalhost = window.location.hostname === 'localhost';
@@ -425,16 +443,6 @@ function EditorView(props: EditorViewProps) {
   
   // history mode, display with the right panel, a little trick
   const showRight = panelStatus.right || showAppSnapshot;
-  let uiCompView;
-  if (showAppSnapshot) {
-    uiCompView = (
-      <ViewBody $hideBodyHeader={hideBodyHeader} $height={height}>
-        <EditorContainer>{uiComp.getView()}</EditorContainer>
-      </ViewBody>
-    );
-  } else {
-    uiCompView = uiComp.getView();
-  }
 
   const clickMenu = (params: { key: string }) => {
     let left = true;
@@ -514,46 +522,47 @@ function EditorView(props: EditorViewProps) {
                 )}
               </Sider>
             </SiderWrapper>
-
-            {panelStatus.left && editorModeStatus !== "layout" && (
-              <LeftPanel>
-                {menuKey === SiderKey.State && <LeftContent uiComp={uiComp} />}
-                {menuKey === SiderKey.Setting && (
-                  <SettingsDiv>
-                    <ScrollBar>
-                      {application &&
-                        !isAggregationApp(
-                          AppUILayoutType[application.applicationType]
-                        ) && (
-                          <>
-                            {appSettingsComp.getPropertyView()}
-                            <Divider />
-                          </>
-                        )}
-                      <TitleDiv>{trans("leftPanel.toolbarTitle")}</TitleDiv>
-                      {props.preloadComp.getPropertyView()}
-                      <PreloadDiv
-                        onClick={() => dispatch(
-                          setEditorExternalStateAction({
-                            showScriptsAndStyleModal: true,
-                          })
-                        )}
-                      >
-                        <LeftPreloadIcon />
-                        {trans("leftPanel.toolbarPreload")}
-                      </PreloadDiv>
-                    </ScrollBar>
-
-                    {props.preloadComp.getJSLibraryPropertyView()}
-                  </SettingsDiv>
-                )}
-
-                {menuKey === SiderKey.Layout && (
-                  <LeftLayersContent uiComp={uiComp} />
-                )}
-
-              </LeftPanel>
-            )}
+            <Suspense fallback={null}>
+              {panelStatus.left && editorModeStatus !== "layout" && (
+                <LeftPanel>
+                  {menuKey === SiderKey.State && <LeftContent uiComp={uiComp} />}
+                  {menuKey === SiderKey.Setting && (
+                    <SettingsDiv>
+                      <ScrollBar>
+                        {application &&
+                          !isAggregationApp(
+                            AppUILayoutType[application.applicationType]
+                          ) && (
+                            <>
+                              {appSettingsComp.getPropertyView()}
+                              <Divider />
+                            </>
+                          )}
+                        <TitleDiv>{trans("leftPanel.toolbarTitle")}</TitleDiv>
+                        {props.preloadComp.getPropertyView()}
+                        <PreloadDiv
+                          onClick={() => dispatch(
+                            setEditorExternalStateAction({
+                              showScriptsAndStyleModal: true,
+                            })
+                          )}
+                        >
+                          <LeftPreloadIcon />
+                          {trans("leftPanel.toolbarPreload")}
+                        </PreloadDiv>
+                      </ScrollBar>
+
+                      {props.preloadComp.getJSLibraryPropertyView()}
+                    </SettingsDiv>
+                  )}
+
+                  {menuKey === SiderKey.Layout && (
+                    <LeftLayersContent uiComp={uiComp} />
+                  )}
+
+                </LeftPanel>
+              )}
+            </Suspense>
             <MiddlePanel>
               <EditorWrapper className={editorContentClassName}>
                 <EditorHotKeys disabled={readOnly}>
@@ -563,15 +572,19 @@ function EditorView(props: EditorViewProps) {
                   </EditorContainerWithViewMode>
                 </EditorHotKeys>
               </EditorWrapper>
-              {panelStatus.bottom && editorModeStatus !== "layout" && <Bottom />}
+              <Suspense fallback={<BottomSkeleton />}>
+                {panelStatus.bottom && editorModeStatus !== "layout" && <Bottom />}
+              </Suspense>
             </MiddlePanel>
-            {showRight && (
-              <RightPanel
-                uiComp={uiComp}
-                onCompDrag={onCompDrag}
-                showPropertyPane={editorState.showPropertyPane}
-                onTabChange={setShowPropertyPane} />
-            )}
+            <Suspense fallback={null}>
+              {showRight && (
+                <RightPanel
+                  uiComp={uiComp}
+                  onCompDrag={onCompDrag}
+                  showPropertyPane={editorState.showPropertyPane}
+                  onTabChange={setShowPropertyPane} />
+              )}
+            </Suspense>
           </Body>
         </EditorGlobalHotKeys>
       </Height100Div></>

From 4bafc342a4c7135e966b226c13eee7fbb030a209 Mon Sep 17 00:00:00 2001
From: RAHEEL <mraheeliftikhar1994@gmail.com>
Date: Thu, 12 Sep 2024 23:37:56 +0500
Subject: [PATCH 9/9] memoize useMergeCompStyles hook

---
 client/packages/lowcoder/src/util/hooks.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/client/packages/lowcoder/src/util/hooks.ts b/client/packages/lowcoder/src/util/hooks.ts
index 419606216..1a265320f 100644
--- a/client/packages/lowcoder/src/util/hooks.ts
+++ b/client/packages/lowcoder/src/util/hooks.ts
@@ -190,5 +190,10 @@ export function useMergeCompStyles(
       styleProps,
       themeId,
     });
-  }, []);
+  }, [
+    themeId,
+    JSON.stringify(styleProps),
+    JSON.stringify(compTheme),
+    setInitialCompStyles
+  ]);
 }
\ No newline at end of file