From 74b7fb3b5001818e5e8892340dce5d4fe2673f81 Mon Sep 17 00:00:00 2001
From: Innocent-akim <gentilakili98@gmail.com>
Date: Thu, 28 Nov 2024 21:44:49 +0200
Subject: [PATCH] feat(timesheet): add skeleton loader for improved UI feedback

---
 .../[memberId]/components/TimesheetView.tsx   |  7 ++--
 .../shared/skeleton/TimesheetSkeleton.tsx     | 32 +++++++++++++++++++
 2 files changed, 37 insertions(+), 2 deletions(-)
 create mode 100644 apps/web/components/shared/skeleton/TimesheetSkeleton.tsx

diff --git a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetView.tsx b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetView.tsx
index 4fd852b36..ee72a1f79 100644
--- a/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetView.tsx
+++ b/apps/web/app/[locale]/timesheet/[memberId]/components/TimesheetView.tsx
@@ -1,4 +1,5 @@
 import { GroupedTimesheet } from '@/app/hooks/features/useTimesheet';
+import TimesheetSkeleton from '@components/shared/skeleton/TimesheetSkeleton';
 import { DataTableTimeSheet } from 'lib/features/integrations/calendar';
 import { useTranslations } from 'next-intl';
 
@@ -7,8 +8,10 @@ export function TimesheetView({ data, loading }: { data?: GroupedTimesheet[]; lo
 
 	if (loading || !data) {
 		return (
-			<div className="grow h-full w-full bg-[#FFFFFF] dark:bg-dark--theme flex items-center justify-center">
-				<p>{t('pages.timesheet.LOADING')}</p>
+			<div className="grow h-full w-full bg-[#FFFFFF] dark:bg-dark--theme">
+				{Array.from({ length: 10 }).map((_, index) => (
+					<TimesheetSkeleton key={index} />
+				))}
 			</div>
 		);
 	}
diff --git a/apps/web/components/shared/skeleton/TimesheetSkeleton.tsx b/apps/web/components/shared/skeleton/TimesheetSkeleton.tsx
new file mode 100644
index 000000000..e0462c314
--- /dev/null
+++ b/apps/web/components/shared/skeleton/TimesheetSkeleton.tsx
@@ -0,0 +1,32 @@
+import React from 'react'
+import Skeleton from './Skeleton'
+import { clsxm } from '@/app/utils'
+
+function TimesheetSkeleton() {
+    return (
+        <div className={clsxm(
+            'flex justify-between items-center w-full',
+            'bg-[#ffffffcc] dark:bg-dark--theme rounded-md border',
+            'border-gray-100 dark:border-gray-700 text-[#71717A] font-medium my-2 p-2 h-[50px] rounded-sm gap-x-2  px-2 py-2'
+        )}>
+            <div className='flex flex-col w-full gap-4'>
+                <div className='flex items-center justify-between  gap-4'>
+                    <Skeleton width={80} borderRadius={4} height={10} className="dark:bg-[#272930]" />
+                    <Skeleton width={80} borderRadius={4} height={10} className="dark:bg-[#272930]" />
+                </div>
+                <div className='flex items-center justify-between gap-4 w-full'>
+                    <div className='flex items-center gap-2'>
+                        <Skeleton width={20} borderRadius={4} height={20} className="dark:bg-[#272930]" />
+                        <Skeleton width={200} borderRadius={4} height={20} className="dark:bg-[#272930]" />
+                        <Skeleton width={40} borderRadius={4} height={20} className="dark:bg-[#272930]" />
+                    </div>
+                    <div className='flex items-center gap-2'>
+                        <Skeleton width={200} borderRadius={4} height={20} className="dark:bg-[#272930]" />
+                        <Skeleton width={200} borderRadius={4} height={20} className="dark:bg-[#272930]" />
+                    </div>
+                </div>
+            </div>
+        </div>
+    )
+}
+export default TimesheetSkeleton