Merge pull request #3378 from ever-co/feat/timesheet-skeleton-ui

Feat(timesheet): Add Skeleton Loader For Improved UI Feedback
ever-co · Nov 28, 2024 · a3ec43d · a3ec43d
2 parents e5617bc + 74b7fb3
commit a3ec43d
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 2 deletions.
diff --git 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
@@ -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