feat: skeleton components

nitkkr-dev · Sep 3, 2024 · 2d7dc7d · 2d7dc7d
1 parent c4805a6
commit 2d7dc7d
Show file tree

Hide file tree

Showing 14 changed files with 254 additions and 66 deletions.
diff --git a/app/[locale]/academics/curricula/page.tsx b/app/[locale]/academics/curricula/page.tsx
@@ -5,8 +5,8 @@ import { FaExternalLinkAlt } from 'react-icons/fa';
 
 import { Button } from '~/components/buttons';
 import Heading from '~/components/heading';
-import Loading from '~/components/loading';
 import { PaginationWithLogic } from '~/components/pagination';
+import { CurriculaSkeleton } from '~/components/skeletons';
 import {
   Table,
   TableBody,
@@ -43,25 +43,25 @@ export default async function Curricula({
       <search className="container">
         {/* FIXME: Add input and filters here */}
       </search>
-
+      {/* FIXME: Make Tables mobile friendly by adding horizontal scrolling*/}
       <main className="container">
-        <Suspense fallback={<Loading />}>
-          <Table>
-            <TableHeader>
-              <TableRow>
-                <TableHead>{text.code}</TableHead>
-                <TableHead>{text.title}</TableHead>
-                <TableHead>{text.major}</TableHead>
-                <TableHead>{text.credits}</TableHead>
-                <TableHead>{text.totalCredits}</TableHead>
-                <TableHead className="text-center">{text.syllabus}</TableHead>
-              </TableRow>
-            </TableHeader>
-            <TableBody>
+        <Table>
+          <TableHeader>
+            <TableRow>
+              <TableHead>{text.code}</TableHead>
+              <TableHead>{text.title}</TableHead>
+              <TableHead>{text.major}</TableHead>
+              <TableHead>{text.credits}</TableHead>
+              <TableHead>{text.totalCredits}</TableHead>
+              <TableHead className="text-center">{text.syllabus}</TableHead>
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            <Suspense fallback={<CurriculaSkeleton />}>
               <Courses page={page} />
-            </TableBody>
-          </Table>
-        </Suspense>
+            </Suspense>
+          </TableBody>
+        </Table>
         <PaginationWithLogic
           currentPage={page}
           query={db.select({ count: count() }).from(courses)}

diff --git a/app/[locale]/faculty-and-staff/page.tsx b/app/[locale]/faculty-and-staff/page.tsx
@@ -14,6 +14,10 @@ import {
   SelectValue,
 } from '~/components/inputs';
 import Loading from '~/components/loading';
+import {
+  DepartmentCardSkeleton,
+  DepartmentNameSkeleton,
+} from '~/components/skeletons';
 import { NoResultStatus } from '~/components/status';
 import { getTranslations } from '~/i18n/translations';
 import { cn } from '~/lib/utils';
@@ -37,7 +41,7 @@ export default async function FacultyAndStaff({
           'border border-primary-700 bg-neutral-50'
         )}
       >
-        <Suspense fallback={<Loading className="max-xl:hidden" />}>
+        <Suspense fallback={<DepartmentNameSkeleton />}>
           <Departments department={departmentName} />
         </Suspense>
       </search>
@@ -59,7 +63,12 @@ export default async function FacultyAndStaff({
         </search>
 
         <ol className="space-y-4">
-          <Suspense fallback={<Loading />} key={`${query}-${departmentName}`}>
+          <Suspense
+            fallback={Array.from({ length: 10 }).map((_, index) => (
+              <DepartmentCardSkeleton key={index} />
+            ))}
+            key={`${query}-${departmentName}`}
+          >
             <FacultyList
               department={departmentName}
               deptartmentHeadText={text.departmentHead}

diff --git a/app/[locale]/institute/administration/(committees)/committee.tsx b/app/[locale]/institute/administration/(committees)/committee.tsx
@@ -5,8 +5,8 @@ import { FaExternalLinkAlt } from 'react-icons/fa';
 
 import { Button } from '~/components/buttons';
 import Heading from '~/components/heading';
-import Loading from '~/components/loading';
 import { PaginationWithLogic } from '~/components/pagination';
+import { MeetingsSkeleton } from '~/components/skeletons';
 import {
   Table,
   TableBody,
@@ -41,46 +41,51 @@ export default async function Committee({
       )}
 
       <Heading glyphDirection="ltr" heading="h2" text={text.members.title} />
-      <Suspense fallback={<Loading />}>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>{text.members.serial}</TableHead>
-              {type === 'governor' && (
-                <TableHead>{text.members.nomination}</TableHead>
-              )}
-              <TableHead>{text.members.name}</TableHead>
-              <TableHead>{text.members.servingAs}</TableHead>
-            </TableRow>
-          </TableHeader>
 
-          <TableBody>
-            <Members type={type} />
-          </TableBody>
-        </Table>
-      </Suspense>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>{text.members.serial}</TableHead>
+            {type === 'governor' && (
+              <TableHead>{text.members.nomination}</TableHead>
+            )}
+            <TableHead>{text.members.name}</TableHead>
+            <TableHead>{text.members.servingAs}</TableHead>
+          </TableRow>
+        </TableHeader>
+
+        <TableBody>
+          <Members type={type} />
+        </TableBody>
+      </Table>
 
       <Heading glyphDirection="ltr" heading="h2" text={text.meetings.title} />
-      <Suspense fallback={<Loading />}>
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>{text.meetings.serial}</TableHead>
-              <TableHead>{text.meetings.date}</TableHead>
-              <TableHead>{text.meetings.place}</TableHead>
-              <TableHead className="text-center">
-                {text.meetings.agenda}
-              </TableHead>
-              <TableHead className="text-center">
-                {text.meetings.minutes}
-              </TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead>{text.meetings.serial}</TableHead>
+            <TableHead>{text.meetings.date}</TableHead>
+            <TableHead>{text.meetings.place}</TableHead>
+            <TableHead className="text-center">
+              {text.meetings.agenda}
+            </TableHead>
+            <TableHead className="text-center">
+              {text.meetings.minutes}
+            </TableHead>
+          </TableRow>
+        </TableHeader>
+
+        <TableBody>
+          <Suspense
+            fallback={Array.from({ length: 10 }).map((_, index) => (
+              <MeetingsSkeleton key={index} />
+            ))}
+            key={meetingPage}
+          >
             <Meetings locale={locale} page={meetingPage} type={type} />
-          </TableBody>
-        </Table>
-      </Suspense>
+          </Suspense>
+        </TableBody>
+      </Table>
       <PaginationWithLogic
         currentPage={meetingPage}
         query={db

diff --git a/app/[locale]/notifications.tsx b/app/[locale]/notifications.tsx
@@ -4,7 +4,7 @@ import { MdOutlineKeyboardArrowRight } from 'react-icons/md';
 
 import { Button } from '~/components/buttons';
 import Heading from '~/components/heading';
-import Loading from '~/components/loading';
+import { NotificationSkeleton } from '~/components/skeletons';
 import { ScrollArea } from '~/components/ui';
 import { getTranslations } from '~/i18n/translations';
 import { cn, getKeys, groupBy } from '~/lib/utils';
@@ -84,7 +84,12 @@ export default async function Notifications({
             )}
           >
             <ol className="space-y-2 sm:space-y-4 md:space-y-6">
-              <Suspense fallback={<Loading />} key={currentCategory}>
+              <Suspense
+                fallback={Array.from({ length: 5 }).map((_, index) => (
+                  <NotificationSkeleton count={(index % 2) + 1} key={index} />
+                ))}
+                key={currentCategory}
+              >
                 <NotificationsList category={currentCategory} locale={locale} />
               </Suspense>
             </ol>

diff --git a/app/[locale]/student-activities/page.tsx b/app/[locale]/student-activities/page.tsx
@@ -6,7 +6,7 @@ import { BouncyArrowButton } from '~/components/buttons';
 import { GalleryCarousel } from '~/components/carousels';
 import Heading from '~/components/heading';
 import ImageHeader from '~/components/image-header';
-import Loading from '~/components/loading';
+import { StudentActivityCarouselSkeleton } from '~/components/skeletons';
 import { Card, CardDescription, CardTitle } from '~/components/ui';
 import { getTranslations } from '~/i18n/translations';
 import { cn } from '~/lib/utils';
@@ -43,7 +43,7 @@ export default async function StudentActivities({
       />
 
       <section className="container mb-6 text-center">
-        <Suspense fallback={<Loading />}>
+        <Suspense fallback={<StudentActivityCarouselSkeleton />}>
           <ClubsCarousel locale={locale} />
         </Suspense>
         <BouncyArrowButton

diff --git a/components/skeletons/curricula.tsx b/components/skeletons/curricula.tsx
@@ -0,0 +1,29 @@
+import { Skeleton } from '~/components/skeletons';
+import { TableCell, TableRow } from '~/components/ui';
+
+export const CurriculaSkeleton = () => {
+  return (
+    <>
+      <TableRow>
+        <TableCell>
+          <Skeleton className="h-4 w-[40px]" />
+        </TableCell>
+        <TableCell>
+          <Skeleton className="h-4 w-[200px]" />
+        </TableCell>
+        <TableCell>
+          <Skeleton className="h-4 w-[250px]" />
+        </TableCell>
+        <TableCell>
+          <Skeleton className="h-4 w-[40px]" />
+        </TableCell>
+        <TableCell>
+          <Skeleton className="h-4 w-[20px]" />
+        </TableCell>
+        <TableCell>
+          <Skeleton className="mx-auto h-4 w-[20px]" />
+        </TableCell>
+      </TableRow>
+    </>
+  );
+};
diff --git a/components/skeletons/department-card.tsx b/components/skeletons/department-card.tsx
@@ -0,0 +1,35 @@
+import { FaPhone } from 'react-icons/fa';
+import { MdEmail } from 'react-icons/md';
+
+import { Skeleton } from '~/components/skeletons';
+
+export const DepartmentCardSkeleton = () => {
+  return (
+    <li className="rounded border border-primary-700 bg-neutral-50 hover:drop-shadow-md">
+      <section className="flex gap-4 p-2 sm:p-3 md:p-4">
+        <Skeleton className="size-32 rounded lg:size-36 xl:size-40 2xl:size-44" />
+        <main>
+          <header className="mb-1 sm:mb-2 md:mb-3 lg:mb-4">
+            <h4>
+              <Skeleton className="h-5 w-[175px] lg:h-6 lg:w-[350px]" />
+            </h4>
+            <p>
+              <Skeleton className="h-3 w-[150px] lg:h-4 lg:w-[250px]" />
+            </p>
+          </header>
+
+          <ul className="mt-7">
+            <li className="flex items-center gap-3">
+              <MdEmail className="fill-primary-700" />
+              <Skeleton className="h-4 w-[150px]" />
+            </li>
+            <li className="flex items-center gap-3 space-y-3">
+              <FaPhone className="scale-x-[-1] fill-primary-700" />
+              <Skeleton className="h-4 w-[150px]" />
+            </li>
+          </ul>
+        </main>
+      </section>
+    </li>
+  );
+};
diff --git a/components/skeletons/department-name.tsx b/components/skeletons/department-name.tsx
@@ -0,0 +1,24 @@
+import { Skeleton } from '~/components/skeletons';
+
+export const DepartmentNameSkeleton = () => {
+  return (
+    <section className="space-y-5">
+      <Skeleton className="h-3 w-[300px]" />
+      <Skeleton className="h-3 w-[300px]" />
+      <Skeleton className="h-3 w-[250px]" />
+      <Skeleton className="h-3 w-[200px]" />
+      <Skeleton className="h-3 w-[275px]" />
+      <Skeleton className="h-3 w-[200px]" />
+      <Skeleton className="h-3 w-[225px]" />
+      <Skeleton className="h-3 w-[150px]" />
+      <Skeleton className="h-3 w-[300px]" />
+      <Skeleton className="h-3 w-[300px]" />
+      <Skeleton className="h-3 w-[250px]" />
+      <Skeleton className="h-3 w-[200px]" />
+      <Skeleton className="h-3 w-[275px]" />
+      <Skeleton className="h-3 w-[200px]" />
+      <Skeleton className="h-3 w-[225px]" />
+      <Skeleton className="h-3 w-[150px]" />
+    </section>
+  );
+};
diff --git a/components/skeletons/index.ts b/components/skeletons/index.ts
@@ -0,0 +1,7 @@
+export * from './curricula';
+export * from './department-card';
+export * from './department-name';
+export * from './meetings';
+export * from './notification';
+export * from './skeleton';
+export * from './student-activity-carousel';
diff --git a/components/skeletons/meetings.tsx b/components/skeletons/meetings.tsx
@@ -0,0 +1,26 @@
+import { Skeleton } from '~/components/skeletons';
+import { TableCell, TableRow } from '~/components/ui';
+
+export const MeetingsSkeleton = () => {
+  return (
+    <>
+      <TableRow>
+        <TableCell>
+          <Skeleton className="h-4 w-[30px]" />
+        </TableCell>
+        <TableCell>
+          <Skeleton className="h-4 w-[150px]" />
+        </TableCell>
+        <TableCell>
+          <Skeleton className="h-4 w-[400px]" />
+        </TableCell>
+        <TableCell>
+          <Skeleton className="mx-auto h-4 w-[20px]" />
+        </TableCell>
+        <TableCell>
+          <Skeleton className="mx-auto h-4 w-[20px]" />
+        </TableCell>
+      </TableRow>
+    </>
+  );
+};
diff --git a/components/skeletons/notification.tsx b/components/skeletons/notification.tsx
@@ -0,0 +1,22 @@
+import { MdOutlineKeyboardArrowRight } from 'react-icons/md';
+
+import { Skeleton } from '~/components/skeletons';
+
+export const NotificationSkeleton = ({ count }: { count: number }) => {
+  return (
+    <li className="mt-1">
+      <h5 className="text-primary-700">
+        <Skeleton className="h-5 w-[125px] bg-neutral-400" />
+      </h5>
+      <ul className="my-1 py-2 sm:py-4 md:py-6">
+        {[...Array<number>(count)].map((_, index) => (
+          <li className="inline-flex items-center" key={index}>
+            <MdOutlineKeyboardArrowRight className="my-auto size-4 text-primary-700 lg:size-6" />
+            <Skeleton className="h-3 w-[450px] bg-neutral-400 lg:h-4 lg:w-[650px]" />
+          </li>
+        ))}
+      </ul>
+      <hr className="opacity-20" />
+    </li>
+  );
+};
diff --git a/components/ui/skeleton.tsx → components/skeletons/skeleton.tsx b/components/ui/skeleton.tsx → components/skeletons/skeleton.tsx
@@ -6,10 +6,7 @@ function Skeleton({
 }: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      className={cn(
-        'bg-gray-100 dark:bg-gray-800 animate-pulse rounded-md',
-        className
-      )}
+      className={cn('animate-pulse rounded-md bg-neutral-200', className)}
       {...props}
     />
   );