update article page loading

client/src/components/utils/ArticleLoading.jsx

@@ -1 +1,48 @@
-export default function ArticleLoading() {}
+import { Box, Grid, GridItem, Heading, Skeleton, Text } from '@chakra-ui/react';
+
+export default function ArticleLoading() {
+  return (
+    <Grid
+      my={4}
+      templateColumns={{ sm: 'repeat(2, 1fr)', lg: 'repeat(3, 1fr)' }}
+      gap={4}
+    >
+      {[...Array(6)].map((_, index) => (
+        <GridItem key={index}>
+          <Box as="article" p="5" borderWidth="1px" rounded="md">
+            <Skeleton>
+              <Text fontSize={{ base: 'xs', xs: 'sm' }}>
+                odio euismod lacinia at quis risus sed
+              </Text>
+            </Skeleton>
+            <Skeleton>
+              <Text fontSize={'sm'}>lorem</Text>
+            </Skeleton>
+            <Skeleton>
+              <Heading noOfLines={2} size={{ base: 'xs', xs: 'md' }} my="2">
+                <Text>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
+                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+                  Ultrices neque ornare aenean euismod elementum nisi quis
+                  eleifend.
+                </Text>
+              </Heading>
+            </Skeleton>
+            <Skeleton>
+              <Text noOfLines={7} textAlign={'justify'}>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua. Id
+                aliquet risus feugiat in. Tellus in hac habitasse platea
+                dictumst vestibulum rhoncus est pellentesque. Mauris rhoncus
+                aenean vel elit scelerisque mauris pellentesque pulvinar.
+                Suspendisse sed nisi lacus sed. Nullam ac tortor vitae purus
+                faucibus ornare suspendisse. Mus mauris vitae ultricies leo
+                integer malesuada nunc vel.
+              </Text>
+            </Skeleton>
+          </Box>
+        </GridItem>
+      ))}
+    </Grid>
+  );
+}

client/src/pages/ArticlePage.jsx

@@ -1,6 +1,6 @@
-import Loading from "@/components/utils/Loading";
-import NotFound from "@/components/utils/NotFound";
-import { getArticle } from "@/utils/call-api";
+import ArticleLoading from '@/components/utils/ArticleLoading';
+import NotFound from '@/components/utils/NotFound';
+import { getArticle } from '@/utils/call-api';
 import {
   Box,
   Grid,
@@ -10,47 +10,54 @@ import {
   LinkOverlay,
   Tag,
   Text,
-} from "@chakra-ui/react";
-import { useQuery } from "@tanstack/react-query";
+} from '@chakra-ui/react';
+import { useQuery } from '@tanstack/react-query';
 
 export default function ArticlePage() {
   const { data, error, isLoading, isError } = useQuery({
-    queryKey: ["article"],
+    queryKey: ['article'],
     queryFn: async () => await getArticle(),
   });
 
-  if (isLoading) return <Loading />;
   if (isError) return <NotFound error={error} />;
 
-  return (
-    <Box py={8} fontSize={{ base: "xs", xs: "sm", md: "md" }}>
-      <Heading textAlign={"center"} size={"md"}>
-        Artikel Terkait
-      </Heading>
+  const DataLoaded = () => {
+    return isLoading ? (
+      <ArticleLoading />
+    ) : (
       <Grid
         my={4}
-        templateColumns={{ sm: "repeat(2, 1fr)", lg: "repeat(3, 1fr)" }}
+        templateColumns={{ sm: 'repeat(2, 1fr)', lg: 'repeat(3, 1fr)' }}
         gap={4}
       >
         {data.map((data) => (
           <GridItem key={data._id}>
             <LinkBox as="article" p="5" borderWidth="1px" rounded="md">
-              <Text fontSize={{ base: "xs", xs: "sm" }}>{data.author}</Text>
-              <Tag colorScheme="teal" size={"sm"}>
+              <Text fontSize={{ base: 'xs', xs: 'sm' }}>{data.author}</Text>
+              <Tag colorScheme="teal" size={'sm'}>
                 {data.category} / {data.year}
               </Tag>
-              <Heading noOfLines={2} size={{ base: "xs", xs: "md" }} my="2">
+              <Heading noOfLines={2} size={{ base: 'xs', xs: 'md' }} my="2">
                 <LinkOverlay isExternal href={data.url}>
                   {data.title}
                 </LinkOverlay>
               </Heading>
-              <Text noOfLines={7} textAlign={"justify"}>
+              <Text noOfLines={7} textAlign={'justify'}>
                 {data.description}
               </Text>
             </LinkBox>
           </GridItem>
         ))}
       </Grid>
+    );
+  };
+
+  return (
+    <Box py={8} fontSize={{ base: 'xs', xs: 'sm', md: 'md' }}>
+      <Heading textAlign={'center'} size={'md'}>
+        Artikel Terkait
+      </Heading>
+      {DataLoaded()}
     </Box>
   );
 }