diff --git a/client/packages/lowcoder-design/src/components/Loading.tsx b/client/packages/lowcoder-design/src/components/Loading.tsx
index 414096e339..d5ffc67104 100644
--- a/client/packages/lowcoder-design/src/components/Loading.tsx
+++ b/client/packages/lowcoder-design/src/components/Loading.tsx
@@ -74,6 +74,7 @@ type LoadingProps = {
 size?: number; // circle's size
 className?: string;
 style?: CSSProperties;
+ compHeight?: number;
 };
 
 export const Loading = (props: LoadingProps) => {
@@ -92,7 +93,11 @@ export const Loading = (props: LoadingProps) => {
 <load2 {...loadingProps} />
 </container>
 </containerx> */}
- <styledskeleton active style={{height: '100%', animationDuration: '2s'}} />
+ <styledskeleton + active + paragraph={{rows: props.compHeight ? Math.floor((props.compHeight * 8) / 35) : 4}} + style={{height: '100%', animationDuration: '2s'}} + />
 </loadingwrapper>
 );
 };
diff --git a/client/packages/lowcoder-design/src/components/control.tsx b/client/packages/lowcoder-design/src/components/control.tsx
index a25f9df8b2..cae47a3f3a 100644
--- a/client/packages/lowcoder-design/src/components/control.tsx
+++ b/client/packages/lowcoder-design/src/components/control.tsx
@@ -159,7 +159,9 @@ export const ControlPropertyViewWrapper = (
 <tooltiplabel title={tooltip} label={label} - overlayInnerStyle={labelTooltipOverlayInnerStyle} + styles={{ + body: labelTooltipOverlayInnerStyle, + }} />
 </labelwrapper>
 )}
