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

src/components/Tables/customers/index.tsx

@@ -1,7 +1,6 @@
 "use client";
-import Link from "next/link";
-import { CustomersSkeleton } from "./Skeleton";
-import useCustomerListPresenter from "./useCustomerListPresenter";
+import { PencilSquareIcon, TrashIcon, UserIcon } from "@/assets/icons";
+import ConfirmationModal from "@/components/ui/ConfirmationModal";
 import {
   Table,
   TableBody,
@@ -10,16 +9,15 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { PencilSquareIcon, TrashIcon, UserIcon } from "@/assets/icons";
-import ConfirmationModal from "@/components/ui/ConfirmationModal";
+import Link from "next/link";
+import useCustomerListPresenter from "./useCustomerListPresenter";
 
-import AssignToCompanyModalContent from "./AssignToCompanyModalContent";
 import Modal from "@/components/ui/modal";
-import { TAssignCustomerToCompanyCredentials } from "@/lib/api";
-import { toast } from "react-toastify";
 import Status from "@/components/ui/Status";
+import TableSkeleton from "@/components/ui/TableSkeleton";
 import { unixToDate } from "@/utils/shared";
-import { custom } from "zod";
+import { toast } from "react-toastify";
+import AssignToCompanyModalContent from "./AssignToCompanyModalContent";
 
 const CustomersTable = () => {
   const {
@@ -40,7 +38,6 @@ const CustomersTable = () => {
     isAssignCompanyModalOpen,
     setIsAssignCompanyModalOpen,
   } = useCustomerListPresenter();
-  if (isPending) return <CustomersSkeleton />;
   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">
@@ -60,6 +57,7 @@ const CustomersTable = () => {
             ))}
           </TableRow>
         </TableHeader>
+        {isPending && <TableSkeleton column={columns.length} />}
         <TableBody>
           {allCustomers.map((customer) => (
             <TableRow key={customer.id}>
@@ -69,11 +67,11 @@ const CustomersTable = () => {
                 {unixToDate(customer.created_at)}
               </TableCell>
 
-              <TableCell colSpan={100} className="uppercase">{customer.type}</TableCell>
+              <TableCell colSpan={100} className="uppercase">
+                {customer.type}
+              </TableCell>
               <TableCell colSpan={100}>
-                <Status status={customer.status}>
                   <Status status={customer.status}>{customer.status}</Status>
-                </Status>
               </TableCell>
               <TableCell colSpan={100}>
                 {customer.companies?.length ? (