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

src/components/Tables/companies/index.tsx

@@ -1,7 +1,6 @@
 "use client";
-import Link from "next/link";
-import { CompaniesSkeleton } from "./Skeleton";
-import { useCompanyListPresenter } from "./useCompanyListPresenter";
+import { PencilSquareIcon, TrashIcon } from "@/assets/icons";
+import ConfirmationModal from "@/components/ui/ConfirmationModal";
 import {
   Table,
   TableBody,
@@ -10,9 +9,10 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import { PencilSquareIcon, TrashIcon } from "@/assets/icons";
-import ConfirmationModal from "@/components/ui/ConfirmationModal";
+import TableSkeleton from "@/components/ui/TableSkeleton";
 import { formatPhoneNumber } from "@/utils/shared";
+import Link from "next/link";
+import { useCompanyListPresenter } from "./useCompanyListPresenter";
 
 interface IProps {}
 
@@ -29,7 +29,6 @@ const CompaniesTable = ({}: IProps) => {
     onConfirmDelete,
     modalConfig,
   } = useCompanyListPresenter();
-  if (isPending) return <CompaniesSkeleton />;
   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">
@@ -49,7 +48,7 @@ const CompaniesTable = ({}: IProps) => {
             ))}
           </TableRow>
         </TableHeader>
-
+        {isPending && <TableSkeleton column={columns.length} />}
         <TableBody>
           {allCompanies.map((company, index) =>
             !company ? (