added skeleton loaders for our services

Author: DavidK4leido5

apps/codebility/app/(marketing)/services/_components/tabs/ServicesTab.tsx

@@ -15,7 +15,7 @@ import type { ServicesProjectsPage } from "@/lib/server/services-projects-cached
 import { fetchApiJson } from "@/utils/api-fetch";
 
 import type { ServiceProject } from "../ui/ServicesServiceCard";
-import { ServicesServiceCard } from "../ui";
+import { ServicesGridSkeleton, ServicesServiceCard, servicesProjectsGridClass } from "../ui";
 
 const pagePromises = new Map<string, Promise<ServicesProjectsPage>>();
 const pageMetaCache = new Map<string, ServicesProjectsPage["pagination"]>();
@@ -105,17 +105,17 @@ function loadPage(
   return promise;
 }
 
-function ServicesGridSkeleton() {
-  return (
-    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4">
-      {Array.from({ length: 4 }).map((_, index) => (
-        <div
-          key={index}
-          className="aspect-square w-full animate-pulse rounded-xl bg-white/5"
-        />
-      ))}
-    </div>
-  );
+function resolveSkeletonCount(
+  page: number,
+  pageSize: number,
+  total: number,
+) {
+  if (total <= 0) {
+    return pageSize;
+  }
+
+  const remaining = total - (page - 1) * pageSize;
+  return Math.min(pageSize, Math.max(1, remaining));
 }
 
 function ServicesProjectsGrid({
@@ -136,10 +136,7 @@ function ServicesProjectsGrid({
   }
 
   return (
-    <div
-      key={page}
-      className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4"
-    >
+    <div key={page} className={servicesProjectsGridClass}>
       {projects.map((project, index) => (
         <div
           key={project.id}
@@ -227,13 +224,13 @@ function ServicesPaginationSlot({
   onPageChange: (page: number) => void;
 }) {
   if (totalPages <= 1) {
-    return null;
+    return <div className="mt-6 min-h-[4.5rem]" aria-hidden="true" />;
   }
 
   const currentPage = Math.min(page, totalPages);
 
   return (
-    <div id="services-pagination" className="text-white">
+    <div id="services-pagination" className="mt-6 min-h-[4.5rem] text-white">
       <DefaultPagination
         currentPage={currentPage}
         totalPages={totalPages}
@@ -263,7 +260,7 @@ export const ServicesTab = ({
   onServiceSelect,
 }: Props) => {
   const [page, setPage] = useState(initialData.pagination.page);
-  const [isPending, startTransition] = useTransition();
+  const [, startTransition] = useTransition();
 
   rememberPagination(
     initialData.category as ServicesCategorySlug,
@@ -279,6 +276,11 @@ export const ServicesTab = ({
     initialData,
   );
   const totalPages = Math.max(1, activePagination.totalPages);
+  const skeletonCount = resolveSkeletonCount(
+    page,
+    pageSize,
+    activePagination.total,
+  );
 
   useMarketingPageUrl(page, (nextPage) => {
     startTransition(() => {
@@ -319,13 +321,11 @@ export const ServicesTab = ({
             })}
           </div>
 
-          <div
-            id="services-grid"
-            className={`transition-opacity duration-200 ${
-              isPending ? "opacity-60" : "opacity-100"
-            }`}
-          >
-            <Suspense key={`${category}:${page}`} fallback={<ServicesGridSkeleton />}>
+          <div id="services-grid">
+            <Suspense
+              key={`${category}:${page}`}
+              fallback={<ServicesGridSkeleton count={skeletonCount} />}
+            >
               <ServicesTabGrid
                 category={category}
                 page={page}

apps/codebility/app/(marketing)/services/_components/ui/ServicesGridSkeleton.tsx

@@ -0,0 +1,41 @@
+import { Skeleton } from "@/components/ui/skeleton/skeleton";
+
+const GRID_CLASS =
+  "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4";
+
+function ServicesServiceCardSkeleton() {
+  return (
+    <div
+      className="flex h-full flex-col overflow-hidden rounded-xl bg-white/[0.04] ring-1 ring-white/[0.08]"
+      aria-hidden="true"
+    >
+      <div className="relative min-h-0 w-full flex-1">
+        <Skeleton className="absolute inset-0 rounded-none bg-white/10" />
+        <div className="absolute left-3 top-3 flex gap-1.5">
+          <Skeleton className="h-6 w-16 rounded-md bg-white/10" />
+          <Skeleton className="h-6 w-20 rounded-md bg-white/10" />
+        </div>
+        <div className="absolute inset-x-0 bottom-0 border-t border-white/10 bg-gray-950/75 px-4 py-3">
+          <Skeleton className="h-4 w-24 rounded bg-white/10" />
+        </div>
+      </div>
+      <div className="flex shrink-0 items-center px-3 py-2.5">
+        <Skeleton className="h-4 w-2/3 rounded bg-white/10" />
+      </div>
+    </div>
+  );
+}
+
+export function ServicesGridSkeleton({ count = 12 }: { count?: number }) {
+  return (
+    <div className={GRID_CLASS} aria-busy="true" aria-live="polite">
+      {Array.from({ length: count }, (_, index) => (
+        <div key={index} className="aspect-square w-full">
+          <ServicesServiceCardSkeleton />
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export { GRID_CLASS as servicesProjectsGridClass };

apps/codebility/app/(marketing)/services/_components/ui/index.ts

@@ -1 +1,2 @@
 export * from "./ServicesServiceCard";
+export * from "./ServicesGridSkeleton";