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

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>