Add: shared skeleton, dark toggle bg, fixed: multi select patching issue

src/components/Tables/admins/Skeleton.tsx

@@ -1,41 +0,0 @@
-import { Skeleton } from "@/components/ui/skeleton";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-
-export function AdminsSkeleton() {
-  return (
-    <div className="rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card">
-      <h2 className="mb-5.5 text-body-2xlg font-bold text-dark dark:text-white">
-        Admins
-      </h2>
-
-      <Table>
-        <TableHeader>
-          <TableRow className="border-none uppercase [&>th]:text-center">
-            <TableHead className="!text-left">Full name</TableHead>
-            <TableHead>Email</TableHead>
-            <TableHead className="!text-right">Role</TableHead>
-            <TableHead>Username</TableHead>
-            <TableHead>Actions</TableHead>
-          </TableRow>
-        </TableHeader>
-
-        <TableBody>
-          {Array.from({ length: 5 }).map((_, i) => (
-            <TableRow key={i}>
-              <TableCell colSpan={100}>
-                <Skeleton className="h-8" />
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </div>
-  );
-}

src/components/Tables/admins/index.tsx

@@ -1,5 +1,7 @@
 "use client";
 
+import { PencilSquareIcon, TrashIcon } from "@/assets/icons";
+import ConfirmationModal from "@/components/ui/ConfirmationModal";
 import {
   Table,
   TableBody,
@@ -8,11 +10,9 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { useAdminsPresenter } from "./useAdminsPresenter";
-import { PencilSquareIcon, TrashIcon } from "@/assets/icons";
-import ConfirmationModal from "@/components/ui/ConfirmationModal";
-import { AdminsSkeleton } from "./Skeleton";
+import TableSkeleton from "@/components/ui/TableSkeleton";
 import Link from "next/link";
+import { useAdminsPresenter } from "./useAdminsPresenter";
 
 const AdminsTable = () => {
   const {
@@ -27,7 +27,6 @@ const AdminsTable = () => {
     pathName,
   } = useAdminsPresenter();
 
-  if (isPending) return <AdminsSkeleton />;
   return (
     <div className="flex flex-col rounded-[10px] bg-white px-7.5 pb-4 pt-7.5 shadow-1 dark:bg-gray-dark dark:shadow-card">
       <button className="mb-5 flex w-fit justify-center self-end rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90">
@@ -53,11 +52,14 @@ const AdminsTable = () => {
             </TableHead>
           </TableRow>
         </TableHeader>
-
+        {isPending && <TableSkeleton column={5} />}
         <TableBody>
           {allUsers.map((item) => {
             return (
-              <TableRow key={item.id} className="odd:bg-gray-2 dark:odd:bg-gray-7">
+              <TableRow
+                key={item.id}
+                className="odd:bg-gray-2 dark:odd:bg-gray-7"
+              >
                 <TableCell className="text-start" colSpan={100}>
                   {item.full_name}
                 </TableCell>