From f8533b0ffd6f33adee860478d8da4621a588f5c3 Mon Sep 17 00:00:00 2001
From: enes <mulahasanovic@outlook.com>
Date: Fri, 30 Aug 2024 12:28:33 +0200
Subject: [PATCH] refactor(content): add small loading spinner to content
 sections

Closes #141
---
 src/components/DrawPDFFields/index.tsx        |   9 +-
 src/components/LoadingSpinner/index.tsx       |  33 +++--
 .../LoadingSpinner/style.module.scss          |  26 ++--
 src/components/PDFView/index.tsx              |  51 ++++---
 src/pages/verify/index.tsx                    | 138 +++++++++---------
 5 files changed, 140 insertions(+), 117 deletions(-)

diff --git a/src/components/DrawPDFFields/index.tsx b/src/components/DrawPDFFields/index.tsx
index 7ddf292..13a50c0 100644
--- a/src/components/DrawPDFFields/index.tsx
+++ b/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) {
diff --git a/src/components/LoadingSpinner/index.tsx b/src/components/LoadingSpinner/index.tsx
index 980a763..4e2a0d9 100644
--- a/src/components/LoadingSpinner/index.tsx
+++ b/src/components/LoadingSpinner/index.tsx
@@ -1,18 +1,31 @@
 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
 
-  return (
-    <div className={styles.loadingSpinnerOverlay}>
-      <div className={styles.loadingSpinnerContainer}>
-        <div className={styles.loadingSpinner}></div>
-        {desc && <span className={styles.loadingSpinnerDesc}>{desc}</span>}
-      </div>
-    </div>
-  )
+  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}>
+            <div className={styles.loadingSpinner}></div>
+            {desc && <span className={styles.loadingSpinnerDesc}>{desc}</span>}
+          </div>
+        </div>
+      )
+  }
 }
diff --git a/src/components/LoadingSpinner/style.module.scss b/src/components/LoadingSpinner/style.module.scss
index 75b2609..00852c8 100644
--- a/src/components/LoadingSpinner/style.module.scss
+++ b/src/components/LoadingSpinner/style.module.scss
@@ -11,22 +11,26 @@
   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;
-  }
+.loadingSpinnerContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 
-  .loadingSpinner {
-    background: url('/favicon.png') no-repeat center / cover;
-    width: 40px;
-    height: 40px;
-    animation: spin 1s linear infinite;
+  &.withHeight {
+    min-height: 250px;
   }
 }
 
