refactor(content): add small loading spinner to content sections
Closes #141
This commit is contained in:
parent
6f7d4c9dcf
commit
f8533b0ffd
@ -1,7 +1,5 @@
|
|||||||
import { Close } from '@mui/icons-material'
|
import { Close } from '@mui/icons-material'
|
||||||
import {
|
import {
|
||||||
Box,
|
|
||||||
CircularProgress,
|
|
||||||
FormControl,
|
FormControl,
|
||||||
InputLabel,
|
InputLabel,
|
||||||
ListItemIcon,
|
ListItemIcon,
|
||||||
@ -22,6 +20,7 @@ import { ExtensionFileBox } from '../ExtensionFileBox'
|
|||||||
import { inPx } from '../../utils/pdf'
|
import { inPx } from '../../utils/pdf'
|
||||||
import { useScale } from '../../hooks/useScale'
|
import { useScale } from '../../hooks/useScale'
|
||||||
import { AvatarIconButton } from '../UserAvatarIconButton'
|
import { AvatarIconButton } from '../UserAvatarIconButton'
|
||||||
|
import { LoadingSpinner } from '../LoadingSpinner'
|
||||||
|
|
||||||
PDFJS.GlobalWorkerOptions.workerSrc = new URL(
|
PDFJS.GlobalWorkerOptions.workerSrc = new URL(
|
||||||
'pdfjs-dist/build/pdf.worker.min.mjs',
|
'pdfjs-dist/build/pdf.worker.min.mjs',
|
||||||
@ -530,11 +529,7 @@ export const DrawPDFFields = (props: Props) => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (parsingPdf) {
|
if (parsingPdf) {
|
||||||
return (
|
return <LoadingSpinner variant="small" />
|
||||||
<Box sx={{ width: '100%', textAlign: 'center' }}>
|
|
||||||
<CircularProgress />
|
|
||||||
</Box>
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!sigitFiles.length) {
|
if (!sigitFiles.length) {
|
||||||
|
@ -1,12 +1,24 @@
|
|||||||
import styles from './style.module.scss'
|
import styles from './style.module.scss'
|
||||||
|
|
||||||
interface Props {
|
interface Props {
|
||||||
desc: string
|
desc?: string
|
||||||
|
variant?: 'small' | 'default'
|
||||||
}
|
}
|
||||||
|
|
||||||
export const LoadingSpinner = (props: Props) => {
|
export const LoadingSpinner = (props: Props) => {
|
||||||
const { desc } = props
|
const { desc, variant = 'default' } = props
|
||||||
|
|
||||||
|
switch (variant) {
|
||||||
|
case 'small':
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
className={`${styles.loadingSpinnerContainer} ${styles.withHeight}`}
|
||||||
|
>
|
||||||
|
<div className={styles.loadingSpinner}></div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
default:
|
||||||
return (
|
return (
|
||||||
<div className={styles.loadingSpinnerOverlay}>
|
<div className={styles.loadingSpinnerOverlay}>
|
||||||
<div className={styles.loadingSpinnerContainer}>
|
<div className={styles.loadingSpinnerContainer}>
|
||||||
@ -15,4 +27,5 @@ export const LoadingSpinner = (props: Props) => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -11,20 +11,24 @@
|
|||||||
justify-content: center;
|
justify-content: center;
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
z-index: 9999;
|
z-index: 9999;
|
||||||
|
}
|
||||||
|
|
||||||
.loadingSpinnerContainer {
|
.loadingSpinnerContainer {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
|
||||||
|
|
||||||
.loadingSpinner {
|
&.withHeight {
|
||||||
|
min-height: 250px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.loadingSpinner {
|
||||||
background: url('/favicon.png') no-repeat center / cover;
|
background: url('/favicon.png') no-repeat center / cover;
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
animation: spin 1s linear infinite;
|
animation: spin 1s linear infinite;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.loadingSpinnerDesc {
|
.loadingSpinnerDesc {
|
||||||
|
@ -4,6 +4,7 @@ import { CurrentUserFile } from '../../types/file.ts'
|
|||||||
import { useEffect, useRef } from 'react'
|
import { useEffect, useRef } from 'react'
|
||||||
import { FileDivider } from '../FileDivider.tsx'
|
import { FileDivider } from '../FileDivider.tsx'
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
import { LoadingSpinner } from '../LoadingSpinner/index.tsx'
|
||||||
|
|
||||||
interface PdfViewProps {
|
interface PdfViewProps {
|
||||||
currentFile: CurrentUserFile | null
|
currentFile: CurrentUserFile | null
|
||||||
@ -48,7 +49,8 @@ const PdfView = ({
|
|||||||
index !== files.length - 1
|
index !== files.length - 1
|
||||||
return (
|
return (
|
||||||
<div className="files-wrapper">
|
<div className="files-wrapper">
|
||||||
{files.map((currentUserFile, index, arr) => {
|
{files.length > 0 ? (
|
||||||
|
files.map((currentUserFile, index, arr) => {
|
||||||
const { hash, file, id } = currentUserFile
|
const { hash, file, id } = currentUserFile
|
||||||
|
|
||||||
if (!hash) return
|
if (!hash) return
|
||||||
@ -71,7 +73,10 @@ const PdfView = ({
|
|||||||
{isNotLastPdfFile(index, arr) && <FileDivider />}
|
{isNotLastPdfFile(index, arr) && <FileDivider />}
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
)
|
)
|
||||||
})}
|
})
|
||||||
|
) : (
|
||||||
|
<LoadingSpinner variant="small" />
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
@ -79,7 +79,8 @@ const SlimPdfView = ({
|
|||||||
}, [currentFile])
|
}, [currentFile])
|
||||||
return (
|
return (
|
||||||
<div className="files-wrapper">
|
<div className="files-wrapper">
|
||||||
{files.map((currentUserFile, i) => {
|
{files.length > 0 ? (
|
||||||
|
files.map((currentUserFile, i) => {
|
||||||
const { hash, file, id } = currentUserFile
|
const { hash, file, id } = currentUserFile
|
||||||
const signatureEvents = Object.keys(parsedSignatureEvents)
|
const signatureEvents = Object.keys(parsedSignatureEvents)
|
||||||
if (!hash) return
|
if (!hash) return
|
||||||
@ -120,7 +121,9 @@ const SlimPdfView = ({
|
|||||||
left: inPx(from(page.width, m.location.left)),
|
left: inPx(from(page.width, m.location.left)),
|
||||||
top: inPx(from(page.width, m.location.top)),
|
top: inPx(from(page.width, m.location.top)),
|
||||||
width: inPx(from(page.width, m.location.width)),
|
width: inPx(from(page.width, m.location.width)),
|
||||||
height: inPx(from(page.width, m.location.height)),
|
height: inPx(
|
||||||
|
from(page.width, m.location.height)
|
||||||
|
),
|
||||||
fontFamily: FONT_TYPE,
|
fontFamily: FONT_TYPE,
|
||||||
fontSize: inPx(from(page.width, FONT_SIZE))
|
fontSize: inPx(from(page.width, FONT_SIZE))
|
||||||
}}
|
}}
|
||||||
@ -146,7 +149,10 @@ const SlimPdfView = ({
|
|||||||
{i < files.length - 1 && <FileDivider />}
|
{i < files.length - 1 && <FileDivider />}
|
||||||
</React.Fragment>
|
</React.Fragment>
|
||||||
)
|
)
|
||||||
})}
|
})
|
||||||
|
) : (
|
||||||
|
<LoadingSpinner variant="small" />
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user