style: update skelaton

src/module/calender/ui/date_event_division.tsx

@@ -1,5 +1,5 @@
 import { WARNA } from '@/module/_global';
-import { Box, Divider, Group, Indicator, Text } from '@mantine/core';
+import { Box, Divider, Group, Indicator, Skeleton, Text } from '@mantine/core';
 import { DatePicker, DatePickerProps } from '@mantine/dates';
 import { useParams, useRouter } from 'next/navigation';
 import React, { useState } from 'react';
@@ -7,6 +7,7 @@ import { funGetAllCalender } from '../lib/api_calender';
 import { useSetState, useShallowEffect } from '@mantine/hooks';
 import { IDataCalender } from '../lib/type_calender';
 import moment from 'moment';
+import _ from 'lodash';
 
 
 export default function DateEventDivision() {
@@ -14,13 +15,18 @@ export default function DateEventDivision() {
   const router = useRouter()
   const param = useParams<{ id: string, detail: string }>()
   const [isDate, setDate] = useSetState<any>(moment().format('YYYY-MM-DD'))
+  const [loading, setLoading] = useState(true)
 
   const getData = async (tgl: any) => {
     try {
+      setLoading(true)
       const response = await funGetAllCalender('?division=' + param.id + '&date=' + tgl)
       setData(response.data)
+      setLoading(false)
     } catch (error) {
       console.log(error)
+    } finally {
+      setLoading(false)
     }
   }
 
@@ -60,30 +66,42 @@ export default function DateEventDivision() {
         <Text mb={10} mt={20} fw={"bold"}>
           Event
         </Text>
-        {isData.length > 0 ? (
-          isData.map((event, index) => {
-            const bgColor = ['#D8D8F1', '#FED6C5'][index % 2]
-            const colorDivider = ['#535FCA', '#A7A7A7'][index % 2]
-            return (
-              <Box key={event.id} mt={10}>
-                <Box onClick={() => router.push(`/division/${param.id}/calender/${event.id}`)} bg={bgColor} pl={15} p={10} style={{
-                  borderRadius: 10
-                }} h={113}>
-                  <Group>
-                    <Divider h={92} size="lg" orientation="vertical" color={colorDivider} />
-                    <Box>
-                      <Text>{event.timeStart} - {event.timeEnd}</Text>
-                      <Text fw={"bold"}>{event.title}</Text>
-                      <Text>Dibuat oleh : {event.user_name}</Text>
-                    </Box>
-                  </Group>
+        {loading ? 
+          Array(6)
+          .fill(null)
+          .map((_, i) => (
+            <Box key={i} mb={10}>
+              <Skeleton height={100} width={"100%"} radius={"md"} />
+            </Box>
+          ))
+          :
+          _.isEmpty(isData)
+            ?
+            <Box style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '20vh' }}>
+              <Text c="dimmed" ta={"center"} fs={"italic"}>Tidak ada event</Text>
+            </Box>
+            :
+            isData.map((event, index) => {
+              const bgColor = ['#D8D8F1', '#FED6C5'][index % 2]
+              const colorDivider = ['#535FCA', '#A7A7A7'][index % 2]
+              return (
+                <Box key={event.id} mt={10}>
+                  <Box onClick={() => router.push(`/division/${param.id}/calender/${event.id}`)} bg={bgColor} pl={15} p={10} style={{
+                    borderRadius: 10
+                  }} h={113}>
+                    <Group>
+                      <Divider h={92} size="lg" orientation="vertical" color={colorDivider} />
+                      <Box>
+                        <Text>{event.timeStart} - {event.timeEnd}</Text>
+                        <Text fw={"bold"}>{event.title}</Text>
+                        <Text>Dibuat oleh : {event.user_name}</Text>
+                      </Box>
+                    </Group>
+                  </Box>
                 </Box>
-              </Box>
-            )
-          })
-        ) : (
-          <Text c={WARNA.biruTua}>Tidak ada event</Text>
-        )}
+              )
+            })
+        }
       </Box>
     </Box>
   );