lowcoder-org · FalkWolsky · Feb 19, 2025 · Feb 13, 2025 · Feb 13, 2025 · Feb 13, 2025
diff --git 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
@@ -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
@@ -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
@@ -64,7 +64,6 @@ const SimplePopover = (props: {
   );
   return (
     <Popover
-      overlayInnerStyle={{padding: 0}}
       align={{
         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" }}
       align={{
         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={() => (
         <>
           <Wedge />

diff --git 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
@@ -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><>{title}</></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
@@ -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
@@ -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/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
@@ -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 === '' || 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
@@ -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
@@ -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
@@ -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 compHeight={props.height} />
   );
 });
 
@@ -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
@@ -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
@@ -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}