👁️
5
fork

Configure Feed

Select the types of activity you want to include in your feed.

deworm card animation and preview slightly

+21 -11
+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
··· 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)