match lazy comp's loading skeleton height as per comp's default height

Author: raheeliftikhar5

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>
   );
 };

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!);

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}
+        />
       );
     }