feat: add loading spinner while fetching mod details

This commit is contained in:
daniyal 2024-07-25 21:12:12 +05:00
parent 70db95778c
commit 0aa8b9a38f
4 changed files with 74 additions and 4 deletions

View File

@ -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>
)
}

View File

@ -20,6 +20,7 @@ import { RelayController } from '../controllers'
import { useNavigate } from 'react-router-dom' import { useNavigate } from 'react-router-dom'
import { getModsInnerPageRoute } from '../routes' import { getModsInnerPageRoute } from '../routes'
import { DownloadUrl, FormState } from '../types' import { DownloadUrl, FormState } from '../types'
import { LoadingSpinner } from './LoadingSpinner'
interface FormErrors { interface FormErrors {
game?: string game?: string
@ -348,6 +349,7 @@ export const ModForm = () => {
return ( return (
<> <>
{isPublishing && <LoadingSpinner desc='Publishing mod to relays' />}
<GameDropdown <GameDropdown
options={gameOptions} options={gameOptions}
selected={formState.game} selected={formState.game}

View File

@ -16,12 +16,15 @@ import '../styles/tabs.css'
import '../styles/tags.css' import '../styles/tags.css'
import '../styles/write.css' import '../styles/write.css'
import { ModDetails } from '../types' import { ModDetails } from '../types'
import { extractModData } from '../utils' import { extractModData, log, LogType } from '../utils'
import { formatDate } from 'date-fns' import { formatDate } from 'date-fns'
import { LoadingSpinner } from '../components/LoadingSpinner'
import { toast } from 'react-toastify'
export const InnerModPage = () => { export const InnerModPage = () => {
const { nevent } = useParams() const { nevent } = useParams()
const [modData, setModData] = useState<ModDetails>() const [modData, setModData] = useState<ModDetails>()
const [isFetching, setIsFetching] = useState(true)
useDidMount(async () => { useDidMount(async () => {
if (nevent) { if (nevent) {
@ -42,15 +45,22 @@ export const InnerModPage = () => {
RelayController.getInstance() RelayController.getInstance()
.fetchEvent(filter, relays) .fetchEvent(filter, relays)
.then((event) => { .then((event) => {
console.log('event :>> ', event)
if (event) { if (event) {
const extracted = extractModData(event) const extracted = extractModData(event)
setModData(extracted) setModData(extracted)
} }
}) })
.catch((err) => { .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 if (!modData) return null
return ( return (

View File

@ -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);
}
}