feat: add Skeleton for services page

app/(prowler)/services/page.tsx

@@ -4,8 +4,7 @@ import { Suspense } from "react";
 
 import { getService } from "@/actions/services";
 import { FilterControls } from "@/components/filters";
-import { SkeletonTableProvider } from "@/components/providers";
-import { ServiceCard } from "@/components/services";
+import { ServiceCard, ServiceSkeletonGrid } from "@/components/services";
 import { Header } from "@/components/ui";
 import { searchParamsProps } from "@/types";
 
@@ -19,7 +18,7 @@ export default async function Services({ searchParams }: searchParamsProps) {
       <Spacer y={4} />
       <FilterControls />
       <Spacer y={4} />
-      <Suspense key={searchParams.page} fallback={<SkeletonTableProvider />}>
+      <Suspense key={searchParams.page} fallback={<ServiceSkeletonGrid />}>
         <SSRServiceGrid searchParams={searchParams} />
       </Suspense>
     </>

components/services/ServiceSkeletonGrid.tsx

@@ -0,0 +1,18 @@
+import { Card, Skeleton } from "@nextui-org/react";
+import React from "react";
+
+export const ServiceSkeletonGrid = () => {
+  return (
+    <Card className="w-full h-fit p-4">
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 3xl:grid-cols-5 gap-4">
+        {[...Array(25)].map((_, index) => (
+          <div key={index} className="flex flex-col space-y-4">
+            <Skeleton className="h-16 rounded-lg">
+              <div className="h-full bg-default-300"></div>
+            </Skeleton>
+          </div>
+        ))}
+      </div>
+    </Card>
+  );
+};

components/services/index.ts

@@ -1 +1,2 @@
 export * from "./ServiceCard";
+export * from "./ServiceSkeletonGrid";