From 5ad38c8a8c065876d1c7e16cbc762776ba1a0c4e Mon Sep 17 00:00:00 2001
From: MartinBraquet <martin.braquet@gmail.com>
Date: Sat, 23 May 2026 17:11:51 +0200
Subject: [PATCH] Replace loading indicator with `ProfileGridSkeleton` for
 profiles and add reusable skeleton component

---
 web/components/profile-grid.tsx           | 39 +++++++++++++++++++++++
 web/components/profiles/profiles-home.tsx |  5 ++-
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/web/components/profile-grid.tsx b/web/components/profile-grid.tsx
index 8faa232c..9933bb8d 100644
--- a/web/components/profile-grid.tsx
+++ b/web/components/profile-grid.tsx
@@ -41,6 +41,45 @@ import {capitalizePure} from 'web/lib/util/time'
 
 import {Col} from './layout/col'
 
+export function ProfileGridSkeleton(props: {count?: number; className?: string}) {
+  const {count = 6, className} = props
+  return (
+    <div className={clsx('grid gap-6 py-4 grid-cols-1', className)}>
+      {Array.from({length: count}).map((_, i) => (
+        <div
+          key={i}
+          className="rounded-xl border border-canvas-300 bg-canvas-50 overflow-hidden animate-pulse"
+        >
+          <div className="flex flex-row h-full justify-between">
+            <div className="flex-1 px-4 py-3 space-y-2 min-w-0">
+              {/* name */}
+              <div className="h-5 bg-canvas-200 rounded w-2/5" />
+              {/* age / location */}
+              <div className="h-3.5 bg-canvas-200 rounded w-1/3" />
+              {/* headline */}
+              <div className="h-3.5 bg-canvas-200 rounded w-3/5 mt-1" />
+              {/* keyword pills */}
+              <div className="flex gap-2 pt-1">
+                <div className="h-6 bg-canvas-200 rounded-full w-16" />
+                <div className="h-6 bg-canvas-200 rounded-full w-20" />
+                <div className="h-6 bg-canvas-200 rounded-full w-14" />
+              </div>
+              {/* bio lines */}
+              <div className="space-y-1.5 pt-1">
+                <div className="h-3 bg-canvas-200 rounded w-full" />
+                <div className="h-3 bg-canvas-200 rounded w-4/5" />
+                <div className="h-3 bg-canvas-200 rounded w-3/4" />
+              </div>
+            </div>
+            {/* photo placeholder */}
+            <div className="shrink-0 w-40 min-h-24 bg-canvas-200 rounded-r-xl" />
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}
+
 export const ProfileGrid = (props: {
   profiles: Profile[]
   loadMore: () => Promise<boolean>
diff --git a/web/components/profiles/profiles-home.tsx b/web/components/profiles/profiles-home.tsx
index e38a71a4..84906270 100644
--- a/web/components/profiles/profiles-home.tsx
+++ b/web/components/profiles/profiles-home.tsx
@@ -11,8 +11,7 @@ import {Search} from 'web/components/filters/search'
 import {useFilters} from 'web/components/filters/use-filters'
 import {Col} from 'web/components/layout/col'
 import {Row} from 'web/components/layout/row'
-import {ProfileGrid} from 'web/components/profile-grid'
-import {CompassLoadingIndicator} from 'web/components/widgets/loading-indicator'
+import {ProfileGrid, ProfileGridSkeleton} from 'web/components/profile-grid'
 import {Title} from 'web/components/widgets/title'
 import {useBookmarkedSearches} from 'web/hooks/use-bookmarked-searches'
 import {useDisplayOptions} from 'web/hooks/use-display-options'
@@ -329,7 +328,7 @@ export function ProfilesHome() {
           filtersElement={filtersElement}
         />
         {displayProfiles === undefined || compatibleProfiles === undefined ? (
-          <CompassLoadingIndicator />
+          <ProfileGridSkeleton count={6} />
         ) : (
           <>
             {fromSignup && isClearedFilters && (