skeleton for catalogues

src/pages/catalogue/Business.tsx

@@ -2,14 +2,21 @@ import GridWrapper from "@/components/GridWrapper";
 import { type FC } from "react";
 import { useParams } from "react-router-dom";
 import ButtonAddCatalogue from "./components/ButtonAddCatalogue";
+import CatalogueGridSkeleton from "./components/CatalogueGridSkeleton";
 import CatalogueItem from "./components/CatalogueItem";
 import { useGetBusinessCatalog } from "./hooks/useCatalogueData";
 
 const Business: FC = () => {
   const { slug } = useParams<{ slug: string }>();
   const { data, isPending, refetch } = useGetBusinessCatalog(slug ?? "");
-  //   const { data: businessData, isLoading: businessLoading } =
-  //     useGetBusinessBySlug(slug ?? "");
+
+  if (isPending) {
+    return (
+      <div className="w-full mt-5">
+        <CatalogueGridSkeleton />
+      </div>
+    );
+  }
 
   return (
     <div className="w-full mt-5">

src/pages/catalogue/List.tsx

@@ -3,11 +3,20 @@ import { usePageTitle } from "@/hooks/usePageTitle";
 import { type FC } from "react";
 import { useGetCatalog } from "../home/hooks/useHomeData";
 import ButtonAddCatalogue from "./components/ButtonAddCatalogue";
+import CatalogueGridSkeleton from "./components/CatalogueGridSkeleton";
 import CatalogueItem from "./components/CatalogueItem";
 
 const CatalogueList: FC = () => {
   usePageTitle("لیست کاتالوگ‌ها");
-  const { data, refetch } = useGetCatalog();
+  const { data, isPending, refetch } = useGetCatalog();
+
+  if (isPending) {
+    return (
+      <div className="w-full mt-5">
+        <CatalogueGridSkeleton />
+      </div>
+    );
+  }
 
   return (
     <div className="w-full mt-5">

src/pages/catalogue/components/CatalogueGridSkeleton.tsx

@@ -0,0 +1,42 @@
+import GridWrapper from "@/components/GridWrapper";
+import { type FC } from "react";
+
+const PREVIEW_WIDTH = 64;
+const PREVIEW_HEIGHT = 89;
+
+export const CatalogueItemSkeleton: FC = () => (
+  <div
+    className="bg-white p-6 rounded-3xl w-full animate-pulse"
+    aria-hidden="true"
+  >
+    <div className="flex gap-4 items-center">
+      <div
+        className="bg-gray-200 rounded-lg shrink-0"
+        style={{ width: PREVIEW_WIDTH, height: PREVIEW_HEIGHT }}
+      />
+      <div className="flex-1 min-w-0">
+        <div className="h-4 bg-gray-200 rounded-md w-3/4 max-w-[160px]" />
+        <div className="mt-2 h-3 bg-gray-200 rounded-md w-1/3 max-w-[80px]" />
+      </div>
+    </div>
+    <div className="flex justify-end gap-1 items-center mt-1">
+      {Array.from({ length: 4 }).map((_, index) => (
+        <div key={index} className="size-6 bg-gray-200 rounded-md" />
+      ))}
+    </div>
+  </div>
+);
+
+type CatalogueGridSkeletonProps = {
+  count?: number;
+};
+
+const CatalogueGridSkeleton: FC<CatalogueGridSkeletonProps> = ({ count = 8 }) => (
+  <GridWrapper desktop={4} gapDesktop={40} mobile={1}>
+    {Array.from({ length: count }).map((_, index) => (
+      <CatalogueItemSkeleton key={index} />
+    ))}
+  </GridWrapper>
+);
+
+export default CatalogueGridSkeleton;