From d2c9e13df722bda8b5480b6b283e71bff1855604 Mon Sep 17 00:00:00 2001
From: Alexandre Marques <pt.alexandremarques@gmail.com>
Date: Tue, 25 Mar 2025 21:36:21 +0000
Subject: [PATCH] chore: integrate CompaniesListSkeleton for improved loading
 states in category and location pages

---
 apps/web/src/app/(companies-list)/layout.tsx      |  7 ++-----
 apps/web/src/app/category/[category]/layout.tsx   |  2 +-
 apps/web/src/app/category/[category]/page.tsx     |  3 ++-
 apps/web/src/app/location/[location]/layout.tsx   |  3 ++-
 apps/web/src/app/location/[location]/page.tsx     |  3 ++-
 apps/web/src/components/CompaniesListSkeleton.tsx | 11 +++++++++++
 6 files changed, 20 insertions(+), 9 deletions(-)
 create mode 100644 apps/web/src/components/CompaniesListSkeleton.tsx

diff --git a/apps/web/src/app/(companies-list)/layout.tsx b/apps/web/src/app/(companies-list)/layout.tsx
index 8d09661..72e1e62 100644
--- a/apps/web/src/app/(companies-list)/layout.tsx
+++ b/apps/web/src/app/(companies-list)/layout.tsx
@@ -1,4 +1,5 @@
 import CompaniesHeader from "@/components/CompaniesHeader";
+import { CompaniesListSkeleton } from "@/components/CompaniesListSkeleton";
 import Footer from "@/components/Footer";
 import { Skeleton } from "@/components/ui/skeleton";
 import { LayoutProps } from "@/lib/types";
@@ -24,11 +25,7 @@ const AppLoading = () => {
       <div className="flex h-fit shrink-0 flex-col gap-4 md:flex-col-reverse">
         <Skeleton className="h-52 w-full rounded-md md:w-60" />
       </div>
-      <div className="flex-1 space-y-4">
-        <Skeleton className="h-36 w-full rounded-md" />
-        <Skeleton className="h-36 w-full rounded-md" />
-        <Skeleton className="h-36 w-full rounded-md" />
-      </div>
+      <CompaniesListSkeleton />
     </div>
   );
 };
diff --git a/apps/web/src/app/category/[category]/layout.tsx b/apps/web/src/app/category/[category]/layout.tsx
index 1cc4567..0a13cfc 100644
--- a/apps/web/src/app/category/[category]/layout.tsx
+++ b/apps/web/src/app/category/[category]/layout.tsx
@@ -5,7 +5,7 @@ import { Suspense } from "react";
 export default function CategoryPageLayout({ children }: LayoutProps) {
   return (
     <>
-      <Suspense fallback={<div>Loading...</div>}>{children}</Suspense>
+      {children}
       <Footer />
     </>
   );
diff --git a/apps/web/src/app/category/[category]/page.tsx b/apps/web/src/app/category/[category]/page.tsx
index 6017c0f..d9d7b79 100644
--- a/apps/web/src/app/category/[category]/page.tsx
+++ b/apps/web/src/app/category/[category]/page.tsx
@@ -1,5 +1,6 @@
 import { Breadcrumb } from "@/components/Breadcrumb";
 import CompaniesList from "@/components/CompaniesList";
+import { CompaniesListSkeleton } from "@/components/CompaniesListSkeleton";
 import {
   APP_URL,
   defaultMetadata,
@@ -83,7 +84,7 @@ export default async function CategoryPage({
           ]}
         />
         <h1 className="text-2xl font-bold">{category} Companies</h1>
-        <Suspense>
+        <Suspense fallback={<CompaniesListSkeleton />}>
           <CompaniesList
             allCompanies={filteredCompanies}
             updatedAtISODate={updatedAtISODate}
diff --git a/apps/web/src/app/location/[location]/layout.tsx b/apps/web/src/app/location/[location]/layout.tsx
index de1ceee..a4dca32 100644
--- a/apps/web/src/app/location/[location]/layout.tsx
+++ b/apps/web/src/app/location/[location]/layout.tsx
@@ -1,11 +1,12 @@
 import Footer from "@/components/Footer";
+import { Skeleton } from "@/components/ui/skeleton";
 import { LayoutProps } from "@/lib/types";
 import { Suspense } from "react";
 
 export default function LocationPageLayout({ children }: LayoutProps) {
   return (
     <>
-      <Suspense fallback={<div>Loading...</div>}>{children}</Suspense>
+      {children}
       <Footer />
     </>
   );
diff --git a/apps/web/src/app/location/[location]/page.tsx b/apps/web/src/app/location/[location]/page.tsx
index ba2a545..95b323f 100644
--- a/apps/web/src/app/location/[location]/page.tsx
+++ b/apps/web/src/app/location/[location]/page.tsx
@@ -1,5 +1,6 @@
 import { Breadcrumb } from "@/components/Breadcrumb";
 import CompaniesList from "@/components/CompaniesList";
+import { CompaniesListSkeleton } from "@/components/CompaniesListSkeleton";
 import {
   APP_URL,
   defaultMetadata,
@@ -84,7 +85,7 @@ export default async function LocationPage({
         />
         <h1 className="text-2xl font-bold">Companies in {location}</h1>
 
-        <Suspense>
+        <Suspense fallback={<CompaniesListSkeleton />}>
           <CompaniesList
             allCompanies={filteredCompanies}
             updatedAtISODate={updatedAtISODate}
diff --git a/apps/web/src/components/CompaniesListSkeleton.tsx b/apps/web/src/components/CompaniesListSkeleton.tsx
new file mode 100644
index 0000000..5bafd88
--- /dev/null
+++ b/apps/web/src/components/CompaniesListSkeleton.tsx
@@ -0,0 +1,11 @@
+import { Skeleton } from "./ui/skeleton";
+
+export const CompaniesListSkeleton = () => {
+  return (
+    <div className="flex-1 space-y-4">
+      <Skeleton className="h-36 w-full rounded-md" />
+      <Skeleton className="h-36 w-full rounded-md" />
+      <Skeleton className="h-36 w-full rounded-md" />
+    </div>
+  );
+};