Enhance LoadingFacetList component with more dynamic and randomized p…

…laceholder loading states
datacite · Jan 21, 2025 · d09dc8f · d09dc8f
1 parent f032480
commit d09dc8f
Showing 1 changed file with 53 additions and 34 deletions.
diff --git a/src/components/Loading/LoadingFacetList.tsx b/src/components/Loading/LoadingFacetList.tsx
@@ -2,54 +2,73 @@ import React from "react"
 import ContentLoader from "react-content-loader"
 
 interface Props {
-  count: number
+  count?: number
+  numberOfLines?: number
 }
-const numberOfLines=10
-const lineHeight=1.2
-const lineSpace=.5
-const totalHeightEm = 0.1+ lineSpace + (numberOfLines * (lineHeight + lineSpace))
 
-function LoadingFacetList({ count, ...props }: Props) {
+function LoadingFacetList({
+  count = 1,
+  numberOfLines = 5
+}: Props) {
+  const _numberOfLines = numberOfLines
+  const baseSize=20
+  const lineHeight=1.2 * baseSize
+  const doubleLineHeight=2 * lineHeight
+  const lineSpace=.5 * baseSize
+  const totalWidth=400
+  const totalHeight= ((_numberOfLines+3) * (lineHeight + lineSpace))
+  const randomWidths = Array(_numberOfLines*count).fill(0).map(() => 10 + Math.floor(Math.random() * 5))
+  const randomLabelWidths = Array(_numberOfLines*count).fill(0).map(() => 40 + Math.floor(Math.random() * 30))
+  const randomHeaders = Array(count).fill(0).map(() => 200 + Math.floor(Math.random() * 150))
 
   return (
-    Array(count).fill(0).map((_,index) =>
+    Array(count).fill(0).map((_,index) => (
         <ContentLoader
           speed={2}
-          width={"100%"}
-          height={`${totalHeightEm}em`}
-          viewBox={`0 0 400 ${totalHeightEm*16 +32}`}
+          title="Loading Facets..."
+          width={totalWidth}
+          // height="100%"
+          viewBox={`0 0 400 ${totalHeight}`}
           backgroundColor="#f3f3f3"
           foregroundColor="#ecebeb"
-          key={index}
-          {...props}
+          style={{ height: '100%' }}
+          key={'facet-placeholder-' + randomHeaders[index]}
           >
-          <rect x="1em" y="0" rx="0" ry="0" width="75%" height="2em" />
-          <rect x="1em" y="2.1em" rx="0" ry="0" width="100%" height="2" />
-          {Array(numberOfLines).fill(0).map((_,index2) =>
-                                            <>
+          <rect x={ 3 } y={ 0 } rx={ 5 } ry={ 5 } width={`${randomHeaders[index]}`} height={`${doubleLineHeight}`} />
+          <rect x={ 3 } y={`${doubleLineHeight+lineSpace}`} rx={ 0 } ry={ 0 } width={totalWidth} height={ 2 } />
+          {Array(_numberOfLines).fill(0).map((_,index2) => (
+            <React.Fragment key={`facet-group-${index}-${index2}`}>
               <rect
-                x="1em"
-                y={`${1+ ((index2+1) * (lineHeight + lineSpace))}em`}
-                rx="0"
-                ry="0"
-                width={`${lineHeight}em`}
-                height={`${lineHeight}em`}
-                key={"chec"+index+index2}
+                x={ baseSize }
+                y={((index2+2) * (lineHeight + lineSpace))}
+                rx={ 0 }
+                ry={ 0 }
+                width={lineHeight}
+                height={lineHeight}
+                key={`facet-${index}-${index2}-check-${Math.random().toString(36).substring(2, 9)}`}
               />
               <rect
-                x="3em"
-                y={`${1+ ((index2+1) * (lineHeight + lineSpace))}em`}
-                rx="0"
-                ry="0"
-                width="85%"
-                height={`${lineHeight}em`}
-                key={"rec"+index+index2}
+                x={baseSize * 3}
+                y={((index2+2) * (lineHeight + lineSpace))}
+                rx={ 5 }
+                ry={ 5 }
+                width={randomLabelWidths[index*_numberOfLines +index2]*4}
+                height={`${lineHeight}`}
+                key={`facet-${index}-${index2}-label-${Math.random().toString(36).substring(2, 9)}`}
               />
-                                           </>
-                                           )}
+              <rect
+                x={400 - randomWidths[index*_numberOfLines +index2]*4}
+                y={(index2+2) * (lineHeight + lineSpace)}
+                rx={5}
+                ry={5}
+                width={randomWidths[index*_numberOfLines +index2]*4}
+                height={lineHeight}
+                key={`facet-${index}-${index2}-count-${Math.random().toString(36).substring(2, 9)}`}
+              />
+            </React.Fragment>
+          ))}
         </ContentLoader>
-                            )
-
+                            ))
   )
 }