update admin loading page

Z4nR · Jan 2, 2024 · c94b6a0 · c94b6a0
1 parent 59ae0bc
commit c94b6a0
Show file tree

Hide file tree

Showing 2 changed files with 111 additions and 37 deletions.
diff --git a/client/src/components/utils/AdminLoading.jsx b/client/src/components/utils/AdminLoading.jsx
@@ -1 +1,67 @@
-export default function AdminLoading() {}
+import {
+  Skeleton,
+  Table,
+  TableContainer,
+  Tbody,
+  Td,
+  Th,
+  Thead,
+  Tr,
+} from '@chakra-ui/react';
+
+export default function AdminLoading() {
+  return (
+    <TableContainer
+      mt={6}
+      mb={2}
+      minHeight={{ base: '68vh', xs: '75vh', md: '58vh' }}
+    >
+      <Table size={'sm'}>
+        <Thead>
+          <Tr>
+            <Th textAlign={{ md: 'center' }}>#</Th>
+            <Th textAlign={{ md: 'center' }}>Nama</Th>
+            <Th textAlign={{ md: 'center' }}>Skor Tes</Th>
+            <Th textAlign={{ md: 'center' }}>Waktu</Th>
+            <Th textAlign={{ md: 'center' }}>Status</Th>
+            <Th textAlign={{ md: 'center' }}>Perangkat</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {[...Array(10)].map((_, index) => (
+            <Tr key={index}>
+              <Td textAlign={{ md: 'center' }}>
+                <p>{index + 1}</p>
+              </Td>
+              <Td textAlign={{ md: 'center' }}>
+                <Skeleton>
+                  <p>Lorem Ipsum</p>
+                </Skeleton>
+              </Td>
+              <Td textAlign={'center'}>
+                <Skeleton>
+                  <p>Lorem Ipsum</p>
+                </Skeleton>
+              </Td>
+              <Td textAlign={'center'}>
+                <Skeleton>
+                  <p>Lorem Ipsum</p>
+                </Skeleton>
+              </Td>
+              <Td textAlign={'center'}>
+                <Skeleton>
+                  <p>Lorem Ipsum</p>
+                </Skeleton>
+              </Td>
+              <Td textAlign={'center'}>
+                <Skeleton>
+                  <p>Lorem Ipsum</p>
+                </Skeleton>
+              </Td>
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </TableContainer>
+  );
+}
diff --git a/client/src/pages/AdminPage.jsx b/client/src/pages/AdminPage.jsx
@@ -1,4 +1,4 @@
-import Loading from '@/components/utils/Loading';
+import AdminLoading from '@/components/utils/AdminLoading';
 import NotFound from '@/components/utils/NotFound';
 import { deleteGroupById, getClientData, getGroupById } from '@/utils/call-api';
 import { useDownloadData, useToastMsg } from '@/utils/customHooks';
@@ -16,6 +16,7 @@ import {
   Button,
   Heading,
   IconButton,
+  Skeleton,
   Table,
   TableContainer,
   Tbody,
@@ -69,7 +70,6 @@ export default function AdminPage() {
 
   const [csv] = useDownloadData(client.data);
 
-  if (group.isLoading || client.isLoading) return <Loading />;
   if (group.isError || client.isError)
     return <NotFound error={group.error || client.error} />;
 
@@ -107,44 +107,17 @@ export default function AdminPage() {
         </AlertDialogContent>
       </AlertDialog>
       <Box textAlign={'center'} fontSize={{ base: 'xs', xs: 'sm', md: 'md' }}>
-        <Heading mt={{ base: 4, md: 2 }} size={{ base: 'sm', md: 'md' }}>
-          {group.data.name} ({group.data.initial})
-        </Heading>
-        <Text>Dibuat pada {group.data.date}</Text>
+        <Skeleton isLoaded={!group.isLoading} fadeDuration={1}>
+          <Heading mt={{ base: 4, md: 2 }} size={{ base: 'sm', md: 'md' }}>
+            {group.data?.name} ({group.data?.initial})
+          </Heading>
+          <Text>Dibuat pada {group.data?.date}</Text>
+        </Skeleton>
         <Text mt={2} color={'gray.500'} fontSize={'xs'}>
           Data akan diperbarui otomatis setiap 60 detik
         </Text>
       </Box>
-      <TableContainer
-        mt={6}
-        mb={2}
-        minHeight={{ base: '68vh', xs: '75vh', md: '58vh' }}
-      >
-        <Table size={'sm'}>
-          <Thead>
-            <Tr>
-              <Th textAlign={{ md: 'center' }}>#</Th>
-              <Th textAlign={{ md: 'center' }}>Nama</Th>
-              <Th textAlign={{ md: 'center' }}>Skor Tes</Th>
-              <Th textAlign={{ md: 'center' }}>Waktu</Th>
-              <Th textAlign={{ md: 'center' }}>Status</Th>
-              <Th textAlign={{ md: 'center' }}>Perangkat</Th>
-            </Tr>
-          </Thead>
-          <Tbody>
-            {client.data.map((data, index) => (
-              <Tr key={data._id}>
-                <Td textAlign={{ md: 'center' }}>{index + 1}</Td>
-                <Td textAlign={{ md: 'center' }}>{data.name}</Td>
-                <Td textAlign={'center'}>{data.totalErrorScore}</Td>
-                <Td textAlign={'center'}>{data.time}</Td>
-                <Td textAlign={'center'}>{data.status}</Td>
-                <Td textAlign={'center'}>{data.device}</Td>
-              </Tr>
-            ))}
-          </Tbody>
-        </Table>
-      </TableContainer>
+      {client.isLoading ? <AdminLoading /> : <AdminTable client={client} />}
       <VStack
         zIndex={10}
         position={'absolute'}
@@ -196,3 +169,38 @@ export default function AdminPage() {
     </Box>
   );
 }
+
+function AdminTable({ client }) {
+  return (
+    <TableContainer
+      mt={6}
+      mb={2}
+      minHeight={{ base: '68vh', xs: '75vh', md: '58vh' }}
+    >
+      <Table size={'sm'}>
+        <Thead>
+          <Tr>
+            <Th textAlign={{ md: 'center' }}>#</Th>
+            <Th textAlign={{ md: 'center' }}>Nama</Th>
+            <Th textAlign={{ md: 'center' }}>Skor Tes</Th>
+            <Th textAlign={{ md: 'center' }}>Waktu</Th>
+            <Th textAlign={{ md: 'center' }}>Status</Th>
+            <Th textAlign={{ md: 'center' }}>Perangkat</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {client.data.map((data, index) => (
+            <Tr key={data._id}>
+              <Td textAlign={{ md: 'center' }}>{index + 1}</Td>
+              <Td textAlign={{ md: 'center' }}>{data.name}</Td>
+              <Td textAlign={'center'}>{data.totalErrorScore}</Td>
+              <Td textAlign={'center'}>{data.time}</Td>
+              <Td textAlign={'center'}>{data.status}</Td>
+              <Td textAlign={'center'}>{data.device}</Td>
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </TableContainer>
+  );
+}