feat: add loading spinner while fetching mod details
This commit is contained in:
parent
70db95778c
commit
0aa8b9a38f
18
src/components/LoadingSpinner/index.tsx
Normal file
18
src/components/LoadingSpinner/index.tsx
Normal 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>
|
||||||
|
)
|
||||||
|
}
|
@ -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}
|
||||||
|
@ -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 (
|
||||||
|
37
src/styles/loadingSpinner.module.scss
Normal file
37
src/styles/loadingSpinner.module.scss
Normal 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);
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user