refactor: use skeleton as loading indication

AlasDiablo · Jul 19, 2024 · 01b6852 · 01b6852
1 parent 632f4a3
commit 01b6852
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 15 deletions.
diff --git a/tdm-admin/src/app/page/Database.tsx b/tdm-admin/src/app/page/Database.tsx
@@ -23,13 +23,6 @@ const DatabaseSkeleton = () => {
     return (
         <Paper>
             <Box sx={{ padding: '12px' }}>
-                <Skeleton
-                    component="div"
-                    sx={{ width: '100%', marginBottom: '12px' }}
-                    animation="wave"
-                    variant="rounded"
-                    height={40}
-                />
                 <Skeleton component="div" sx={{ width: '100%' }} animation="wave" variant="rounded" height={600} />
                 <Skeleton
                     sx={{

diff --git a/tdm-admin/src/app/page/File.tsx b/tdm-admin/src/app/page/File.tsx
@@ -2,8 +2,8 @@ import FileTable from '~/app/components/file/FileTable';
 import { files } from '~/app/services/admin/files';
 
 import Box from '@mui/material/Box';
-import LinearProgress from '@mui/material/LinearProgress';
 import Paper from '@mui/material/Paper';
+import Skeleton from '@mui/material/Skeleton';
 import Tab from '@mui/material/Tab';
 import Tabs from '@mui/material/Tabs';
 import { useQuery } from '@tanstack/react-query';
@@ -41,7 +41,7 @@ const File = () => {
             </Box>
             <Box sx={{ padding: '8px' }}>
                 {isLoading || isFetching ? (
-                    <LinearProgress />
+                    <Skeleton animation="wave" variant="rounded" height={400} />
                 ) : (
                     <>
                         <FileTable currentTable={value} tableIndex={0} rows={data?.upload ?? []} />

diff --git a/tdm-admin/src/app/page/Log.tsx b/tdm-admin/src/app/page/Log.tsx
@@ -2,10 +2,10 @@ import { logList, logs } from '~/app/services/admin/log';
 
 import Box from '@mui/material/Box';
 import FormControlLabel from '@mui/material/FormControlLabel';
-import LinearProgress from '@mui/material/LinearProgress';
 import Paper from '@mui/material/Paper';
 import Radio from '@mui/material/Radio';
 import RadioGroup from '@mui/material/RadioGroup';
+import Skeleton from '@mui/material/Skeleton';
 import TextField from '@mui/material/TextField';
 import Typography from '@mui/material/Typography';
 import { useQuery } from '@tanstack/react-query';
@@ -50,7 +50,12 @@ const Log = () => {
     };
 
     if (isListFetching || isListLoading) {
-        return <LinearProgress />;
+        return (
+            <Box sx={{ display: 'flex', gap: '12px', flexDirection: 'column' }}>
+                <Skeleton animation="wave" variant="rounded" height={200} />
+                <Skeleton animation="wave" variant="rounded" height={500} />
+            </Box>
+        );
     }
 
     if (!list) {
@@ -78,9 +83,16 @@ const Log = () => {
             </Paper>
             <Paper sx={{ padding: '12px' }} elevation={0}>
                 {isLogDataFetching || isLogDataLoading ? (
-                    <LinearProgress />
+                    <Skeleton animation="wave" variant="rounded" height={500} />
                 ) : (
-                    <TextField value={logData} disabled fullWidth multiline size="small" />
+                    <TextField
+                        inputProps={{ style: { minHeight: '500px' } }}
+                        value={logData}
+                        disabled
+                        fullWidth
+                        multiline
+                        size="small"
+                    />
                 )}
             </Paper>
         </Box>

diff --git a/tdm-admin/src/app/page/Setting.tsx b/tdm-admin/src/app/page/Setting.tsx
@@ -8,15 +8,38 @@ import { Button, Snackbar } from '@mui/material';
 import Alert from '@mui/material/Alert';
 import Box from '@mui/material/Box';
 import Divider from '@mui/material/Divider';
-import LinearProgress from '@mui/material/LinearProgress';
 import Paper from '@mui/material/Paper';
+import Skeleton from '@mui/material/Skeleton';
 import Stack from '@mui/material/Stack';
 import { useQuery } from '@tanstack/react-query';
 import { isEqual, cloneDeep } from 'lodash';
 import { useEffect, useState } from 'react';
 
 import type { Config, ConfigEnrichment, ConfigWrapper } from '~/app/util/type';
 
+const SettingSkeleton = () => {
+    return (
+        <Box id="setting-container">
+            <Skeleton id="setting-action" height={36.5} animation="wave" variant="rounded" />
+            <Divider />
+            <Stack
+                divider={<Divider orientation="vertical" flexItem />}
+                direction="row"
+                justifyContent="center"
+                alignItems="flex-start"
+                spacing={2}
+            >
+                <Paper className="setting-block" elevation={0}>
+                    <Skeleton animation="wave" variant="rounded" height={500} />
+                </Paper>
+                <Paper className="setting-block" elevation={0}>
+                    <Skeleton animation="wave" variant="rounded" height={500} />
+                </Paper>
+            </Stack>
+        </Box>
+    );
+};
+
 const Setting = () => {
     const [localConfig, setLocalConfig] = useState<Config | undefined>(undefined);
     const [configUpdateIndex, setConfigUpdateIndex] = useState<number>(0);
@@ -83,7 +106,7 @@ const Setting = () => {
     };
 
     if (isLoading || isFetching) {
-        return <LinearProgress />;
+        return <SettingSkeleton />;
     }
 
     if (!data || !localConfig) {