refactor(content): add small loading spinner to content sections

Closes #141

src/components/DrawPDFFields/index.tsx

@@ -1,7 +1,5 @@
 import { Close } from '@mui/icons-material'
 import {
-  Box,
-  CircularProgress,
   FormControl,
   InputLabel,
   ListItemIcon,
@@ -22,6 +20,7 @@ import { ExtensionFileBox } from '../ExtensionFileBox'
 import { inPx } from '../../utils/pdf'
 import { useScale } from '../../hooks/useScale'
 import { AvatarIconButton } from '../UserAvatarIconButton'
+import { LoadingSpinner } from '../LoadingSpinner'
 
 PDFJS.GlobalWorkerOptions.workerSrc = new URL(
   'pdfjs-dist/build/pdf.worker.min.mjs',
@@ -530,11 +529,7 @@ export const DrawPDFFields = (props: Props) => {
   }
 
   if (parsingPdf) {
-    return (
-      <Box sx={{ width: '100%', textAlign: 'center' }}>
-        <CircularProgress />
-      </Box>
-    )
+    return <LoadingSpinner variant="small" />
   }
 
   if (!sigitFiles.length) {

src/components/LoadingSpinner/index.tsx

@@ -1,12 +1,24 @@
 import styles from './style.module.scss'
 
 interface Props {
-  desc: string
+  desc?: string
+  variant?: 'small' | 'default'
 }
 
 export const LoadingSpinner = (props: Props) => {
-  const { desc } = props
+  const { desc, variant = 'default' } = props
 
+  switch (variant) {
+    case 'small':
+      return (
+        <div
+          className={`${styles.loadingSpinnerContainer} ${styles.withHeight}`}
+        >
+          <div className={styles.loadingSpinner}></div>
+        </div>
+      )
+
+    default:
       return (
         <div className={styles.loadingSpinnerOverlay}>
           <div className={styles.loadingSpinnerContainer}>
@@ -16,3 +28,4 @@ export const LoadingSpinner = (props: Props) => {
         </div>
       )
   }
+}

src/components/LoadingSpinner/style.module.scss

@@ -11,12 +11,17 @@
   justify-content: center;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 9999;
+}
 
 .loadingSpinnerContainer {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
+
+  &.withHeight {
+    min-height: 250px;
+  }
 }
 
 .loadingSpinner {
@@ -25,7 +30,6 @@
   height: 40px;
   animation: spin 1s linear infinite;
 }
-}
 
 .loadingSpinnerDesc {
   color: white;

src/components/PDFView/index.tsx

@@ -4,6 +4,7 @@ import { CurrentUserFile } from '../../types/file.ts'
 import { useEffect, useRef } from 'react'
 import { FileDivider } from '../FileDivider.tsx'
 import React from 'react'
+import { LoadingSpinner } from '../LoadingSpinner/index.tsx'
 
 interface PdfViewProps {
   currentFile: CurrentUserFile | null
@@ -48,7 +49,8 @@ const PdfView = ({
     index !== files.length - 1
   return (
     <div className="files-wrapper">
-      {files.map((currentUserFile, index, arr) => {
+      {files.length > 0 ? (
+        files.map((currentUserFile, index, arr) => {
           const { hash, file, id } = currentUserFile
 
           if (!hash) return
@@ -71,7 +73,10 @@ const PdfView = ({
               {isNotLastPdfFile(index, arr) && <FileDivider />}
             </React.Fragment>
           )
-      })}
+        })
+      ) : (
+        <LoadingSpinner variant="small" />
+      )}
     </div>
   )
 }

src/pages/verify/index.tsx

@@ -79,7 +79,8 @@ const SlimPdfView = ({
   }, [currentFile])
   return (
     <div className="files-wrapper">
-      {files.map((currentUserFile, i) => {
+      {files.length > 0 ? (
+        files.map((currentUserFile, i) => {
           const { hash, file, id } = currentUserFile
           const signatureEvents = Object.keys(parsedSignatureEvents)
           if (!hash) return
@@ -120,7 +121,9 @@ const SlimPdfView = ({
                                 left: inPx(from(page.width, m.location.left)),
                                 top: inPx(from(page.width, m.location.top)),
                                 width: inPx(from(page.width, m.location.width)),
-                              height: inPx(from(page.width, m.location.height)),
+                                height: inPx(
+                                  from(page.width, m.location.height)
+                                ),
                                 fontFamily: FONT_TYPE,
                                 fontSize: inPx(from(page.width, FONT_SIZE))
                               }}
@@ -146,7 +149,10 @@ const SlimPdfView = ({
               {i < files.length - 1 && <FileDivider />}
             </React.Fragment>
           )
-      })}
+        })
+      ) : (
+        <LoadingSpinner variant="small" />
+      )}
     </div>
   )
 }