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 (
+
+ )
+}
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 && }
{
const { nevent } = useParams()
const [modData, setModData] = useState()
+ 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
+
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);
+ }
+}