👁️
deworm card animation and preview slightly
+21
-11
+10
-8
src/components/deck/CardSearchAutocomplete.tsx
+10
-8
src/components/deck/CardSearchAutocomplete.tsx
···
76
76
isDropdownOpen && debouncedSearch.trim().length > 0 && !isFetching && data;
77
77
78
78
// Auto-preview top result when search changes and results load
79
-
if (
80
-
debouncedSearch !== prevSearchRef.current &&
81
-
displayCards.length > 0 &&
82
-
debouncedSearch.trim().length > 0
83
-
) {
84
-
prevSearchRef.current = debouncedSearch;
85
-
onCardHover?.(displayCards[0].id);
86
-
}
79
+
useEffect(() => {
80
+
if (
81
+
debouncedSearch !== prevSearchRef.current &&
82
+
displayCards.length > 0 &&
83
+
debouncedSearch.trim().length > 0
84
+
) {
85
+
prevSearchRef.current = debouncedSearch;
86
+
onCardHover?.(displayCards[0].id);
87
+
}
88
+
}, [debouncedSearch, displayCards, onCardHover]);
87
89
88
90
useEffect(() => {
89
91
setIsDropdownOpen(inputValue.trim().length > 0);
+11
-3
src/routes/profile/$did/deck/$rkey/index.tsx
+11
-3
src/routes/profile/$did/deck/$rkey/index.tsx
···
2
2
import { type DragEndEvent, useDndMonitor } from "@dnd-kit/core";
3
3
import { useSuspenseQuery } from "@tanstack/react-query";
4
4
import { createFileRoute, Link } from "@tanstack/react-router";
5
-
import { useCallback, useMemo, useRef, useState } from "react";
5
+
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
6
6
import { ErrorBoundary } from "react-error-boundary";
7
7
import { toast } from "sonner";
8
8
import { CommentsPanel } from "@/components/comments/CommentsPanel";
···
222
222
[isOwner, mutation],
223
223
);
224
224
225
-
// Highlight cards that were changed - clear after paint so it can trigger again
225
+
// Highlight cards that were changed
226
226
const handleCardsChanged = (changedIds: Set<ScryfallId>) => {
227
227
setHighlightedCards(changedIds);
228
-
requestAnimationFrame(() => setHighlightedCards(new Set()));
229
228
};
229
+
230
+
// TODO: This timeout is a hack - ideally use animation IDs instead of boolean highlights
231
+
// Clear highlights after a delay so child animation effects have fired
232
+
useEffect(() => {
233
+
if (highlightedCards.size > 0) {
234
+
const id = setTimeout(() => setHighlightedCards(new Set()), 100);
235
+
return () => clearTimeout(id);
236
+
}
237
+
}, [highlightedCards]);
230
238
231
239
const handleCardHover = (cardId: ScryfallId | null) => {
232
240
// Only update preview if we have a card (persistence - don't clear on null)