From 0aa8b9a38fc7746897acaf60127e70306055d304 Mon Sep 17 00:00:00 2001
From: daniyal <daniyal@nostrdev.com>
Date: Thu, 25 Jul 2024 21:12:12 +0500
Subject: [PATCH] feat: add loading spinner while fetching mod details

---
 src/components/LoadingSpinner/index.tsx | 18 ++++++++++++
 src/components/ModForm.tsx              |  2 ++
 src/pages/innerMod.tsx                  | 21 +++++++++++---
 src/styles/loadingSpinner.module.scss   | 37 +++++++++++++++++++++++++
 4 files changed, 74 insertions(+), 4 deletions(-)
 create mode 100644 src/components/LoadingSpinner/index.tsx
 create mode 100644 src/styles/loadingSpinner.module.scss

diff --git a/src/components/LoadingSpinner/index.tsx b/src/components/LoadingSpinner/index.tsx
new file mode 100644
index 0000000..9f22262
--- /dev/null
+++ b/src/components/LoadingSpinner/index.tsx
@@ -0,0 +1,18 @@
+import styles from '../../styles/loadingSpinner.module.scss'
+
+interface Props {
+  desc: string
+}
+
+export const LoadingSpinner = (props: Props) => {
+  const { desc } = props
+
+  return (
+    <div className={styles.loadingSpinnerOverlay}>
+      <div className={styles.loadingSpinnerContainer}>
+        <div className={styles.loadingSpinner}></div>
+        {desc && <span>{desc}</span>}
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/ModForm.tsx b/src/components/ModForm.tsx
index 257aff6..9a1f859 100644
--- a/src/components/ModForm.tsx
+++ b/src/components/ModForm.tsx
@@ -20,6 +20,7 @@ import { RelayController } from '../controllers'
 import { useNavigate } from 'react-router-dom'
 import { getModsInnerPageRoute } from '../routes'
 import { DownloadUrl, FormState } from '../types'
+import { LoadingSpinner } from './LoadingSpinner'
 
 interface FormErrors {
   game?: string
@@ -348,6 +349,7 @@ export const ModForm = () => {
 
   return (
     <>
+      {isPublishing && <LoadingSpinner desc='Publishing mod to relays' />}
       <GameDropdown
         options={gameOptions}
         selected={formState.game}
diff --git a/src/pages/innerMod.tsx b/src/pages/innerMod.tsx
index 4b04862..ed2ea65 100644
--- a/src/pages/innerMod.tsx
+++ b/src/pages/innerMod.tsx
@@ -16,12 +16,15 @@ import '../styles/tabs.css'
 import '../styles/tags.css'
 import '../styles/write.css'
 import { ModDetails } from '../types'
-import { extractModData } from '../utils'
+import { extractModData, log, LogType } from '../utils'
 import { formatDate } from 'date-fns'
+import { LoadingSpinner } from '../components/LoadingSpinner'
+import { toast } from 'react-toastify'
 
 export const InnerModPage = () => {
   const { nevent } = useParams()
   const [modData, setModData] = useState<ModDetails>()
+  const [isFetching, setIsFetching] = useState(true)
 
   useDidMount(async () => {
     if (nevent) {
@@ -42,15 +45,22 @@ export const InnerModPage = () => {
       RelayController.getInstance()
         .fetchEvent(filter, relays)
         .then((event) => {
-          console.log('event :>> ', event)
-
           if (event) {
             const extracted = extractModData(event)
             setModData(extracted)
           }
         })
         .catch((err) => {
-          console.log('err :>> ', err)
+          log(
+            true,
+            LogType.Error,
+            'An error occurred in fetching mod details from relays',
+            err
+          )
+          toast.error('An error occurred in fetching mod details from relays')
+        })
+        .finally(() => {
+          setIsFetching(false)
         })
     }
   })
@@ -74,6 +84,9 @@ export const InnerModPage = () => {
     }
   }
 
+  if (isFetching)
+    return <LoadingSpinner desc='Fetching mod details from relays' />
+
   if (!modData) return null
 
   return (
diff --git a/src/styles/loadingSpinner.module.scss b/src/styles/loadingSpinner.module.scss
new file mode 100644
index 0000000..b83b70b
--- /dev/null
+++ b/src/styles/loadingSpinner.module.scss
@@ -0,0 +1,37 @@
+.loadingSpinnerOverlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  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;
+  }
+
+  .loadingSpinner {
+    border: 4px solid #f3f3f3;
+    border-top: 4px solid #3498db;
+    border-radius: 50%;
+    width: 40px;
+    height: 40px;
+    animation: spin 1s linear infinite;
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}