From 2e29f12a84ee2ad865cf2670bdefa839d3d9ce38 Mon Sep 17 00:00:00 2001
From: SkateSpots <skatespots>
Date: Sat, 26 Sep 2026 23:13:37 +0700
Subject: [PATCH] perf(lists): lazy-mount cards on the Skaters, Lab, Crews and
 Events grids

Extends LazyMount beyond the marketplace so these long card grids no longer
mount every card (and its hooks/DOM) up front. Cards keep equal height via
h-full wrappers.

Gate: 101 tests, 0 errors/warnings, boot smoke green.
---
 src/pages/CrewsPage.tsx   | 14 ++++++++------
 src/pages/EventsPage.tsx  | 27 ++++++++++++++++-----------
 src/pages/LabPage.tsx     |  5 ++++-
 src/pages/SkatersPage.tsx |  7 ++++++-
 4 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/src/pages/CrewsPage.tsx b/src/pages/CrewsPage.tsx
index d885837..92850bb 100644
--- a/src/pages/CrewsPage.tsx
+++ b/src/pages/CrewsPage.tsx
@@ -2,6 +2,7 @@ import { useState, useMemo } from 'react';
 import { useSeoMeta } from '@unhead/react';
 import { Link } from 'react-router-dom';
 import { Layout } from '@/components/Layout';
+import { LazyMount } from '@/components/LazyMount';
 import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Skeleton } from '@/components/ui/skeleton';
@@ -334,12 +335,13 @@ export default function CrewsPage() {
         ) : (
           <div className="grid grid-cols-1 gap-3 lg:grid-cols-2">
             {filtered.map((crew) => (
-              <CrewCard
-                key={`${crew.pubkey}:${crew.identifier}`}
-                crew={crew}
-                activity={activityMap?.get(crewCoordinate(crew))}
-                distanceKm={nearMe && userLoc ? crewDistanceKm(crew, userLoc) : null}
-              />
+              <LazyMount key={`${crew.pubkey}:${crew.identifier}`} className="h-full">
+                <CrewCard
+                  crew={crew}
+                  activity={activityMap?.get(crewCoordinate(crew))}
+                  distanceKm={nearMe && userLoc ? crewDistanceKm(crew, userLoc) : null}
+                />
+              </LazyMount>
             ))}
           </div>
         )}
diff --git a/src/pages/EventsPage.tsx b/src/pages/EventsPage.tsx
index e36b7c6..fa69f38 100644
--- a/src/pages/EventsPage.tsx
+++ b/src/pages/EventsPage.tsx
@@ -2,6 +2,7 @@ import { useState, useMemo, useRef, useEffect, useCallback } from 'react';
 import { useSeoMeta } from '@unhead/react';
 import { Link } from 'react-router-dom';
 import { Layout } from '@/components/Layout';
+import { LazyMount } from '@/components/LazyMount';
 import { EventCard, EventCardSkeleton } from '@/components/EventCard';
 import { TourCard, TourCardSkeleton } from '@/components/TourCard';
 import { HostingDashboard } from '@/components/HostingDashboard';
@@ -1221,11 +1222,12 @@ export default function EventsPage() {
               filteredEvents.upcoming.length > 0 ? (
                 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 stagger-children">
                   {filteredEvents.upcoming.map((event) => (
-                    <EventCard
-                      key={event.id}
-                      event={event}
-                      goingCount={batchRsvps.get(eventCoord(event))?.goingCount ?? 0}
-                    />
+                    <LazyMount key={event.id} className="h-full">
+                      <EventCard
+                        event={event}
+                        goingCount={batchRsvps.get(eventCoord(event))?.goingCount ?? 0}
+                      />
+                    </LazyMount>
                   ))}
                 </div>
               ) : (
@@ -1244,11 +1246,12 @@ export default function EventsPage() {
               filteredEvents.past.length > 0 ? (
                 <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 stagger-children">
                   {filteredEvents.past.map((event) => (
-                    <EventCard
-                      key={event.id}
-                      event={event}
-                      goingCount={batchRsvps.get(eventCoord(event))?.goingCount ?? 0}
-                    />
+                    <LazyMount key={event.id} className="h-full">
+                      <EventCard
+                        event={event}
+                        goingCount={batchRsvps.get(eventCoord(event))?.goingCount ?? 0}
+                      />
+                    </LazyMount>
                   ))}
                 </div>
               ) : (
@@ -1270,7 +1273,9 @@ export default function EventsPage() {
             ) : filteredTours.length > 0 ? (
               <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 stagger-children">
                 {filteredTours.map((tour) => (
-                  <TourCard key={tour.id} tour={tour} />
+                  <LazyMount key={tour.id} className="h-full">
+                    <TourCard tour={tour} />
+                  </LazyMount>
                 ))}
               </div>
             ) : (
diff --git a/src/pages/LabPage.tsx b/src/pages/LabPage.tsx
index 81a7450..68c1f3f 100644
--- a/src/pages/LabPage.tsx
+++ b/src/pages/LabPage.tsx
@@ -2,6 +2,7 @@ import { useState, useMemo, useRef, useEffect, useCallback } from 'react';
 import { useSeoMeta } from '@unhead/react';
 import { Link, useSearchParams } from 'react-router-dom';
 import { Layout } from '@/components/Layout';
+import { LazyMount } from '@/components/LazyMount';
 import { Badge } from '@/components/ui/badge';
 import { Sheet, SheetContent, SheetHeader, SheetTitle } from '@/components/ui/sheet';
 import { type TrustFilterLevel, filterByTrustLevel } from '@/components/TrustFilter';
@@ -1355,7 +1356,9 @@ export default function LabPage() {
           ) : filteredProfiles.length > 0 ? (
             <div className="grid sm:grid-cols-2 gap-3">
               {filteredProfiles.map((profile) => (
-                <ProfileCard key={profile.id} profile={profile} />
+                <LazyMount key={profile.id} className="h-full">
+                  <ProfileCard profile={profile} />
+                </LazyMount>
               ))}
             </div>
           ) : (
diff --git a/src/pages/SkatersPage.tsx b/src/pages/SkatersPage.tsx
index a28c145..de88d47 100644
--- a/src/pages/SkatersPage.tsx
+++ b/src/pages/SkatersPage.tsx
@@ -3,6 +3,7 @@ import { useSeoMeta } from '@unhead/react';
 import { Link } from 'react-router-dom';
 import { nip19 } from 'nostr-tools';
 import { Layout } from '@/components/Layout';
+import { LazyMount } from '@/components/LazyMount';
 import { Card, CardContent } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
@@ -346,7 +347,11 @@ export default function SkatersPage() {
               </Card>
             ) : (
               <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
-                {shown.map((s) => <SkaterCard key={s.pubkey} skater={s} verified={verifiedSet?.has(s.pubkey)} />)}
+                {shown.map((s) => (
+                  <LazyMount key={s.pubkey} className="h-full">
+                    <SkaterCard skater={s} verified={verifiedSet?.has(s.pubkey)} />
+                  </LazyMount>
+                ))}
               </div>
             );
           })()}