diff --git a/client/packages/lowcoder-design/src/components/iconSelect/index.tsx b/client/packages/lowcoder-design/src/components/iconSelect/index.tsx
index 6eac2f7b64..23c73b200f 100644
--- a/client/packages/lowcoder-design/src/components/iconSelect/index.tsx
+++ b/client/packages/lowcoder-design/src/components/iconSelect/index.tsx
@@ -363,10 +363,12 @@ export const IconSelectBase = (props: {
 onOpenChange={setVisible}
 getPopupContainer={parent ? () => parent : undefined}
 // hide the original background when dragging the popover is allowed
- overlayInnerStyle={{
- border: "none",
- boxShadow: "none",
- background: "transparent",
+ styles={{
+ body: {
+ border: "none",
+ boxShadow: "none",
+ background: "transparent",
+ }
 }}
 // when dragging is allowed, always re-location to avoid the popover exceeds the screen
 destroyTooltipOnHide
diff --git a/client/packages/lowcoder-design/src/components/popover.tsx b/client/packages/lowcoder-design/src/components/popover.tsx
index c7e745d06e..4a6d0cbb53 100644
--- a/client/packages/lowcoder-design/src/components/popover.tsx
+++ b/client/packages/lowcoder-design/src/components/popover.tsx
@@ -64,7 +64,6 @@ const SimplePopover = (props: {
 );
 return (
 <popover - overlayInnerStyle={{padding: 0}} offset: [-12, 0, 0, 0], }} @@ -74,7 +73,10 @@ const SimplePopover = (props: { open={visible} onOpenChange={setVisible} placement="left" - overlayStyle={{ width: "310px" }} + styles={{ + root: { width: "310px" }, + body: { padding: 0 } + }}>
 {props.children}
 </popover>
@@ -101,16 +103,18 @@ const CustomPopover = (props: {
 );
 return (
 <popover - overlayInnerStyle={{padding: 0}} content={contentWithBox} trigger="click" open={visible} onOpenChange={setVisible} placement={props.type === "query" ? "top" : "left"} - overlayStyle={{ width: "310px" }} offset: [-12, 0, 0, 0], }} + styles={{ + root: { width: "310px" }, + body: { padding: 0 } + }}>
 {props.children}
 </popover>
@@ -167,8 +171,10 @@ const EditPopover = (props: EditPopoverProps) => {
 return (
 <popover arrow={false} - overlayStyle={{paddingTop: '15px'}} - overlayInnerStyle={{padding: 0}} + styles={{ + root: { paddingTop: '15px' }, + body: { padding: 0 } + }} content={() => (
 <strong>
 <wedge />
diff --git a/client/packages/lowcoder-design/src/components/shapeSelect/index.tsx b/client/packages/lowcoder-design/src/components/shapeSelect/index.tsx
index a4a71964be..060945977c 100644
--- a/client/packages/lowcoder-design/src/components/shapeSelect/index.tsx
+++ b/client/packages/lowcoder-design/src/components/shapeSelect/index.tsx
@@ -444,10 +444,12 @@ export const ShapeSelectBase = (props: {
 onOpenChange={setVisible}
 getPopupContainer={parent ? () => parent : undefined}
 // hide the original background when dragging the popover is allowed
- overlayInnerStyle={{
- border: "none",
- boxShadow: "none",
- background: "transparent",
+ styles={{
+ body: {
+ border: "none",
+ boxShadow: "none",
+ background: "transparent",
+ }
 }}
 // when dragging is allowed, always re-location to avoid the popover exceeds the screen
 destroyTooltipOnHide
diff --git a/client/packages/lowcoder-design/src/components/toolTip.tsx b/client/packages/lowcoder-design/src/components/toolTip.tsx
index 9b5a624c28..3a6b53843d 100644
--- a/client/packages/lowcoder-design/src/components/toolTip.tsx
+++ b/client/packages/lowcoder-design/src/components/toolTip.tsx
@@ -155,7 +155,7 @@ export const UnderlineCss = css`
 `;
 
 function Tooltip(props: TooltipProps) {
- return <antdtooltip color="#2c2c2c2" overlayInnerStyle={overlayInnerCss} {...props} />;
+ return <antdtooltip color="#2c2c2c2" styles={{ body: overlayInnerCss }} {...props} />;
 }
 
 const Label = styled.div<{ $border?: boolean }>`
@@ -181,7 +181,9 @@ function ToolTipLabel(
 <antdtooltip color="#2c2c2c" title={title && <tooltiptitlewrapper><strong>{title}</strong></tooltiptitlewrapper>}
- overlayInnerStyle={{ maxWidth: "232px", whiteSpace: "break-spaces" }}
+ styles={{
+ body: { maxWidth: "232px", whiteSpace: "break-spaces" }
+ }}
 arrow={{
 pointAtCenter: true
 }}
diff --git a/client/packages/lowcoder/index.html b/client/packages/lowcoder/index.html
index 0f69f02936..8bd8757bcd 100644
--- a/client/packages/lowcoder/index.html
+++ b/client/packages/lowcoder/index.html
@@ -30,6 +30,7 @@
 flex-direction: column;
 top: 0;
 z-index: 10000;
+ transition: opacity 0.25s linear;
 }
 #loading svg {
 animation: breath 1s linear infinite;
diff --git a/client/packages/lowcoder/package.json b/client/packages/lowcoder/package.json
index 65146553a3..44903f0a66 100644
--- a/client/packages/lowcoder/package.json
+++ b/client/packages/lowcoder/package.json
@@ -127,6 +127,7 @@
 "eslint-config-react-app": "^7.0.1",
 "eslint-plugin-only-ascii": "^0.0.0",
 "http-proxy-middleware": "^2.0.6",
+ "rollup-plugin-terser": "^7.0.2",
 "rollup-plugin-visualizer": "^5.9.2",
 "typescript": "^4.8.4",
 "vite": "^4.5.5",
diff --git a/client/packages/lowcoder/src/base/codeEditor/autoFormat.tsx b/client/packages/lowcoder/src/base/codeEditor/autoFormat.tsx
index 17b5820a32..8a1c63caa7 100644
--- a/client/packages/lowcoder/src/base/codeEditor/autoFormat.tsx
+++ b/client/packages/lowcoder/src/base/codeEditor/autoFormat.tsx
@@ -2,30 +2,31 @@ import type { CodeType } from "lowcoder-core";
 import { relaxedJSONToJSON } from "lowcoder-core";
 import { getDynamicStringSegments, isDynamicSegment } from "lowcoder-core";
 import { format as formatSQL } from "sql-formatter";
+import estree from "prettier/plugins/estree";
 import type { Language } from "./codeEditorTypes";
 
 export async function cssFormatter(text: string) {
- const prettier = await require("prettier/standalone");
- const parserPlugin = await require("prettier/parser-postcss");
+ const prettier = await import("prettier/standalone");
+ const parserPlugin = await import("prettier/plugins/postcss");
 return (await prettier.format(text, { parser: "css", plugins: [parserPlugin], semi: false })).trim();
 }
 
 export async function htmlFormatter(text: string) {
- const prettier = await require("prettier/standalone");
- const parserPlugin = await require("prettier/parser-html");
+ const prettier = await import("prettier/standalone");
+ const parserPlugin = await import("prettier/plugins/html");
 return (await prettier.format(text, { parser: "html", plugins: [parserPlugin], semi: false })).trim();
 } 
 
 async function getJavascriptFormatter() {
- const prettier = await require("prettier/standalone");
- const parserBabel = await require("prettier/parser-babel");
+ const prettier = await import("prettier/standalone");
+ const parserBabel = await import("prettier/plugins/babel");
 return async (text: string) =>
- (await prettier.format(text, { parser: "babel", plugins: [parserBabel], semi: false })).trim();
+ (await prettier.format(text, { parser: "babel", plugins: [parserBabel, estree], semi: false })).trim();
 }
 
 export async function getJsonFormatter() {
- const prettier = await require("prettier/standalone");
- const parserBabel = await require("prettier/parser-babel");
+ const prettier = await import("prettier/standalone");
+ const parserBabel = await import("prettier/plugins/babel");
 return async (text: string) => (await prettier.format(text, { parser: "json", plugins: [parserBabel] })).trim();
 }
 
@@ -46,15 +47,16 @@ async function formatJsSegment(formatter: (text: string) => Promise<string>, scr
 async function getJsSegmentFormatter() {
 const formatter = await getJavascriptFormatter();
 return async (segment: string) => {
- return "{{" + formatJsSegment(formatter, segment.slice(2, -2)) + "}}";
+ return "{{" + await formatJsSegment(formatter, segment.slice(2, -2)) + "}}";
 };
 }
 
 export async function formatStringWithJsSnippets(text: string): Promise<string> {
 const jsSegmentFormatter = await getJsSegmentFormatter();
- return getDynamicStringSegments(text)
- .map((s) => (isDynamicSegment(s) ? jsSegmentFormatter(s) : s))
- .join("");
+ const formatedSegments = await Promise.all(
+ getDynamicStringSegments(text).map((s) => (isDynamicSegment(s) ? jsSegmentFormatter(s) : s))
+ );
+ return formatedSegments.join("");
 }
 
 export async function formatSqlWithJsSnippets(text: string) {
diff --git a/client/packages/lowcoder/src/comps/comps/avatar.tsx b/client/packages/lowcoder/src/comps/comps/avatar.tsx
index fc7f6f4332..a1da4984a7 100644
--- a/client/packages/lowcoder/src/comps/comps/avatar.tsx
+++ b/client/packages/lowcoder/src/comps/comps/avatar.tsx
@@ -41,12 +41,12 @@ const AvatarWrapper = styled(Avatar) <avatarprops & { $cursorPointer?: boolean, cursor: ${(props) => props.$cursorPointer ? 'pointer' : ''};
 `;
 
-const Wrapper = styled.div <{ iconSize: number, labelPosition: string,$style: AvatarContainerStyleType}>`
+const Wrapper = styled.div <{ $iconSize: number, $labelPosition: string,$style: AvatarContainerStyleType}>`
 display: flex;
 width: 100%;
 height: 100%;
 align-items: center;
-flex-direction: ${(props) => props.labelPosition === 'left' ? 'row' : 'row-reverse'};
+flex-direction: ${(props) => props.$labelPosition === 'left' ? 'row' : 'row-reverse'};
 ${(props) => {
 return (
 props.$style && {
@@ -57,14 +57,14 @@ ${(props) => {
 }}
 `
 
-const LabelWrapper = styled.div<{ iconSize: number, alignmentPosition: string }>`
-width: calc(100% - ${(props) => props.iconSize}px);
+const LabelWrapper = styled.div<{ $iconSize: number, $alignmentPosition: string }>`
+width: calc(100% - ${(props) => props.$iconSize}px);
 display: flex;
 padding-left: 5px;
 padding-right: 5px;
 flex-direction: column;
 justify-content: flex-end;
-align-items: ${(props) => props.alignmentPosition === 'left' ? 'flex-start' : 'flex-end'};
+align-items: ${(props) => props.$alignmentPosition === 'left' ? 'flex-start' : 'flex-end'};
 `
 const LabelSpan = styled.span<{ $style:AvatarLabelStyleType }>`
 max-width: 100%;
@@ -166,7 +166,7 @@ const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
 disabled={!props.enableDropdownMenu}
 dropdownRender={() => menu}
>
- <wrapper iconSize={props.iconSize} labelPosition={props.labelPosition} $style={props.style}>
+ <wrapper $iconSize={props.iconSize} $labelPosition={props.labelPosition} $style={props.style}>
 <badge count={props.badgeCount.value} dot={props.badgeType === 'dot'} @@ -187,7 +187,7 @@ const AvatarView = (props: RecordConstructorToView<typeof childrenMap>) => {
 {title.value}
 </avatarwrapper>
 </badge>
- <labelwrapper iconSize={props.iconSize} alignmentPosition={props.alignmentPosition}>
+ <labelwrapper $iconSize={props.iconSize} $alignmentPosition={props.alignmentPosition}>
 <labelspan $style={props.labelStyle}>{props.avatarLabel.value}</labelspan>
 <captionspan $style={props.captionStyle}>{props.avatarCatption.value}</captionspan>
 </labelwrapper>
diff --git a/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx b/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx
index cba007ee11..4cc2567c64 100644
--- a/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx
+++ b/client/packages/lowcoder/src/comps/comps/avatarGroup.tsx
@@ -111,11 +111,11 @@ const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & {
 alignment={props.alignment}
>
 {
- <avatar.group maxCount={props.maxCount} size={props.avatarSize}>
+ <avatar.group max={{ count: props.maxCount }} size={props.avatarSize}>
 {
 props.avatars.map((item, index) => {
 return (
- <tooltip title={item.Tooltip}>
+ <tooltip title={item.Tooltip} key={index}>
 <avatar src="{item.src" ?? undefined} icon={(item.AvatarIcon as ReactElement)?.props.value === '' &#124;&#124; item.label.trim() !== '' ? undefined : item.AvatarIcon} diff --git a/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx b/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx index ff00f7fc72..f89964b938 100644 --- a/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx +++ b/client/packages/lowcoder/src/comps/comps/containerComp/containerView.tsx @@ -439,9 +439,9 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
 isRowCountLocked,
 onPositionParamsChange,
 onRowCountChange,
- positionParams,
+ JSON.stringify(positionParams),
+ JSON.stringify(props.containerPadding),
 props.dispatch,
- props.containerPadding,
 ]
 );
 const setSelectedNames = useCallback(
@@ -454,6 +454,8 @@ export const InnerGrid = React.memo((props: ViewPropsWithSelect) => {
 const { width, ref } = useResizeDetector({
 onResize,
 handleHeight: isRowCountLocked,
+ refreshMode: 'debounce',
+ refreshRate: 100,
 });
 
 const itemViewRef = useRef<girditemviewrecord>({});
diff --git a/client/packages/lowcoder/src/comps/comps/gridItemComp.tsx b/client/packages/lowcoder/src/comps/comps/gridItemComp.tsx
index 7ef5440cc4..2b4d17ad6a 100644
--- a/client/packages/lowcoder/src/comps/comps/gridItemComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/gridItemComp.tsx
@@ -55,6 +55,7 @@ const TmpComp = withTypeAndChildren< undefined, undefined, manifest.withoutLoading, + manifest.layoutInfo?.h, ) } const comp = manifest.withoutLoading ? manifest.comp : withIsLoading(manifest.comp!); diff --git a/client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx b/client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx index 7a45714b37..0b2ac21f68 100644 --- a/client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/lazyLoadComp/lazyLoadComp.tsx @@ -49,6 +49,7 @@ interface LazyCompViewProps { loadComp: () => Promise<void>;
 loadingElement?: () => React.ReactNode;
 errorElement?: (error: any) => React.ReactNode;
+ height?: number,
 }
 
 const LazyCompView = React.memo((props: React.PropsWithChildren<lazycompviewprops>) => {
@@ -82,7 +83,7 @@ const LazyCompView = React.memo((props: React.PropsWithChildren<lazycompviewprop } return ( - <whiteloading />
+ <whiteloading comp />
 );
 });
 
@@ -94,6 +95,7 @@ export function lazyLoadComp(
 loader?: LazyloadCompLoader,
 loadingElement?: () => React.ReactNode,
 withoutLoading?: boolean,
+ height?: number,
 ) {
 class LazyLoadComp extends simpleMultiComp({}) {
 compValue: any;
@@ -145,7 +147,12 @@ export function lazyLoadComp(
 // const key = `${remoteInfo?.packageName}-${remoteInfo?.packageVersion}-${remoteInfo?.compName}`;
 const key = `${compName}`;
 return (
- <lazycompview key={key} loadComp={() => this.load()} loadingElement={loadingElement} />
+ <lazycompview + key={key} + loadComp={() => this.load()}
+ loadingElement={loadingElement}
+ height={height}
+ />
 );
 }
 
diff --git a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
index fc8e47536f..d8c0e2864c 100644
--- a/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
+++ b/client/packages/lowcoder/src/comps/comps/responsiveLayout/responsiveLayout.tsx
@@ -136,7 +136,7 @@ type ColumnContainerProps = Omit<containerbaseprops, 'style'> & {
 style: ResponsiveLayoutColStyleType,
 }
 
-const ColumnContainer = (props: ColumnContainerProps) => {
+const ColumnContainer = React.memo((props: ColumnContainerProps) => {
 return (
 <innergrid {...props} @@ -145,7 +145,7 @@ const ColumnContainer = (props: ColumnContainerProps) => {
 style={props.style}
 />
 );
-};
+});
 
 const ResponsiveLayout = (props: ResponsiveLayoutProps) => {
 const screenInfo = useScreenInfo();
diff --git a/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx b/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx
index 85703fd118..64d0b6fae8 100644
--- a/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/tableComp/tableToolbarComp.tsx
@@ -686,8 +686,10 @@ function ToolbarPopover(props: {
 return (
 <popover open={visible} - overlayStyle={{ pointerEvents: "auto" }} - overlayInnerStyle={{ padding: '0' }} + styles={{ + root: { pointerEvents: "auto" }, + body: {padding: '0'} + }} content={ <div ref={popOverRef} diff --git a/client/packages/lowcoder/src/comps/comps/timerComp.tsx b/client/packages/lowcoder/src/comps/comps/timerComp.tsx index 907566e126..a749cb0687 100644 --- a/client/packages/lowcoder/src/comps/comps/timerComp.tsx +++ b/client/packages/lowcoder/src/comps/comps/timerComp.tsx @@ -1,7 +1,7 @@ -import { CompAction, RecordConstructorToView, changeChildAction } from "lowcoder-core"; +import { CompAction, RecordConstructorToComp, RecordConstructorToView, changeChildAction } from "lowcoder-core"; import { styleControl } from "comps/controls/styleControl"; import { AnimationStyle, AnimationStyleType, startButtonStyle, StartButtonStyleType, timerStyle, timerStyleType } from "comps/controls/styleControlConstants"; -import { UICompBuilder } from "comps/generators/uiCompBuilder"; +import { NewChildren, UICompBuilder } from "comps/generators/uiCompBuilder"; import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing"; import { Section, sectionNames } from "lowcoder-design"; import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils"; @@ -15,6 +15,7 @@ import { EditorContext } from "comps/editorState"; import { dropdownControl } from "../controls/dropdownControl"; import { stringExposingStateControl } from "comps/controls/codeStateControl"; import { BoolControl } from "comps/controls/boolControl"; +import React from "react"; const Container = styled.div<{ $style: timerStyleType &#124; undefined; @@ -113,7 +114,9 @@ const childrenMap = { hideButton: BoolControl, }; -const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & { dispatch: (action: CompAction) => void; }) => {
+type ChildrenType = NewChildren<recordconstructortocomp<typeof childrenMap>>;
+
+const TimerCompView = React.memo((props: RecordConstructorToView<typeof childrenMap> & { dispatch: (action: CompAction) => void; }) => {
 const [startTime, setStartTime] = useState(0)
 const [timerState, setTimerState] = useState('stoped')
 const [elapsedTime, setElapsedTime] = useState(0)
@@ -219,51 +222,57 @@ const AvatarGroupView = (props: RecordConstructorToView<typeof childrenMap> & {
 </buttonwarrper>
 </container>
 );
-};
+});
 
-let AvatarGroupBasicComp = (function () {
- return new UICompBuilder(childrenMap, (props, dispatch) => <avatargroupview {...props} dispatch={dispatch} />)
- .setPropertyViewFn((children) => (
- <strong>
- {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
- <strong>
- <section name={sectionNames.basic}>
- {children.timerType.propertyView({
- label: trans('timer.timerType')
- })}
- {children.defaultValue.propertyView({
- label: trans('timer.defaultValue')
- })}
- {children.hideButton.propertyView({
- label: trans('timer.hideButton')
- })}
- </section>
- <section name={sectionNames.interaction}>
- {children.onEvent.propertyView()}
- {hiddenPropertyView(children)}
- {showDataLoadingIndicatorsPropertyView(children)}
- </section>
- </strong>
- )}
-
- {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
- <strong>
- <section name={sectionNames.style}>
- {children.style.getPropertyView()}
- </section>
- <section name={sectionNames.animationStyle} hasTooltip={true}>
- {children.animationStyle.getPropertyView()}
- </section>
- <section name={sectionNames.startButtonStyle}>
- {children.startButtonStyle.getPropertyView()}
+const TimerCompPropertyView = React.memo((props: {
+ children: ChildrenType
+}) => {
+ return (
+ <strong>
+ {["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+ <strong>
+ <section name={sectionNames.basic}>
+ {props.children.timerType.propertyView({
+ label: trans('timer.timerType')
+ })}
+ {props.children.defaultValue.propertyView({
+ label: trans('timer.defaultValue')
+ })}
+ {props.children.hideButton.propertyView({
+ label: trans('timer.hideButton')
+ })}
 </section>
- <section name={sectionNames.resetButtonStyle}>
- {children.resetButtonStyle.getPropertyView()}
+ <section name={sectionNames.interaction}>
+ {props.children.onEvent.propertyView()}
+ {hiddenPropertyView(props.children)}
+ {showDataLoadingIndicatorsPropertyView(props.children)}
 </section>
- </strong>
- )}
- </strong>
- ))
+ </strong>
+ )}
+
+ {["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
+ <strong>
+ <section name={sectionNames.style}>
+ {props.children.style.getPropertyView()}
+ </section>
+ <section name={sectionNames.animationStyle} hasTooltip={true}>
+ {props.children.animationStyle.getPropertyView()}
+ </section>
+ <section name={sectionNames.startButtonStyle}>
+ {props.children.startButtonStyle.getPropertyView()}
+ </section>
+ <section name={sectionNames.resetButtonStyle}>
+ {props.children.resetButtonStyle.getPropertyView()}
+ </section>
+ </strong>
+ )}
+ </strong>
+ )
+});
+
+let TimerCompBasic = (function () {
+ return new UICompBuilder(childrenMap, (props, dispatch) => <timercompview {...props} dispatch={dispatch} />)
+ .setPropertyViewFn((children) => <timercomppropertyview children={children} />)
 .setExposeMethodConfigs([
 {
 method: {
@@ -294,7 +303,7 @@ let AvatarGroupBasicComp = (function () {
 .build();
 })();
 
-export const TimerComp = withExposingConfigs(AvatarGroupBasicComp, [
+export const TimerComp = withExposingConfigs(TimerCompBasic, [
 new NameConfig("defaultValue", trans("timer.defaultValue")),
 new NameConfig("elapsedTime", trans("timer.elapsedTime")),
 new NameConfig("timerState", trans("timer.timerState")),
diff --git a/client/packages/lowcoder/src/comps/comps/transferComp.tsx b/client/packages/lowcoder/src/comps/comps/transferComp.tsx
index 300020bd7b..56a20d064b 100644
--- a/client/packages/lowcoder/src/comps/comps/transferComp.tsx
+++ b/client/packages/lowcoder/src/comps/comps/transferComp.tsx
@@ -1,9 +1,9 @@
-import { CompAction, RecordConstructorToView, changeChildAction } from "lowcoder-core";
+import { CompAction, RecordConstructorToComp, RecordConstructorToView, changeChildAction } from "lowcoder-core";
 import { BoolControl } from "comps/controls/boolControl";
 import { arrayObjectExposingStateControl, arrayStringExposingStateControl } from "comps/controls/codeStateControl";
 import { styleControl } from "comps/controls/styleControl";
 import { TransferStyle, TransferStyleType, heightCalculator, widthCalculator } from "comps/controls/styleControlConstants";
-import { UICompBuilder } from "comps/generators/uiCompBuilder";
+import { NewChildren, UICompBuilder } from "comps/generators/uiCompBuilder";
 import { NameConfig, NameConfigHidden, withExposingConfigs } from "comps/generators/withExposing";
 import { Section, sectionNames } from "lowcoder-design";
 import { hiddenPropertyView, showDataLoadingIndicatorsPropertyView } from "comps/utils/propertyUtils";
@@ -17,6 +17,7 @@ import styled, { css } from "styled-components";
 import { useContext, useEffect, useRef, useState } from "react";
 import { valueComp, withDefault } from "../generators";
 import type { TransferDirection } from 'antd/es/transfer';
+import React from "react";
 
 const Container = styled.div<{ $style: TransferStyleType }>`
 height: 100%;
@@ -71,7 +72,9 @@ const childrenMap = {
 searchInfo: valueComp<string[]>(['', '']),
 };
 
-const TransferView = (props: RecordConstructorToView<typeof childrenMap> & {
+type ChildrenType = NewChildren<recordconstructortocomp<typeof childrenMap>>;
+
+const TransferView = React.memo((props: RecordConstructorToView<typeof childrenMap> & {
 dispatch: (action: CompAction) => void;
 }) => {
 const conRef = useRef<htmldivelement>(null);
@@ -136,48 +139,54 @@ const TransferView = (props: RecordConstructorToView<typeof childrenMap> & {
 </container>
 </reactresizedetector>
 );
-};
+});
+
+const TransferCompPropertyView = React.memo((props: {
+ children: ChildrenType
+}) => {
+ return (
+ <strong>
+ <section name={sectionNames.basic}>
+ {props.children.items.propertyView({
+ label: trans("transfer.items"),
+ })}
+ {props.children.targetKeys.propertyView({
+ label: trans("transfer.targetKeys"),
+ })}
+ {props.children.sourceTitle.propertyView({
+ label: trans("transfer.sourceTitle"),
+ })}
+ {props.children.targetTitle.propertyView({
+ label: trans("transfer.targetTitle"),
+ })}
+ {props.children.showSearch.propertyView({
+ label: trans("transfer.allowSearch"),
+ })}
+ {props.children.oneWay.propertyView({
+ label: trans("transfer.oneWay"),
+ })}
+ {props.children.pagination.propertyView({
+ label: trans("transfer.pagination"),
+ })}
+ {props.children.pagination.getView() && props.children.pageSize.propertyView({
+ label: trans("transfer.pageSize"),
+ })}
+ </section>
+ <section name={sectionNames.interaction}>
+ {props.children.onEvent.propertyView()}
+ {hiddenPropertyView(props.children)}
+ {showDataLoadingIndicatorsPropertyView(props.children)}
+ </section>
+ <section name={sectionNames.style}>{props.children.style.getPropertyView()}</section>
+ </strong>
+ )
+});
 
 let TransferBasicComp = (function () {
 return new UICompBuilder(childrenMap, (props, dispatch) => {
 return (
 <div class="naked_tr">)})
- .setPropertyViewFn((children) => (
- <strong>
- <section name={sectionNames.basic}>
- {children.items.propertyView({
- label: trans("transfer.items"),
- })}
- {children.targetKeys.propertyView({
- label: trans("transfer.targetKeys"),
- })}
- {children.sourceTitle.propertyView({
- label: trans("transfer.sourceTitle"),
- })}
- {children.targetTitle.propertyView({
- label: trans("transfer.targetTitle"),
- })}
- {children.showSearch.propertyView({
- label: trans("transfer.allowSearch"),
- })}
- {children.oneWay.propertyView({
- label: trans("transfer.oneWay"),
- })}
- {children.pagination.propertyView({
- label: trans("transfer.pagination"),
- })}
- {children.pagination.getView() && children.pageSize.propertyView({
- label: trans("transfer.pageSize"),
- })}
- </section>
- <section name={sectionNames.interaction}>
- {children.onEvent.propertyView()}
- {hiddenPropertyView(children)}
- {showDataLoadingIndicatorsPropertyView(children)}
- </section>
- <section name={sectionNames.style}>{children.style.getPropertyView()}</section>
- </strong>
- ))
+ .setPropertyViewFn((children) => <div class="naked_tr">)
 .build();
 })();
 
diff --git a/client/packages/lowcoder/src/comps/generators/hookToComp.tsx b/client/packages/lowcoder/src/comps/generators/hookToComp.tsx
index 40e92bf4b3..68dce72cdb 100644
--- a/client/packages/lowcoder/src/comps/generators/hookToComp.tsx
+++ b/client/packages/lowcoder/src/comps/generators/hookToComp.tsx
@@ -36,9 +36,11 @@ export function hookToStateComp(useHookFn: () => JSONObject) {
 const hookValue = useHookFn();
 const stateValue = useMemo(() => comp.children.stateValue.getView(), [comp.children.stateValue]);
 
- if (!isEqual(hookValue, stateValue)) {
- comp.children.stateValue.dispatchChangeValueAction(hookValue);
- }
+ useEffect(() => {
+ if (!isEqual(hookValue, stateValue)) {
+ comp.children.stateValue.dispatchChangeValueAction(hookValue);
+ }
+ }, [hookValue, stateValue]);
 return null;
 }
 );
diff --git a/client/packages/lowcoder/src/comps/hooks/screenInfoComp.tsx b/client/packages/lowcoder/src/comps/hooks/screenInfoComp.tsx
index 61652fb0ff..0d4fb1df06 100644
--- a/client/packages/lowcoder/src/comps/hooks/screenInfoComp.tsx
+++ b/client/packages/lowcoder/src/comps/hooks/screenInfoComp.tsx
@@ -22,7 +22,9 @@ type ScreenInfo = {
 export function useScreenInfo() {
 const canvasContainer = document.getElementById(CanvasContainerID);
 const canvas = document.getElementsByClassName('lowcoder-app-canvas')?.[0];
- const canvasWidth = canvasContainer?.clientWidth &#124;&#124; canvas?.clientWidth;
+ const canvasWidth = useMemo(() => {
+ return canvasContainer?.clientWidth &#124;&#124; canvas?.clientWidth;
+ }, [canvasContainer?.clientWidth, canvas?.clientWidth]);
 
 const getDeviceType = (width: number) => {
 if (width < 768) return ScreenTypes.Mobile; @@ -71,7 +73,9 @@ export function useScreenInfo() { }, [ updateScreenInfo ]) useEffect(() => {
- updateScreenInfo();
+ if (canvasWidth) {
+ updateScreenInfo();
+ }
 }, [canvasWidth]);
 
 return screenInfo;
diff --git a/client/packages/lowcoder/src/comps/hooks/themeComp.tsx b/client/packages/lowcoder/src/comps/hooks/themeComp.tsx
index 7fdff5ed05..8e11723fa8 100644
--- a/client/packages/lowcoder/src/comps/hooks/themeComp.tsx
+++ b/client/packages/lowcoder/src/comps/hooks/themeComp.tsx
@@ -64,12 +64,15 @@ let ThemeTempComp = withViewFn(
 return stateValue;
 }, [themeList, currentTheme, stateValue])
 
- if (!isEqual(themeValue, stateValue)) {
- comp.children.stateValue.dispatchChangeValueAction({
- ...exposingTheme(currentTheme),
- allThemes: themeList.map((t) => exposingTheme(t)),
- })
- }
+ useEffect(() => {
+ if (!isEqual(themeValue, stateValue)) {
+ comp.children.stateValue.dispatchChangeValueAction({
+ ...exposingTheme(currentTheme),
+ allThemes: themeList.map((t) => exposingTheme(t)),
+ })
+ }
+ }, [themeValue, stateValue]);
+
 return null;
 }
 );
diff --git a/client/packages/lowcoder/src/comps/index.tsx b/client/packages/lowcoder/src/comps/index.tsx
index 4acecfd144..f00ebaa5a1 100644
--- a/client/packages/lowcoder/src/comps/index.tsx
+++ b/client/packages/lowcoder/src/comps/index.tsx
@@ -128,6 +128,67 @@ import { TextComp } from "./comps/textComp";
 import { SelectComp } from "./comps/selectInputComp/selectComp";
 import { InputComp } from "./comps/textInputComp/inputComp";
 import { TextAreaComp } from "./comps/textInputComp/textAreaComp";
+import { AutoCompleteComp } from "./comps/autoCompleteComp/autoCompleteComp";
+import { AvatarComp } from "./comps/avatar";
+import { AvatarGroupComp } from "./comps/avatarGroup";
+import { DropdownComp } from "./comps/buttonComp/dropdownComp";
+import { FloatButtonComp } from "./comps/buttonComp/floatButtonComp";
+import { LinkComp } from "./comps/buttonComp/linkComp";
+import { ScannerComp } from "./comps/buttonComp/scannerComp";
+import { ToggleButtonComp } from "./comps/buttonComp/toggleButtonComp";
+import { CarouselComp } from "./comps/carouselComp";
+import { CommentComp } from "./comps/commentComp/commentComp";
+import { CardComp } from "./comps/containerComp/cardComp";
+import { CustomComp } from "./comps/customComp/customComp";
+import { DatePickerComp, DateRangeComp } from "./comps/dateComp/dateComp";
+import { TimePickerComp, TimeRangeComp } from "./comps/dateComp/timeComp";
+import { DividerComp } from "./comps/dividerComp";
+import { FileComp } from "./comps/fileComp/fileComp";
+import { FileViewerComp } from "./comps/fileViewerComp";
+import { FormComp } from "./comps/formComp/formComp";
+import { IconComp } from "./comps/iconComp";
+import { IFrameComp } from "./comps/iframeComp";
+import { ImageComp } from "./comps/imageComp";
+import { JsonEditorComp } from "./comps/jsonComp/jsonEditorComp";
+import { JsonExplorerComp } from "./comps/jsonComp/jsonExplorerComp";
+import { JsonLottieComp } from "./comps/jsonComp/jsonLottieComp";
+import { JsonSchemaFormComp } from "./comps/jsonSchemaFormComp/jsonSchemaFormComp";
+import { ListViewComp, GridComp } from "./comps/listViewComp";
+import { AudioComp } from "./comps/mediaComp/audioComp";
+import { ColorPickerComp } from "./comps/mediaComp/colorPickerComp";
+import { VideoComp } from "./comps/mediaComp/videoComp";
+import { ControlButton } from "./comps/meetingComp/controlButton";
+import { NavComp } from "./comps/navComp/navComp";
+import { NumberInputComp } from "./comps/numberInputComp/numberInputComp";
+import { RangeSliderComp } from "./comps/numberInputComp/rangeSliderComp";
+import { SliderComp } from "./comps/numberInputComp/sliderComp";
+import { PageLayoutComp } from "./comps/containerComp/pageLayoutComp";
+import { ProgressCircleComp } from "./comps/progressCircleComp";
+import { ProgressComp } from "./comps/progressComp";
+import { QRCodeComp } from "./comps/qrCodeComp";
+import { RatingComp } from "./comps/ratingComp";
+import { ResponsiveLayoutComp } from "./comps/responsiveLayout";
+import { RichTextEditorComp } from "./comps/richTextEditorComp";
+import { CascaderWithDefault } from "./comps/selectInputComp/cascaderComp";
+import { CheckboxComp } from "./comps/selectInputComp/checkboxComp";
+import { MultiSelectComp } from "./comps/selectInputComp/multiSelectComp";
+import { RadioComp } from "./comps/selectInputComp/radioComp";
+import { SegmentedControlComp } from "./comps/selectInputComp/segmentedControl";
+import { StepComp } from "./comps/selectInputComp/stepControl";
+import { ShapeComp } from "./comps/shapeComp/shapeComp";
+import { SignatureComp } from "./comps/signatureComp";
+import { SplitLayoutComp } from "./comps/splitLayout";
+import { SwitchComp } from "./comps/switchComp";
+import { MentionComp } from "./comps/textInputComp/mentionComp";
+import { PasswordComp } from "./comps/textInputComp/passwordComp";
+import { TimeLineComp } from "./comps/timelineComp/timelineComp";
+import { TimerComp } from "./comps/timerComp";
+import { TourComp } from "./comps/tourComp/tourComp";
+import { transferComp } from "./comps/transferComp";
+import { TreeComp } from "./comps/treeComp/treeComp";
+import { TreeSelectComp } from "./comps/treeComp/treeSelectComp";
+import { DrawerComp } from "./hooks/drawerComp";
+import { ModalComp } from "./hooks/modalComp";
 
 type Registry = {
 [key in UICompType]?: UICompManifest;
@@ -407,9 +468,7 @@ export var uiCompMap: Registry = {
 categories: ["dashboards"],
 icon: TimeLineCompIcon,
 keywords: trans("uiComp.timelineCompKeywords"),
- lazyLoad: true,
- compName: "TimeLineComp",
- compPath: "comps/timelineComp/timelineComp",
+ comp: TimeLineComp,
 layoutInfo: {
 w: 12,
 h: 40,
@@ -425,9 +484,7 @@ export var uiCompMap: Registry = {
 categories: ["layout"],
 icon: ResponsiveLayoutCompIcon,
 keywords: trans("uiComp.responsiveLayoutCompKeywords"),
- lazyLoad: true,
- compName: "ResponsiveLayoutComp",
- compPath: "comps/responsiveLayout/index",
+ comp: ResponsiveLayoutComp,
 withoutLoading: true,
 layoutInfo: {
 w: 24,
@@ -442,9 +499,7 @@ export var uiCompMap: Registry = {
 categories: ["layout"],
 icon: PageLayoutCompIcon,
 keywords: trans("uiComp.pageLayoutCompKeywords"),
- lazyLoad: true,
- compName: "PageLayoutComp",
- compPath: "comps/containerComp/pageLayoutComp",
+ comp: PageLayoutComp,
 withoutLoading: true,
 layoutInfo: {
 w: 12,
@@ -477,9 +532,7 @@ export var uiCompMap: Registry = {
 categories: ["layout"],
 icon: SplitLayoutCompIcon,
 keywords: trans("uiComp.splitLayoutCompKeywords"),
- lazyLoad: true,
- compName: "SplitLayoutComp",
- compPath: "comps/splitLayout/index",
+ comp: SplitLayoutComp,
 withoutLoading: true,
 layoutInfo: {
 w: 24,
@@ -494,9 +547,7 @@ export var uiCompMap: Registry = {
 categories: ["layout"],
 icon: FloatingTextCompIcon,
 keywords: trans("uiComp.floatTextContainerCompKeywords"),
- lazyLoad: true,
- compName: "ContainerComp",
- compPath: "comps/containerComp/textContainerComp",
+ comp: ContainerComp,
 withoutLoading: true,
 layoutInfo: {
 w: 12,
@@ -514,9 +565,7 @@ export var uiCompMap: Registry = {
 description: trans("uiComp.cardCompDesc"),
 categories: ["layout"],
 keywords: trans("uiComp.cardCompKeywords"),
- lazyLoad: true,
- compName: "CardComp",
- compPath: "comps/containerComp/cardComp",
+ comp: CardComp,
 layoutInfo: {
 h: 44,
 w: 6,
@@ -545,9 +594,7 @@ export var uiCompMap: Registry = {
 categories: ["layout"],
 icon: CollapsibleContainerCompIcon,
 keywords: trans("uiComp.collapsibleContainerCompKeywords"),
- lazyLoad: true,
- compName: "ContainerComp",
- compPath: "comps/containerComp/containerComp",
+ comp: ContainerComp,
 withoutLoading: true,
 layoutInfo: {
 w: 12,
@@ -582,9 +629,7 @@ export var uiCompMap: Registry = {
 description: trans("uiComp.listViewCompDesc"),
 categories: ["layout"],
 keywords: trans("uiComp.listViewCompKeywords"),
- lazyLoad: true,
- compName: "ListViewComp",
- compPath: "comps/listViewComp/index",
+ comp: ListViewComp,
 layoutInfo: {
 w: 12,
 h: 40,
@@ -600,9 +645,7 @@ export var uiCompMap: Registry = {
 description: trans("uiComp.gridCompDesc"),
 categories: ["layout"],
 keywords: trans("uiComp.gridCompKeywords"),
- lazyLoad: true,
- compName: "GridComp",
- compPath: "comps/listViewComp/index",
+ comp: GridComp,
 layoutInfo: {
 w: 12,
 h: 40,
@@ -618,9 +661,7 @@ export var uiCompMap: Registry = {
 description: trans("uiComp.modalCompDesc"),
 categories: ["layout"],
 keywords: trans("uiComp.modalCompKeywords"),
- lazyLoad: true,
- compName: "ModalComp",
- compPath: "hooks/modalComp",
+ comp: ModalComp,
 withoutLoading: true,
 },
 drawer: {
@@ -630,9 +671,7 @@ export var uiCompMap: Registry = {
 categories: ["layout"],
 icon: DrawerCompIcon,
 keywords: trans("uiComp.drawerCompKeywords"),
- lazyLoad: true,
- compName: "DrawerComp",
- compPath: "hooks/drawerComp",
+ comp: DrawerComp,
 withoutLoading: true,
 },
 divider: {
@@ -642,9 +681,7 @@ export var uiCompMap: Registry = {
 categories: ["layout"],
 icon: DividerCompIcon,
 keywords: trans("uiComp.dividerCompKeywords"),
- lazyLoad: true,
- compName: "DividerComp",
- compPath: "comps/dividerComp",
+ comp: DividerComp,
 layoutInfo: {
 w: 12,
 h: 1,
@@ -657,9 +694,7 @@ export var uiCompMap: Registry = {
 icon: NavComIcon,
 categories: ["layout"],
 keywords: trans("uiComp.navigationCompKeywords"),
- lazyLoad: true,
- compName: "NavComp",
- compPath: "comps/navComp/navComp",
+ comp: NavComp,
 layoutInfo: {
 w: 24,
 h: 5,
@@ -672,9 +707,7 @@ export var uiCompMap: Registry = {
 categories: ["layout"],
 icon: StepCompIcon,
 keywords: trans("uiComp.stepControlCompKeywords"),
- lazyLoad: true,
- compName: "StepComp",
- compPath: "comps/selectInputComp/stepControl",
+ comp: StepComp,
 layoutInfo: {
 w: 19,
 h: 6,
@@ -687,9 +720,7 @@ export var uiCompMap: Registry = {
 categories: ["layout"],
 icon: CascaderCompIcon,
 keywords: trans("uiComp.cascaderCompKeywords"),
- lazyLoad: true,
- compName: "CascaderWithDefault",
- compPath: "comps/selectInputComp/cascaderComp",
+ comp: CascaderWithDefault,
 layoutInfo: {
 w: 9,
 h: 5,
@@ -702,9 +733,7 @@ export var uiCompMap: Registry = {
 categories: ["layout"],
 icon: LinkCompIcon,
 keywords: trans("uiComp.linkCompKeywords"),
- lazyLoad: true,
- compName: "LinkComp",
- compPath: "comps/buttonComp/linkComp",
+ comp: LinkComp,
 layoutInfo: {
 w: 6,
 h: 5,
@@ -717,9 +746,7 @@ export var uiCompMap: Registry = {
 categories: ["layout"],
 icon: FloatingButtonCompIcon,
 keywords: trans("uiComp.floatButtonCompKeywords"),
- lazyLoad: true,
- compName: "FloatButtonComp",
- compPath: "comps/buttonComp/floatButtonComp",
+ comp: FloatButtonComp,
 layoutInfo: {
 w: 1,
 h: 1,
@@ -749,9 +776,7 @@ export var uiCompMap: Registry = {
 description: trans("uiComp.timerCompDesc"),
 categories: ["scheduling", "projectmanagement"],
 keywords: trans("uiComp.timerCompKeywords"),
- lazyLoad: true,
- compName: "TimerComp",
- compPath: "comps/timerComp",
+ comp: TimerComp,
 layoutInfo: {
 h: 14,
 w: 6,
@@ -807,9 +832,7 @@ export var uiCompMap: Registry = {
 categories: ["collaboration"],
 icon: AvatarCompIcon,
 keywords: trans("uiComp.avatarCompKeywords"),
- lazyLoad: true,
- compName: "AvatarComp",
- compPath: "comps/avatar",
+ comp: AvatarComp,
 layoutInfo: {
 w: 6,
 h: 6,
@@ -823,9 +846,7 @@ export var uiCompMap: Registry = {
 description: trans("uiComp.avatarGroupCompDesc"),
 categories: ["collaboration"],
 keywords: trans("uiComp.avatarGroupCompKeywords"),
- lazyLoad: true,
- compName: "AvatarGroupComp",
- compPath: "comps/avatarGroup",
+ comp: AvatarGroupComp,
 withoutLoading: true,
 layoutInfo: {
 w: 6,
@@ -840,9 +861,7 @@ export var uiCompMap: Registry = {
 categories: ["collaboration"],
 icon: CommentCompIcon,
 keywords: trans("uiComp.commentCompKeywords"),
- lazyLoad: true,
- compName: "CommentComp",
- compPath: "comps/commentComp/commentComp",
+ comp: CommentComp,
 layoutInfo: {
 w: 12,
 h: 55,
@@ -855,9 +874,7 @@ export var uiCompMap: Registry = {
 categories: ["collaboration"],
 icon: MentionCompIcon,
 keywords: trans("uiComp.mentionCompKeywords"),
- lazyLoad: true,
- compName: "MentionComp",
- compPath: "comps/textInputComp/mentionComp",
+ comp: MentionComp,
 },
 
 // Forms
@@ -869,9 +886,7 @@ export var uiCompMap: Registry = {
 categories: ["forms"],
 icon: FormCompIcon,
 keywords: trans("uiComp.formCompKeywords"),
- lazyLoad: true,
- compName: "FormComp",
- compPath: "comps/formComp/formComp",
+ comp: FormComp,
 withoutLoading: true,
 layoutInfo: {
 w: 12,
@@ -889,9 +904,7 @@ export var uiCompMap: Registry = {
 categories: ["forms"],
 icon: JsonFormCompIcon,
 keywords: trans("uiComp.jsonSchemaFormCompKeywords"),
- lazyLoad: true,
- compName: "JsonSchemaFormComp",
- compPath: "comps/jsonSchemaFormComp/jsonSchemaFormComp",
+ comp: JsonSchemaFormComp,
 layoutInfo: {
 w: 12,
 h: 50,
@@ -904,9 +917,7 @@ export var uiCompMap: Registry = {
 categories: ["forms"],
 icon: JsonEditorCompIcon,
 keywords: trans("uiComp.jsonEditorCompKeywords"),
- lazyLoad: true,
- compName: "JsonEditorComp",
- compPath: "comps/jsonComp/jsonEditorComp",
+ comp: JsonEditorComp,
 layoutInfo: {
 w: 12,
 h: 50,
@@ -919,9 +930,7 @@ export var uiCompMap: Registry = {
 categories: ["forms"],
 icon: JsonExplorerCompIcon,
 keywords: trans("uiComp.jsonExplorerCompKeywords"),
- lazyLoad: true,
- compName: "JsonExplorerComp",
- compPath: "comps/jsonComp/jsonExplorerComp",
+ comp: JsonExplorerComp,
 layoutInfo: {
 w: 12,
 h: 50,
@@ -934,9 +943,7 @@ export var uiCompMap: Registry = {
 description: trans("uiComp.richTextEditorCompDesc"),
 icon: RichTextEditorCompIcon,
 keywords: trans("uiComp.richTextEditorCompKeywords"),
- lazyLoad: true,
- compName: "RichTextEditorComp",
- compPath: "comps/richTextEditorComp",
+ comp: RichTextEditorComp,
 layoutInfo: {
 w: 12,
 h: 50,
@@ -962,9 +969,7 @@ export var uiCompMap: Registry = {
 categories: ["forms"],
 icon: PasswordCompIcon,
 keywords: trans("uiComp.passwordCompKeywords"),
- lazyLoad: true,
- compName: "PasswordComp",
- compPath: "comps/textInputComp/passwordComp",
+ comp: PasswordComp,
 layoutInfo: {
 w: 6,
 h: 6,
@@ -977,9 +982,7 @@ export var uiCompMap: Registry = {
 categories: ["forms"],
 icon: NumberInputCompIcon,
 keywords: trans("uiComp.numberInputCompKeywords"),
- lazyLoad: true,
- compName: "NumberInputComp",
- compPath: "comps/numberInputComp/numberInputComp",
+ comp: NumberInputComp,
 layoutInfo: {
 w: 6,
 h: 6,
@@ -1007,9 +1010,10 @@ export var uiCompMap: Registry = {
 keywords: cnchar
 .spell(trans("uiComp.autoCompleteCompName"), "first", "low")
 .toString(),
- lazyLoad: true,
- compName: "AutoCompleteComp",
- compPath: "comps/autoCompleteComp/autoCompleteComp",
+ comp: AutoCompleteComp,
+ // lazyLoad: true,
+ // compName: "AutoCompleteComp",
+ // compPath: "comps/autoCompleteComp/autoCompleteComp",
 layoutInfo: {
 w: 6,
 h: 5,
@@ -1022,9 +1026,7 @@ export var uiCompMap: Registry = {
 categories: ["forms"],
 icon: SwitchCompIcon,
 keywords: trans("uiComp.switchCompKeywords"),
- lazyLoad: true,
- compName: "SwitchComp",
- compPath: "comps/switchComp",
+ comp: SwitchComp,
 layoutInfo: {
 w: 6,
 h: 6,
@@ -1037,9 +1039,7 @@ export var uiCompMap: Registry = {
 categories: ["forms"],
 icon: CheckboxCompIcon,
 keywords: trans("uiComp.checkboxCompKeywords"),
- lazyLoad: true,
- compName: "CheckboxComp",
- compPath: "comps/selectInputComp/checkboxComp",
+ comp: CheckboxComp,
 layoutInfo: {
 w: 6,
 h: 6,
@@ -1052,9 +1052,7 @@ export var uiCompMap: Registry = {
 categories: ["forms"],
 icon: RadioCompIcon,
 keywords: trans("uiComp.radioCompKeywords"),
- lazyLoad: true,
- compName: "RadioComp",
- compPath: "comps/selectInputComp/radioComp",
+ comp: RadioComp,
 layoutInfo: {
 w: 6,
 h: 6,
@@ -1067,9 +1065,7 @@ export var uiCompMap: Registry = {
 categories: ["forms", "scheduling"],
 icon: DateCompIcon,
 keywords: trans("uiComp.dateCompKeywords"),
- lazyLoad: true,
- compName: "DatePickerComp",
- compPath: "comps/dateComp/dateComp",
+ comp: DatePickerComp,
 layoutInfo: {
 w: 6,
 h: 6,
@@ -1082,9 +1078,7 @@ export var uiCompMap: Registry = {
 categories: ["forms", "scheduling"],
 icon: DateRangeCompIcon,
 keywords: trans("uiComp.dateRangeCompKeywords"),
- lazyLoad: true,
- compName: "DateRangeComp",
- compPath: "comps/dateComp/dateComp",
+ comp: DateRangeComp,
 layoutInfo: {
 w: 12,
 h: 6,
@@ -1097,9 +1091,7 @@ export var uiCompMap: Registry = {
 categories: ["forms", "scheduling"],
 icon: TimeCompIcon,
 keywords: trans("uiComp.timeCompKeywords"),
- lazyLoad: true,
- compName: "TimePickerComp",
- compPath: "comps/dateComp/timeComp",
+ comp: TimePickerComp,
 layoutInfo: {
 w: 6,
 h: 6,
@@ -1112,9 +1104,7 @@ export var uiCompMap: Registry = {
 description: trans("uiComp.timeRangeCompDesc"),
 icon: TimeRangeCompIcon,
 keywords: trans("uiComp.timeRangeCompKeywords"),
- lazyLoad: true,
- compName: "TimeRangeComp",
- compPath: "comps/dateComp/timeComp",
+ comp: TimeRangeComp,
 layoutInfo: {
 w: 12,
 h: 6,
@@ -1128,9 +1118,7 @@ export var uiCompMap: Registry = {
 categories: ["forms"],
 icon: SliderCompIcon,
 keywords: trans("uiComp.sliderCompKeywords"),
- lazyLoad: true,
- compName: "SliderComp",
- compPath: "comps/numberInputComp/sliderComp",
+ comp: SliderComp,
 layoutInfo: {
 w: 6,
 h: 5,
@@ -1143,9 +1131,7 @@ export var uiCompMap: Registry = {
 categories: ["forms"],
 icon: RangeSliderCompIcon,
 keywords: trans("uiComp.rangeSliderCompKeywords"),
- lazyLoad: true,
- compName: "RangeSliderComp",
- compPath: "comps/numberInputComp/rangeSliderComp",
+ comp: RangeSliderComp,
 layoutInfo: {
 w: 6,
 h: 5,
@@ -1173,9 +1159,7 @@ export var uiCompMap: Registry = {
 categories: ["forms", "collaboration"],
 icon: IconButtonCompIcon,
 keywords: trans("uiComp.meetingCompKeywords"),
- lazyLoad: true,
- compName: "ControlButton",
- compPath: "comps/meetingComp/controlButton",
+ comp: ControlButton,
 withoutLoading: true,
 layoutInfo: {
 w: 3,
@@ -1189,9 +1173,7 @@ export var uiCompMap: Registry = {
 categories: ["forms"],
 icon: DropdownCompIcon,
 keywords: trans("uiComp.dropdownCompKeywords"),
- lazyLoad: true,
- compName: "DropdownComp",
- compPath: "comps/buttonComp/dropdownComp",
+ comp: DropdownComp,
 layoutInfo: {
 w: 6,
 h: 6,
@@ -1204,9 +1186,7 @@ export var uiCompMap: Registry = {
 categories: ["forms"],
 icon: ToggleButtonCompIcon,
 keywords: trans("uiComp.toggleButtonCompKeywords"),
- lazyLoad: true,
- compName: "ToggleButtonComp",
- compPath: "comps/buttonComp/toggleButtonComp",
+ comp: ToggleButtonComp,
 layoutInfo: {
 w: 3,
 h: 6,
@@ -1219,9 +1199,7 @@ export var uiCompMap: Registry = {
 categories: ["forms"],
 icon: SegmentedCompIcon,
 keywords: trans("uiComp.segmentedControlCompKeywords"),
- lazyLoad: true,
- compName: "SegmentedControlComp",
- compPath: "comps/selectInputComp/segmentedControl",
+ comp: SegmentedControlComp,
 layoutInfo: {
 w: 6,
 h: 6,
@@ -1235,9 +1213,7 @@ export var uiCompMap: Registry = {
 categories: ["forms"],
 icon: RatingCompIcon,
 keywords: trans("uiComp.ratingCompKeywords"),
- lazyLoad: true,
- compName: "RatingComp",
- compPath: "comps/ratingComp",
+ comp: RatingComp,
 layoutInfo: {
 w: 6,
 h: 6,
@@ -1331,9 +1307,7 @@ export var uiCompMap: Registry = {
 categories: ["dashboards", "projectmanagement"],
 icon: ProgressCompIcon,
 keywords: trans("uiComp.progressCompKeywords"),
- lazyLoad: true,
- compName: "ProgressComp",
- compPath: "comps/progressComp",
+ comp: ProgressComp,
 layoutInfo: {
 w: 6,
 h: 5,
@@ -1346,9 +1320,7 @@ export var uiCompMap: Registry = {
 categories: ["dashboards", "projectmanagement"],
 icon: ProcessCircleCompIcon,
 keywords: trans("uiComp.progressCircleCompKeywords"),
- lazyLoad: true,
- compName: "ProgressCircleComp",
- compPath: "comps/progressCircleComp",
+ comp: ProgressCircleComp,
 layoutInfo: {
 w: 6,
 h: 20,
@@ -1364,9 +1336,7 @@ export var uiCompMap: Registry = {
 categories: ["documents"],
 icon: UploadCompIcon,
 keywords: trans("uiComp.fileUploadCompKeywords"),
- lazyLoad: true,
- compName: "FileComp",
- compPath: "comps/fileComp/fileComp",
+ comp: FileComp,
 layoutInfo: {
 w: 6,
 h: 5,
@@ -1379,9 +1349,7 @@ export var uiCompMap: Registry = {
 categories: ["documents"],
 icon: FileViewerCompIcon,
 keywords: trans("uiComp.fileViewerCompKeywords"),
- lazyLoad: true,
- compName: "FileViewerComp",
- compPath: "comps/fileViewerComp",
+ comp: FileViewerComp,
 layoutInfo: {
 w: 12,
 h: 40,
@@ -1397,9 +1365,7 @@ export var uiCompMap: Registry = {
 categories: ["multimedia"],
 icon: ImageCompIcon,
 keywords: trans("uiComp.imageCompKeywords"),
- lazyLoad: true,
- compName: "ImageComp",
- compPath: "comps/imageComp",
+ comp: ImageComp,
 layoutInfo: {
 w: 12,
 h: 40,
@@ -1412,9 +1378,7 @@ export var uiCompMap: Registry = {
 categories: ["multimedia"],
 icon: CarouselCompIcon,
 keywords: trans("uiComp.drawerCompKeywords"),
- lazyLoad: true,
- compName: "CarouselComp",
- compPath: "comps/carouselComp",
+ comp: CarouselComp,
 withoutLoading: true,
 layoutInfo: {
 w: 12,
@@ -1428,9 +1392,7 @@ export var uiCompMap: Registry = {
 categories: ["multimedia"],
 icon: AudioCompIcon,
 keywords: trans("uiComp.audioCompKeywords"),
- lazyLoad: true,
- compName: "AudioComp",
- compPath: "comps/mediaComp/audioComp",
+ comp: AudioComp,
 layoutInfo: {
 w: 6,
 h: 5,
@@ -1443,9 +1405,7 @@ export var uiCompMap: Registry = {
 categories: ["multimedia"],
 icon: VideoCompIcon,
 keywords: trans("uiComp.videoCompKeywords"),
- lazyLoad: true,
- compName: "VideoComp",
- compPath: "comps/mediaComp/videoComp",
+ comp: VideoComp,
 layoutInfo: {
 w: 12,
 h: 40,
@@ -1459,9 +1419,7 @@ export var uiCompMap: Registry = {
 categories: ["multimedia", "dashboards"],
 icon: ShapesCompIcon,
 keywords: trans("uiComp.shapeCompKeywords"),
- lazyLoad: true,
- compName: "ShapeComp",
- compPath: "comps/shapeComp/shapeComp",
+ comp: ShapeComp,
 layoutInfo: {
 w: 12,
 h: 40,
@@ -1475,9 +1433,7 @@ export var uiCompMap: Registry = {
 categories: ["multimedia"],
 icon: LottieAnimationCompIcon,
 keywords: trans("uiComp.jsonLottieCompKeywords"),
- lazyLoad: true,
- compName: "JsonLottieComp",
- compPath: "comps/jsonComp/jsonLottieComp",
+ comp: JsonLottieComp,
 layoutInfo: {
 w: 12,
 h: 40,
@@ -1490,9 +1446,7 @@ export var uiCompMap: Registry = {
 categories: ["multimedia"],
 icon: IconCompIcon,
 keywords: trans("uiComp.iconCompKeywords"),
- lazyLoad: true,
- compName: "IconComp",
- compPath: "comps/iconComp",
+ comp: IconComp,
 layoutInfo: {
 w: 2,
 h: 10,
@@ -1520,9 +1474,7 @@ export var uiCompMap: Registry = {
 categories: ["multimedia"],
 icon: ColorPickerCompIcon,
 keywords: trans("uiComp.colorPickerCompKeywords"),
- lazyLoad: true,
- compName: "ColorPickerComp",
- compPath: "comps/mediaComp/colorPickerComp",
+ comp: ColorPickerComp,
 },
 
 // item Handling
@@ -1534,9 +1486,7 @@ export var uiCompMap: Registry = {
 categories: ["itemHandling", "documents"],
 icon: QRCodeCompIcon,
 keywords: trans("uiComp.qrCodeCompKeywords"),
- lazyLoad: true,
- compName: "QRCodeComp",
- compPath: "comps/qrCodeComp",
+ comp: QRCodeComp,
 layoutInfo: {
 w: 6,
 h: 32,
@@ -1549,9 +1499,7 @@ export var uiCompMap: Registry = {
 categories: ["itemHandling"],
 icon: ScannerCompIcon,
 keywords: trans("uiComp.scannerCompKeywords"),
- lazyLoad: true,
- compName: "ScannerComp",
- compPath: "comps/buttonComp/scannerComp",
+ comp: ScannerComp,
 layoutInfo: {
 w: 6,
 h: 5,
@@ -1564,9 +1512,7 @@ export var uiCompMap: Registry = {
 categories: ["itemHandling"],
 icon: SignatureCompIcon,
 keywords: trans("uiComp.signatureCompKeywords"),
- lazyLoad: true,
- compName: "SignatureComp",
- compPath: "comps/signatureComp",
+ comp: SignatureComp,
 layoutInfo: {
 w: 12,
 h: 40,
@@ -1592,9 +1538,7 @@ export var uiCompMap: Registry = {
 categories: ["multimedia", "itemHandling"],
 icon: TourCompIcon,
 keywords: trans("uiComp.tourCompKeywords"),
- lazyLoad: true,
- compName: "TourComp",
- compPath: "comps/tourComp/tourComp",
+ comp: TourComp,
 layoutInfo: {
 w: 1,
 h: 1,
@@ -1607,9 +1551,7 @@ export var uiCompMap: Registry = {
 categories: ["forms", "itemHandling"],
 icon: MultiSelectCompIcon,
 keywords: trans("uiComp.multiSelectCompKeywords"),
- lazyLoad: true,
- compName: "MultiSelectComp",
- compPath: "comps/selectInputComp/multiSelectComp",
+ comp: MultiSelectComp,
 layoutInfo: {
 w: 6,
 h: 5,
@@ -1622,9 +1564,7 @@ export var uiCompMap: Registry = {
 categories: ["layout", "itemHandling", "documents"],
 icon: TreeDisplayCompIcon,
 keywords: trans("uiComp.treeCompKeywords"),
- lazyLoad: true,
- compName: "TreeComp",
- compPath: "comps/treeComp/treeComp",
+ comp: TreeComp,
 layoutInfo: {
 w: 12,
 h: 40,
@@ -1637,9 +1577,7 @@ export var uiCompMap: Registry = {
 categories: ["layout", "itemHandling", "documents"],
 icon: TreeSelectCompIcon,
 keywords: trans("uiComp.treeSelectCompKeywords"),
- lazyLoad: true,
- compName: "TreeSelectComp",
- compPath: "comps/treeComp/treeSelectComp",
+ comp: TreeSelectComp,
 layoutInfo: {
 w: 12,
 h: 5,
@@ -1652,9 +1590,7 @@ export var uiCompMap: Registry = {
 description: trans("uiComp.transferDesc"),
 categories: ["itemHandling", "documents"],
 keywords: trans("uiComp.transferKeywords"),
- lazyLoad: true,
- compName: "transferComp",
- compPath: "comps/transferComp",
+ comp: transferComp,
 layoutInfo: {
 w: 12,
 h: 50,
@@ -1689,9 +1625,7 @@ export var uiCompMap: Registry = {
 icon: IFrameCompIcon,
 categories: ["integration"],
 keywords: trans("uiComp.iframeCompKeywords"),
- lazyLoad: true,
- compName: "IFrameComp",
- compPath: "comps/iframeComp",
+ comp: IFrameComp,
 layoutInfo: {
 w: 12,
 h: 40,
@@ -1704,9 +1638,7 @@ export var uiCompMap: Registry = {
 icon: CustomCompIcon,
 categories: ["integration"],
 keywords: trans("uiComp.customCompKeywords"),
- lazyLoad: true,
- compName: "CustomComp",
- compPath: "comps/customComp/customComp",
+ comp: CustomComp,
 layoutInfo: {
 w: 12,
 h: 40,
diff --git a/client/packages/lowcoder/src/comps/utils/useCompInstance.tsx b/client/packages/lowcoder/src/comps/utils/useCompInstance.tsx
index 812ae73899..c15e7c0dbb 100644
--- a/client/packages/lowcoder/src/comps/utils/useCompInstance.tsx
+++ b/client/packages/lowcoder/src/comps/utils/useCompInstance.tsx
@@ -304,11 +304,11 @@ export function useCompInstance<t extends CompConstructor>(
 
 let updateHandler = () => setComp(container.comp);
 
- if (UPDATE_ROOT_VIEW_DEBOUNCE> 0) {
+ // if (UPDATE_ROOT_VIEW_DEBOUNCE> 0) {
 updateHandler = debounce(() => {
 setComp(container.comp);
- }, UPDATE_ROOT_VIEW_DEBOUNCE);
- }
+ }, 50 /* UPDATE_ROOT_VIEW_DEBOUNCE */);
+ // }
 
 const finalHandlers = [...(handlers &#124;&#124; []), updateHandler];
 finalHandlers.forEach((handler) => container.addChangeListener(handler));
diff --git a/client/packages/lowcoder/src/layout/calculateUtils.tsx b/client/packages/lowcoder/src/layout/calculateUtils.tsx
index 1d919bd1bf..44a661e001 100644
--- a/client/packages/lowcoder/src/layout/calculateUtils.tsx
+++ b/client/packages/lowcoder/src/layout/calculateUtils.tsx
@@ -93,7 +93,6 @@ export function calcGridItemSizePx(
 const width = calcGridItemWHPx(w, colWidth, margin[0], false);
 
 const isTouchSBound = top ? isTouchBound(maxRows, rowHeight, h, top) : false;
- // console.log('positionParams',positionParams);
 const height = calcGridItemWHPx(h, rowHeight, margin[1], isTouchSBound);
 return { width, height };
 }
diff --git a/client/packages/lowcoder/src/layout/compSelectionWrapper.tsx b/client/packages/lowcoder/src/layout/compSelectionWrapper.tsx
index 4b347907ea..d9eb475d4d 100644
--- a/client/packages/lowcoder/src/layout/compSelectionWrapper.tsx
+++ b/client/packages/lowcoder/src/layout/compSelectionWrapper.tsx
@@ -11,6 +11,7 @@ import React, {
 MouseEventHandler,
 useCallback,
 useContext,
+ useMemo,
 useRef,
 useState,
 } from "react";
@@ -18,7 +19,8 @@ import ReactResizeDetector, { useResizeDetector } from "react-resize-detector";
 import styled, { css } from "styled-components";
 import { EllipsisTextCss } from "lowcoder-design";
 import { draggingUtils } from "./draggingUtils";
-import { ResizeHandleAxis } from "./gridLayoutPropTypes";
+import type { ResizeHandleAxis } from "./gridLayoutPropTypes";
+import { isEqual } from "lodash";
 
 export type DragHandleName = "w" &#124; "e" &#124; "nw" &#124; "ne" &#124; "sw" &#124; "se";
 type NamePos = "top" &#124; "bottom" &#124; "bottomInside";
@@ -273,7 +275,7 @@ export const CompSelectionWrapper = React.memo((props: {
 }
 setHover(true);
 },
- [setHover]
+ [nameDivRef.current, setHover]
 );
 const onMouseOut = useCallback(
 (e: MouseEvent<htmldivelement>) => {
@@ -287,42 +289,61 @@ export const CompSelectionWrapper = React.memo((props: {
 }
 setHover(false);
 },
- [setHover]
+ [nameDivRef.current, setHover]
 );
 
- const selectableDivProps = props.isSelectable
- ? {
- onMouseOver,
- onMouseOut,
- onClick: props.onClick,
- $hover: hover &#124;&#124; undefined,
- $showDashLine: editorState.showGridLines() &#124;&#124; props.hidden,
- $isSelected: props.isSelected,
- $isHidden: props.hidden,
- }
- : {
- $hover: undefined,
- $showDashLine: false,
- $isSelected: false,
- $isHidden: false,
- };
+ const selectableDivProps = useMemo(() => {
+ return props.isSelectable
+ ? {
+ onMouseOver,
+ onMouseOut,
+ onClick: props.onClick,
+ $hover: hover &#124;&#124; undefined,
+ $showDashLine: editorState.showGridLines() &#124;&#124; props.hidden,
+ $isSelected: props.isSelected,
+ $isHidden: props.hidden,
+ }
+ : {
+ $hover: undefined,
+ $showDashLine: false,
+ $isSelected: false,
+ $isHidden: false,
+ };
+ }, [
+ hover,
+ props.hidden,
+ props.isSelected,
+ props.isSelectable,
+ ]); 
+
+ const zIndex = useMemo(() => {
+ return props.isSelected
+ ? Layers.compSelected
+ : hover
+ ? Layers.compHover
+ : props.hidden
+ ? Layers.compHidden
+ : undefined;
+ }, [
+ hover,
+ props.hidden,
+ props.isSelected
+ ]);
 
- const zIndex = props.isSelected
- ? Layers.compSelected
- : hover
- ? Layers.compHover
- : props.hidden
- ? Layers.compHidden
- : undefined;
+ const needResizeDetector = useMemo(() => {
+ return props.autoHeight && !props.placeholder;
+ }, [props.autoHeight, props.placeholder]);
 
- const needResizeDetector = props.autoHeight && !props.placeholder;
 const { ref: wrapperRef } = useResizeDetector({
 onResize: props.onWrapperResize,
 handleHeight: needResizeDetector,
 handleWidth: false,
+ refreshMode: 'debounce',
+ refreshRate: 100,
 });
 // log.debug("CompSelectionWrapper. name: ", props.name, " zIndex: ", zIndex);
 const { nameConfig, resizeIconSize } = props;
+
 return (
 <div id={props.id} style={{ ...props.style, zIndex }} className={props.className}>
 <selectablediv @@ -369,8 +390,18 @@ export const CompSelectionWrapper = React.memo((props: { {!needResizeDetector && props.children} {needResizeDetector && ( <reactresizedetector + skipOnMount={ + props.compType === 'responsiveLayout' + &#124;&#124; props.compType === 'columnLayout' + &#124;&#124; props.compType === 'pageLayout' + &#124;&#124; props.compType === 'splitLayout' + &#124;&#124; props.compType === 'floatTextContainer' + &#124;&#124; props.compType === 'tabbedContainer' + &#124;&#124; props.compType === 'collapsibleContainer' + &#124;&#124; props.compType === 'container' + } refreshMode="debounce" - refreshRate={250} + refreshRate={0} onResize={props.onInnerResize} observerOptions={{ box: "border-box" }}>
@@ -380,4 +411,4 @@ export const CompSelectionWrapper = React.memo((props: {
 </selectablediv>
 </div>
 );
-});
+}, (prev, next) => isEqual(prev, next));
diff --git a/client/packages/lowcoder/src/layout/gridItem.tsx b/client/packages/lowcoder/src/layout/gridItem.tsx
index 963c1c0567..3594f3acd3 100644
--- a/client/packages/lowcoder/src/layout/gridItem.tsx
+++ b/client/packages/lowcoder/src/layout/gridItem.tsx
@@ -113,8 +113,8 @@ export const GridItem = React.memo((props: GridItemProps) => {
 maxRows: props.maxRows,
 }, props.x, props.y, props.w, props.h)},
 [
- props.margin,
- props.containerPadding,
+ JSON.stringify(props.margin),
+ JSON.stringify(props.containerPadding),
 props.containerWidth,
 props.cols,
 props.rowHeight,
@@ -123,7 +123,6 @@ export const GridItem = React.memo((props: GridItemProps) => {
 props.y,
 props.w,
 props.h,
- calcGridItemPosition,
 ]
 );
 
@@ -230,8 +229,8 @@ export const GridItem = React.memo((props: GridItemProps) => {
 y: yy,
 });
 }, [
- resizing,
- dragging,
+ JSON.stringify(resizing),
+ JSON.stringify(dragging),
 props.cols,
 props.maxRows,
 props.x,
@@ -417,7 +416,7 @@ export const GridItem = React.memo((props: GridItemProps) => {
 itemHeightRef.current = height;
 }
 adjustWrapperHeight(width, height);
- }, [itemHeightRef, adjustWrapperHeight]);
+ }, [itemHeightRef.current, adjustWrapperHeight]);
 
 /**
 * re-calculate the occupied gird-cells.
@@ -427,7 +426,7 @@ export const GridItem = React.memo((props: GridItemProps) => {
 */
 const onWrapperSizeChange = useCallback(() => {
 adjustWrapperHeight(undefined, itemHeightRef.current);
- }, [itemHeightRef, adjustWrapperHeight]);
+ }, [itemHeightRef.current, adjustWrapperHeight]);
 
 const mixinChildWrapper = useCallback((child: React.ReactElement): React.ReactElement => {
 const {
@@ -535,6 +534,21 @@ export const GridItem = React.memo((props: GridItemProps) => {
 
 const pos = useMemo(calcPosition, [calcPosition]);
 
+ const transform = useMemo(() => {
+ return setTransform(
+ pos,
+ props.name,
+ props.autoHeight,
+ props.hidden,
+ Boolean(draggingUtils.isDragging())
+ )
+ }, [
+ JSON.stringify(pos),
+ props.name,
+ props.autoHeight,
+ props.hidden
+ ]);
+
 const render = useMemo(() => {
 let child = React.Children.only(children);
 // Create the child element. We clone the existing element but modify its className and style.
@@ -563,13 +577,7 @@ export const GridItem = React.memo((props: GridItemProps) => {
 cssTransforms: true,
 }),
 style: {
- ...setTransform(
- pos,
- props.name,
- props.autoHeight,
- props.hidden,
- Boolean(draggingUtils.isDragging())
- ),
+ ...transform,
 opacity: layoutHide ? 0 : undefined,
 pointerEvents: layoutHide ? "none" : "auto",
 },
@@ -580,11 +588,12 @@ export const GridItem = React.memo((props: GridItemProps) => {
 newChild = mixinDraggable(newChild, isDraggable);
 return newChild;
 }, [
- pos,
+ JSON.stringify(transform),
+ JSON.stringify(pos),
 children,
 elementRef,
- resizing,
- dragging,
+ Boolean(resizing),
+ Boolean(dragging),
 isDraggable,
 layoutHide,
 zIndex,
@@ -593,8 +602,6 @@ export const GridItem = React.memo((props: GridItemProps) => {
 props.className,
 props.style,
 props.static,
- props.autoHeight,
- props.hidden,
 setTransform,
 mixinChildWrapper,
 mixinResizable,
diff --git a/client/packages/lowcoder/src/layout/gridLayout.tsx b/client/packages/lowcoder/src/layout/gridLayout.tsx
index 0b88786c25..0b25763b77 100644
--- a/client/packages/lowcoder/src/layout/gridLayout.tsx
+++ b/client/packages/lowcoder/src/layout/gridLayout.tsx
@@ -1,8 +1,8 @@
 import clsx from "clsx";
 import { colord } from "colord";
-import { UICompType } from "comps/uiCompRegistry";
+import type { UICompType } from "comps/uiCompRegistry";
 import { ModulePrimaryColor, PrimaryColor } from "constants/style";
-import _ from "lodash";
+import _, { isEqual } from "lodash";
 import log from "loglevel";
 import React, { DragEvent, DragEventHandler, MouseEventHandler, ReactElement } from "react";
 import ReactResizeDetector from "react-resize-detector";
@@ -21,7 +21,7 @@ import {
 import { draggingUtils } from "./draggingUtils";
 import { FlyOverInfo, FlyStartInfo } from "./flyInfo";
 import { GridItem } from "./gridItem";
-import { GridLayoutProps } from "./gridLayoutPropTypes";
+import type { GridLayoutProps } from "./gridLayoutPropTypes";
 import { GridLines } from "./gridLines";
 import { changeItemOp, deleteItemOp, LayoutOp, renameItemOp } from "./layoutOp";
 import { getUILayout, LayoutOps, layoutOpUtils } from "./layoutOpUtils";
@@ -1102,7 +1102,7 @@ const LayoutContainer = styled.div<{ }`} `; -export const ReactGridLayout = React.memo(GridLayout); +export const ReactGridLayout = React.memo(GridLayout, (prev, next) => isEqual(prev, next));
 
 function moveOrResize(
 e: React.KeyboardEvent,
diff --git a/client/packages/lowcoder/src/layout/gridLines.tsx b/client/packages/lowcoder/src/layout/gridLines.tsx
index c7cfc1366a..33b5eefec0 100644
--- a/client/packages/lowcoder/src/layout/gridLines.tsx
+++ b/client/packages/lowcoder/src/layout/gridLines.tsx
@@ -1,6 +1,7 @@
 import { CSSProperties } from "react";
 import { calcGridColWidth, PositionParams } from "./calculateUtils";
 import { Position, setTransform } from "./utils";
+import React from "react";
 
 interface GridLineProps {
 position: Position;
@@ -19,10 +20,10 @@ function setBackgroundProps(positionParams: PositionParams, lineColor: string):
 };
 }
 
-export function GridLines(props: GridLineProps) {
+export const GridLines = React.memo((props: GridLineProps) => {
 const style = {
 ...setTransform(props.position),
 ...setBackgroundProps(props.positionParams, props.lineColor),
 };
 return <div style={style} />;
-}
+})
diff --git a/client/packages/lowcoder/vite.config.mts b/client/packages/lowcoder/vite.config.mts
index 9699e15db2..371b944a7b 100644
--- a/client/packages/lowcoder/vite.config.mts
+++ b/client/packages/lowcoder/vite.config.mts
@@ -1,5 +1,5 @@
 import dotenv from "dotenv";
-import { defineConfig, ServerOptions, UserConfig } from "vite";
+import { defineConfig, PluginOption, ServerOptions, UserConfig } from "vite";
 import react from "@vitejs/plugin-react";
 import viteTsconfigPaths from "vite-tsconfig-paths";
 import svgrPlugin from "vite-plugin-svgr";
@@ -12,6 +12,7 @@ import dynamicImport from 'vite-plugin-dynamic-import';
 import { ensureLastSlash } from "./src/dev-utils/util";
 import { buildVars } from "./src/dev-utils/buildVars";
 import { globalDepPlugin } from "./src/dev-utils/globalDepPlguin";
+import { terser } from 'rollup-plugin-terser';
 // import { nodePolyfills } from 'vite-plugin-node-polyfills'
 
 dotenv.config();
@@ -66,6 +67,7 @@ export const viteConfig: UserConfig = {
 },
 base,
 build: {
+ minify: "terser",
 manifest: true,
 target: "es2020",
 cssTarget: "chrome87",
@@ -73,9 +75,116 @@ export const viteConfig: UserConfig = {
 assetsDir: "static",
 emptyOutDir: false,
 rollupOptions: {
+ treeshake: {
+ moduleSideEffects: true, 
+ propertyReadSideEffects: false,
+ tryCatchDeoptimization: false, 
+ unknownGlobalSideEffects: false, 
+ },
 output: {
 chunkFileNames: "[hash].js",
+ manualChunks: (id) => {
+ if (id.includes("node_modules")) {
+ // UI LIBRARIES
+ if (id.includes("@ant-design/icons")) return "ant-design-icons";
+ if (id.includes("node_modules/antd")) return "antd";
+ if (id.includes("styled-components")) return "styled-components";
+
+ // 🔹 BARCODE & QR CODE PROCESSING
+ if (id.includes("react-qr-barcode-scanner")) return "barcode";
+ 
+ // TEXT EDITORS & PARSERS
+ if (id.includes("codemirror")) return "codemirror";
+ if (id.includes("quill")) return "quill";
+ if (id.includes("react-json-view")) return "react-json-view";
+ if (id.includes("react-quill")) return "react-quill";
+ if (id.includes("remark-gfm")) return "remark-gfm";
+ if (id.includes("rehype-raw")) return "rehype-raw";
+ if (id.includes("rehype-sanitize")) return "rehype-sanitize";
+ 
+ // DRAG & DROP
+ if (id.includes("@dnd-kit")) return "dnd-kit";
+ if (id.includes("react-draggable")) return "react-draggable";
+ if (id.includes("react-grid-layout")) return "react-grid-layout";
+ if (id.includes("react-sortable-hoc")) return "react-sortable-hoc";
+ 
+ // ICONS & FONTS
+ if (id.includes("@fortawesome")) return "fontawesome";
+ if (id.includes("@remixicon")) return "remixicon";
+ 
+ // DATE/TIME HANDLING
+ if (id.includes("moment")) return "moment";
+ if (id.includes("date-fns")) return "date-fns";
+ if (id.includes("dayjs")) return "dayjs";
+ 
+ // UTILITIES & HELPERS
+ if (id.includes("clsx")) return "clsx";
+ if (id.includes("immer")) return "immer";
+ if (id.includes("lodash")) return "lodash";
+ if (id.includes("lodash-es")) return "lodash-es";
+ if (id.includes("uuid")) return "uuid";
+ if (id.includes("ua-parser-js")) return "ua-parser-js";
+ if (id.includes("html2canvas")) return "ua-parser-js";
+ if (id.includes("numbro")) return "numbro";
+ 
+ // FILE & DATA PROCESSING
+ if (id.includes("buffer")) return "buffer";
+ if (id.includes("file-saver")) return "file-saver";
+ if (id.includes("papaparse")) return "papaparse";
+ if (id.includes("parse5")) return "parse5";
+ if (id.includes("xlsx")) return "xlsx";
+ if (id.includes("alasql")) return "alasql";
+ if (id.includes("sql-formatter")) return "sql-formatter";
+ 
+ // NETWORK & HTTP
+ if (id.includes("axios")) return "axios";
+ if (id.includes("fetch")) return "fetch";
+ if (id.includes("http")) return "http-modules";
+ if (id.includes("https")) return "https-modules";
+ 
+ // WEB SOCKETS & STREAMING
+ if (id.includes("sockjs")) return "websockets";
+ if (id.includes("websocket")) return "websockets";
+ 
+ // STATE MANAGEMENT
+ if (id.includes("react-error-boundary")) return "react-error-boundary";
+ if (id.includes("redux-devtools-extension")) return "redux-devtools";
+ 
+ // POLYFILLS & BROWSER COMPATIBILITY
+ // if (id.includes("core-js")) return "core-js";
+ if (id.includes("regenerator-runtime")) return "regenerator-runtime";
+ if (id.includes("eslint4b-prebuilt-2")) return "eslint4b-prebuilt-2";
+
+ // MISCELLANEOUS
+ if (id.includes("cnchar")) return "cnchar";
+ if (id.includes("hotkeys-js")) return "hotkeys-js";
+ if (id.includes("loglevel")) return "loglevel";
+ if (id.includes("qrcode.react")) return "qrcode-react";
+ if (id.includes("react-joyride")) return "react-joyride";
+ if (id.includes("rc-trigger")) return "rc-trigger";
+ if (id.includes("really-relaxed-json")) return "really-relaxed-json";
+ if (id.includes("simplebar-react")) return "simplebar-react";
+ if (id.includes("react-documents")) return "react-documents";
+ if (id.includes("react-colorful")) return "react-colorful";
+ if (id.includes("react-best-gradient-color-picker")) return "react-best-gradient-color-picker";
+ if (id.includes("@supabase/supabase-js")) return "supabase";
+ return null;
+ }
+ return null;
+ },
 },
+ plugins: [
+ terser({
+ compress: {
+ drop_console: true, 
+ drop_debugger: true, 
+ pure_funcs: ["console.info", "console.debug", "console.log"], 
+ },
+ format: {
+ comments: /(@vite-ignore&#124;webpackIgnore)/
+ },
+ }) as PluginOption,
+ ],
 onwarn: (warning, warn) => {
 if (warning.code === 'MODULE_LEVEL_DIRECTIVE') {
 return
diff --git a/client/yarn.lock b/client/yarn.lock
index 1589f0bb74..1f364cbc26 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -14242,6 +14242,7 @@ coolshapes-react@lowcoder-org/coolshapes-react:
 rehype-sanitize: ^5.0.1
 remark-gfm: ^4.0.0
 resize-observer-polyfill: ^1.5.1
+ rollup-plugin-terser: ^7.0.2
 rollup-plugin-visualizer: ^5.9.2
 simplebar-react: ^3.2.4
 sql-formatter: ^8.2.0
</div><div class="naked_ctrl">
<form action="/index.cgi/contrast" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://github.com/lowcoder-org/lowcoder/compare/a91312f6e193776ff97ad5aa6a8e313b56b2c289..75a84b083a44ef82fde22c887cad1b672955dd1e.diff">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://github.com/lowcoder-org/lowcoder/compare/a91312f6e193776ff97ad5aa6a8e313b56b2c289..75a84b083a44ef82fde22c887cad1b672955dd1e.diff" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast" selected="selected">配色反転</option>
<option value="larger-text">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>