Virtualize available participants list, memoize draft room props

Adds @tanstack/react-virtual to replace separate mobile/desktop lists
with a single unified virtual scroll loop. Also memoizes miniDraftGrid
and availableParticipantsSectionProps, and switches pick lookup from
Array.find to a Map for O(1) access.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

app/components/__tests__/AvailableParticipantsSection.test.tsx

@@ -3,6 +3,29 @@ import { render, screen, within } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { AvailableParticipantsSection } from "~/components/draft/AvailableParticipantsSection";
 
+vi.mock("@tanstack/react-virtual", () => ({
+  useVirtualizer: ({
+    count,
+    estimateSize,
+  }: {
+    count: number;
+    estimateSize: () => number;
+  }) => {
+    const size = estimateSize();
+    const items = Array.from({ length: count }, (_, i) => ({
+      index: i,
+      start: i * size,
+      size,
+      key: i,
+    }));
+    return {
+      getTotalSize: () => count * size,
+      getVirtualItems: () => items,
+      measureElement: vi.fn(),
+    };
+  },
+}));
+
 const defaultProps = {
   participants: [
     { id: "1", name: "Player A", sport: { id: "s1", name: "NFL" } },

app/components/draft/AvailableParticipantsSection.tsx

@@ -1,4 +1,5 @@
-import { memo, useCallback, useMemo } from "react";
+import { memo, useCallback, useMemo, useRef } from "react";
+import { useVirtualizer } from "@tanstack/react-virtual";
 import { Button } from "~/components/ui/button";
 import { Badge } from "~/components/ui/badge";
 import { Checkbox } from "~/components/ui/checkbox";
@@ -271,6 +272,19 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
 
   const hasActiveFilters = sportFilters.length > 0 || hideCompletedSports;
 
+  const parentRef = useRef<HTMLDivElement>(null);
+  const virtualizer = useVirtualizer({
+    count: participants.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 72,
+    overscan: 5,
+    getItemKey: (index) => participants[index]?.id ?? index,
+  });
+
+  const desktopGridClass = hasTeam
+    ? "grid-cols-[60px_60px_1fr_140px]"
+    : "grid-cols-[60px_60px_1fr]";
+
   return (
     <div className="flex flex-col h-full">
       {miniDraftGrid && (
@@ -280,7 +294,6 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
       )}
       <div className="px-4 pt-4 pb-2 flex-shrink-0">
         <div className="space-y-2">
-          {/* Search Input */}
           <input
             type="text"
             placeholder="Search participants..."
@@ -290,9 +303,7 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
           />
 
           <div className="flex flex-wrap gap-2">
-            {/* Sport Filter Multi-Select */}
             <div className="flex-1 min-w-[120px]">
-              {/* Mobile: bottom sheet */}
               <div className="md:hidden">
                 <Sheet>
                   <SheetTrigger asChild>
@@ -334,7 +345,6 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
                 </Sheet>
               </div>
 
-              {/* Desktop: popover */}
               <div className="hidden md:block">
                 <Popover>
                   <PopoverTrigger asChild>
@@ -374,7 +384,6 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
               </div>
             </div>
 
-            {/* Show/Hide Drafted Toggle */}
             <label className="flex items-center gap-2 text-sm cursor-pointer whitespace-nowrap px-3 py-2 border rounded-md">
               <Checkbox
                 checked={!hideDrafted}
@@ -383,7 +392,6 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
               <span>Show Drafted</span>
             </label>
 
-            {/* Show/Hide Ineligible Toggle - only show if user has a team */}
             {hasTeam && eligibility && (
               <label className="flex items-center gap-2 text-sm cursor-pointer whitespace-nowrap px-3 py-2 border rounded-md">
                 <Checkbox
@@ -398,20 +406,45 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
         </div>
       </div>
 
-      {/* Mobile Card List - visible on mobile only */}
+      <div className={`hidden md:grid ${desktopGridClass} bg-muted border-b text-sm font-semibold flex-shrink-0 px-4`}>
-      <div className="flex md:hidden flex-1 overflow-y-auto flex-col gap-2 px-4 py-2">
+        <span className="text-center p-3 px-0">OVR</span>
+        <span className="text-center p-3 px-0">SPR</span>
+        <span className="text-left p-3">Participant</span>
+      </div>
+
+      <div ref={parentRef} className="flex-1 overflow-y-auto">
         {participants.length === 0 ? (
           <div className="text-center py-8 text-muted-foreground text-sm">
             {emptyMessage}
           </div>
         ) : (
-          participants.map((participant) => {
+          <div
+            style={{
+              height: virtualizer.getTotalSize(),
+              position: "relative",
+              width: "100%",
+            }}
+          >
+            {virtualizer.getVirtualItems().map((virtualItem) => {
+              const participant = participants[virtualItem.index];
               const { isDrafted, isInQueue, isEligible, ineligibleReason } =
                 getParticipantState(participant, draftedParticipantIds, queueMap, eligibility);
+              const rank = participantRanks.get(participant.id);
 
               return (
                 <div
-                key={participant.id}
+                  key={virtualItem.key}
+                  data-index={virtualItem.index}
+                  ref={virtualizer.measureElement}
+                  style={{
+                    position: "absolute",
+                    top: virtualItem.start,
+                    left: 0,
+                    right: 0,
+                  }}
+                >
+                  <div className="md:hidden px-4 py-1">
+                    <div
                       className={`bg-card border rounded-lg p-3 flex items-start justify-between gap-3 transition-colors ${
                         isDrafted
                           ? "bg-muted/50 opacity-60"
@@ -431,7 +464,7 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
                             {participant.sport.name}
                           </Badge>
                           <span className="text-xs text-muted-foreground tabular-nums">
-                      OVR {participantRanks.get(participant.id)?.overallRank} · SPR {participantRanks.get(participant.id)?.sportRank}
+                            OVR {rank?.overallRank} · SPR {rank?.sportRank}
                           </span>
                           {isDrafted && (
                             <Badge variant="secondary" className="text-xs">
@@ -500,45 +533,10 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
                         </div>
                       )}
                     </div>
-            );
-          })
-        )}
                   </div>
 
-      {/* Desktop Table - hidden on mobile */}
+                  <div
-      <div className="hidden md:flex flex-1 overflow-hidden">
+                    className={`hidden md:grid ${desktopGridClass} items-center px-4 transition-colors border-t ${
-        <div className="h-full w-full overflow-y-auto">
-          <table className="w-full text-sm">
-            <thead className="bg-muted sticky top-0">
-              <tr>
-                <th className="text-center p-3 px-0 font-semibold">OVR</th>
-                <th className="text-center p-3 px-0 font-semibold">SPR</th>
-                <th className="text-left p-3 font-semibold">Participant</th>
-                <th className="text-left p-3 font-semibold">Sport</th>
-                {hasTeam && (
-                  <th className="text-right p-3 font-semibold">Queue</th>
-                )}
-              </tr>
-            </thead>
-            <tbody>
-              {participants.length === 0 ? (
-                <tr>
-                  <td
-                    colSpan={hasTeam ? 5 : 4}
-                    className="text-center py-8 text-muted-foreground"
-                  >
-                    {emptyMessage}
-                  </td>
-                </tr>
-              ) : (
-                participants.map((participant) => {
-                  const { isDrafted, isInQueue, isEligible, ineligibleReason } =
-                    getParticipantState(participant, draftedParticipantIds, queueMap, eligibility);
-
-                  return (
-                    <tr
-                      key={participant.id}
-                      className={`border-t transition-colors ${
                       isDrafted
                         ? "bg-muted/50 opacity-60"
                         : !isEligible
@@ -549,19 +547,22 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
                       !isEligible && !isDrafted ? ineligibleReason : undefined
                     }
                   >
-                      <td className="p-3 px-0 text-center text-muted-foreground tabular-nums">
+                    <span className="text-center text-muted-foreground tabular-nums p-3 px-0">
-                        {participantRanks.get(participant.id)?.overallRank}
+                      {rank?.overallRank}
-                      </td>
+                    </span>
-                      <td className="p-3 px-0 text-center text-muted-foreground tabular-nums">
+                    <span className="text-center text-muted-foreground tabular-nums p-3 px-0">
-                        {participantRanks.get(participant.id)?.sportRank}
+                      {rank?.sportRank}
-                      </td>
+                    </span>
-                      <td className="p-3">
+                    <div className="p-3">
                       <div className="flex items-center gap-2">
                         <span
                           className={`font-medium ${!isEligible && !isDrafted ? "text-muted-foreground" : ""}`}
                         >
                           {participant.name}
                         </span>
+                        <Badge variant="outline" className="text-xs">
+                          {participant.sport.name}
+                        </Badge>
                         {isDrafted && (
                           <Badge variant="secondary" className="text-xs">
                             Drafted
@@ -582,16 +583,12 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
                           </Badge>
                         )}
                       </div>
-                      </td>
+                    </div>
-                      <td className="p-3 text-muted-foreground">
-                        {participant.sport.name}
-                      </td>
                     {hasTeam && (
-                        <td className="p-3 text-right">
+                      <div className="p-3">
                         <div className="flex gap-2 justify-end items-center">
                           {!isDrafted && (
                             <>
-                                {/* Queue icon button */}
                               {!isInQueue ? (
                                 <Button
                                   variant="ghost"
@@ -619,7 +616,6 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
                                   <ListX className="h-4 w-4" />
                                 </Button>
                               )}
-                                {/* Draft button - always visible, disabled when not your turn */}
                               <Button
                                 variant="default"
                                 size="sm"
@@ -638,15 +634,14 @@ export const AvailableParticipantsSection = memo(function AvailableParticipantsS
                             </>
                           )}
                         </div>
-                        </td>
-                      )}
-                    </tr>
-                  );
-                })
-              )}
-            </tbody>
-          </table>
                       </div>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
       </div>
     </div>
   );

app/routes/leagues/$leagueId.draft.$seasonId.tsx

@@ -1395,6 +1395,7 @@ export default function DraftRoom() {
   const draftGrid = useMemo(() => {
     const teamCount = draftSlots.length;
     const rounds = season.draftRounds;
+    const pickMap = new Map(picks.map((p) => [p.pickNumber, p]));
     const grid: Array<
       Array<{
         pickNumber: number;
@@ -1415,7 +1416,7 @@ export default function DraftRoom() {
         const pickNumber = (round - 1) * teamCount + pickInRound;
         const teamId = draftSlots[teamIndex]?.team.id;
 
-        const pick = picks.find((p) => p.pickNumber === pickNumber);
+        const pick = pickMap.get(pickNumber);
 
         roundPicks.push({ pickNumber, round, pickInRound, teamId, pick });
       }
@@ -1502,10 +1503,7 @@ export default function DraftRoom() {
     }
   }, [userDraftedSportNames]);
 
-  const availableParticipantsSectionProps = {
+  const miniDraftGrid = useMemo(() => ({
-    participants: filteredParticipants,
-    participantRanks,
-    miniDraftGrid: {
     draftSlots,
     draftGrid,
     currentPick,
@@ -1515,7 +1513,12 @@ export default function DraftRoom() {
     onForceManualPickOpen: isCommissioner ? handleForceManualPickOpen : undefined,
     onReplacePick: isCommissioner ? handleReplacePickOpen : undefined,
     onRollbackToPick: isCommissioner && !isDraftComplete ? handleRollbackToPick : undefined,
-    },
+  }), [draftSlots, draftGrid, currentPick, currentRound, ownerMap, isCommissioner, handleForceAutopick, handleForceManualPickOpen, handleReplacePickOpen, handleRollbackToPick, isDraftComplete]);
+
+  const availableParticipantsSectionProps = useMemo(() => ({
+    participants: filteredParticipants,
+    participantRanks,
+    miniDraftGrid,
     searchQuery,
     sportFilters,
     hideDrafted,
@@ -1536,7 +1539,7 @@ export default function DraftRoom() {
     onMakePick: handleMakePick,
     onAddToQueue: handleAddToQueue,
     onRemoveFromQueue: handleRemoveFromQueue,
-  };
+  }), [filteredParticipants, participantRanks, miniDraftGrid, searchQuery, sportFilters, hideDrafted, hideIneligible, uniqueSports, draftedParticipantIds, queue, eligibility, canPick, userTeam, hideCompletedSports, userDraftedSportNames, handleHideCompletedSportsChange, handleMakePick, handleAddToQueue, handleRemoveFromQueue]);
 
   const draftGridSectionProps = {
     draftSlots,

package-lock.json

@@ -29,6 +29,7 @@
         "@react-router/express": "^7.7.1",
         "@react-router/node": "^7.7.1",
         "@sentry/react-router": "^10.43.0",
+        "@tanstack/react-virtual": "^3.13.24",
         "@types/nprogress": "^0.2.3",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
@@ -6491,6 +6492,33 @@
         "vite": "^5.2.0 || ^6 || ^7"
       }
     },
+    "node_modules/@tanstack/react-virtual": {
+      "version": "3.13.24",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.13.24.tgz",
+      "integrity": "sha512-aIJvz5OSkhNIhZIpYivrxrPTKYsjW9Uzy+sP/mx0S3sev2HyvPb7xmjbYvokzEpfgYHy/HjzJ2zFAETuUfgCpg==",
+      "license": "MIT",
+      "dependencies": {
+        "@tanstack/virtual-core": "3.14.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@tanstack/virtual-core": {
+      "version": "3.14.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.14.0.tgz",
+      "integrity": "sha512-JLANqGy/D6k4Ujmh8Tr25lGimuOXNiaVyXaCAZS0W+1390sADdGnyUdSWNIfd49gebtIxGMij4IktRVzrdr12Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      }
+    },
     "node_modules/@testing-library/cypress": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/@testing-library/cypress/-/cypress-10.1.0.tgz",

package.json

@@ -51,6 +51,7 @@
     "@react-router/express": "^7.7.1",
     "@react-router/node": "^7.7.1",
     "@sentry/react-router": "^10.43.0",
+    "@tanstack/react-virtual": "^3.13.24",
     "@types/nprogress": "^0.2.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",