chore: integrate CompaniesListSkeleton for improved loading states in…

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>
   );
 };

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 />
     </>
   );

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}

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 />
     </>
   );

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}

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>
+  );
+};