👁️
show any playsets as placeholders
+18
-1
+18
-1
src/components/DeckPreview.tsx
+18
-1
src/components/DeckPreview.tsx
···
117
117
118
118
const deckWords = useMemo(() => getDeckNameWords(deck.name), [deck.name]);
119
119
120
+
const isLoadingCards = cardQueries.some((q) => q.isLoading);
121
+
120
122
const previewCardIds = useMemo(() => {
121
123
if (hasCommanders) {
122
124
return commanders.slice(0, 3).map((c) => c.scryfallId);
125
+
}
126
+
127
+
// While loading, show top 3 by quantity as placeholders
128
+
if (isLoadingCards) {
129
+
return mainboardCards
130
+
.sort((a, b) => b.quantity - a.quantity)
131
+
.slice(0, 3)
132
+
.map((c) => c.scryfallId);
123
133
}
124
134
125
135
// Filter lands, sort by quantity (tiebreak by name matching deck title), take top 3
···
143
153
})
144
154
.slice(0, 3)
145
155
.map(({ deckCard }) => deckCard.scryfallId);
146
-
}, [hasCommanders, commanders, mainboardCards, cardQueries, deckWords]);
156
+
}, [
157
+
hasCommanders,
158
+
commanders,
159
+
mainboardCards,
160
+
cardQueries,
161
+
deckWords,
162
+
isLoadingCards,
163
+
]);
147
164
148
165
return (
149
166
<Link