+.loadingSpinner {
+  background: url('/favicon.png') no-repeat center / cover;
+  width: 40px;
+  height: 40px;
+  animation: spin 1s linear infinite;
+}
+
 .loadingSpinnerDesc {
   color: white;
   margin-top: 13px;
diff --git a/src/components/PDFView/index.tsx b/src/components/PDFView/index.tsx
index 73c9334..acd1874 100644
--- a/src/components/PDFView/index.tsx
+++ b/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,30 +49,34 @@ const PdfView = ({
     index !== files.length - 1
   return (
     <div className="files-wrapper">
-      {files.map((currentUserFile, index, arr) => {
-        const { hash, file, id } = currentUserFile
+      {files.length > 0 ? (
+        files.map((currentUserFile, index, arr) => {
+          const { hash, file, id } = currentUserFile
 
-        if (!hash) return
-        return (
-          <React.Fragment key={index}>
-            <div
-              id={file.name}
-              className="file-wrapper"
-              ref={(el) => (pdfRefs.current[id] = el)}
-            >
-              <PdfItem
-                file={file}
-                currentUserMarks={filterByFile(currentUserMarks, hash)}
-                selectedMark={selectedMark}
-                handleMarkClick={handleMarkClick}
-                selectedMarkValue={selectedMarkValue}
-                otherUserMarks={filterMarksByFile(otherUserMarks, hash)}
-              />
-            </div>
-            {isNotLastPdfFile(index, arr) && <FileDivider />}
-          </React.Fragment>
-        )
-      })}
+          if (!hash) return
+          return (
+            <React.Fragment key={index}>
+              <div
+                id={file.name}
+                className="file-wrapper"
+                ref={(el) => (pdfRefs.current[id] = el)}
+              >
+                <PdfItem
+                  file={file}
+                  currentUserMarks={filterByFile(currentUserMarks, hash)}
+                  selectedMark={selectedMark}
+                  handleMarkClick={handleMarkClick}
+                  selectedMarkValue={selectedMarkValue}
+                  otherUserMarks={filterMarksByFile(otherUserMarks, hash)}
+                />
+              </div>
+              {isNotLastPdfFile(index, arr) && <FileDivider />}
+            </React.Fragment>
+          )
+        })
+      ) : (
+        <LoadingSpinner variant="small" />
+      )}
     </div>
   )
 }
diff --git a/src/pages/verify/index.tsx b/src/pages/verify/index.tsx
index 8f73d25..8f6fcc1 100644
--- a/src/pages/verify/index.tsx
+++ b/src/pages/verify/index.tsx
@@ -79,74 +79,80 @@ const SlimPdfView = ({
   }, [currentFile])
   return (
     <div className="files-wrapper">
-      {files.map((currentUserFile, i) => {
-        const { hash, file, id } = currentUserFile
-        const signatureEvents = Object.keys(parsedSignatureEvents)
-        if (!hash) return
-        return (
-          <React.Fragment key={file.name}>
-            <div
-              id={file.name}
-              ref={(el) => (pdfRefs.current[id] = el)}
-              className="file-wrapper"
-            >
-              {file.isPdf &&
-                file.pages?.map((page, i) => {
-                  const marks: Mark[] = []
+      {files.length > 0 ? (
+        files.map((currentUserFile, i) => {
+          const { hash, file, id } = currentUserFile
+          const signatureEvents = Object.keys(parsedSignatureEvents)
+          if (!hash) return
+          return (
+            <React.Fragment key={file.name}>
+              <div
+                id={file.name}
+                ref={(el) => (pdfRefs.current[id] = el)}
+                className="file-wrapper"
+              >
+                {file.isPdf &&
+                  file.pages?.map((page, i) => {
+                    const marks: Mark[] = []
 
-                  signatureEvents.forEach((e) => {
-                    const m = parsedSignatureEvents[
-                      e as `npub1${string}`
-                    ].parsedContent?.marks.filter(
-                      (m) => m.pdfFileHash == hash && m.location.page == i
+                    signatureEvents.forEach((e) => {
+                      const m = parsedSignatureEvents[
+                        e as `npub1${string}`
+                      ].parsedContent?.marks.filter(
+                        (m) => m.pdfFileHash == hash && m.location.page == i
+                      )
+                      if (m) {
+                        marks.push(...m)
+                      }
+                    })
+                    return (
+                      <div className="image-wrapper" key={i}>
+                        <img
+                          draggable="false"
+                          src={page.image}
+                          alt={`page ${i} of ${file.name}`}
+                        />
+                        {marks.map((m) => {
+                          return (
+                            <div
+                              className={`file-mark ${styles.mark}`}
+                              key={m.id}
+                              style={{
+                                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)
+                                ),
+                                fontFamily: FONT_TYPE,
+                                fontSize: inPx(from(page.width, FONT_SIZE))
+                              }}
+                            >
+                              {m.value}
+                            </div>
+                          )
+                        })}
+                      </div>
                     )
-                    if (m) {
-                      marks.push(...m)
-                    }
-                  })
-                  return (
-                    <div className="image-wrapper" key={i}>
-                      <img
-                        draggable="false"
-                        src={page.image}
-                        alt={`page ${i} of ${file.name}`}
-                      />
-                      {marks.map((m) => {
-                        return (
-                          <div
-                            className={`file-mark ${styles.mark}`}
-                            key={m.id}
-                            style={{
-                              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)),
-                              fontFamily: FONT_TYPE,
-                              fontSize: inPx(from(page.width, FONT_SIZE))
-                            }}
-                          >
-                            {m.value}
-                          </div>
-                        )
-                      })}
-                    </div>
-                  )
-                })}
-              {file.isImage && (
-                <img
-                  className="file-image"
-                  src={file.objectUrl}
-                  alt={file.name}
-                />
-              )}
-              {!(file.isPdf || file.isImage) && (
-                <ExtensionFileBox extension={file.extension} />
-              )}
-            </div>
-            {i < files.length - 1 && <FileDivider />}
-          </React.Fragment>
-        )
-      })}
+                  })}
+                {file.isImage && (
+                  <img
+                    className="file-image"
+                    src={file.objectUrl}
+                    alt={file.name}
+                  />
+                )}
+                {!(file.isPdf || file.isImage) && (
+                  <ExtensionFileBox extension={file.extension} />
+                )}
+              </div>
+              {i < files.length - 1 && <FileDivider />}
+            </React.Fragment>
+          )
+        })
+      ) : (
+        <LoadingSpinner variant="small" />
+      )}
     </div>
   )
 }