👁️
mess with search results display
+25
-22
+25
-22
src/routes/cards/index.tsx
+25
-22
src/routes/cards/index.tsx
···
5
5
AlertCircle,
6
6
ArrowUpDown,
7
7
ChevronDown,
8
-
ListFilter,
9
8
Loader2,
10
9
Search,
11
10
} from "lucide-react";
···
185
184
function CardsPage() {
186
185
const navigate = Route.useNavigate();
187
186
const search = Route.useSearch();
188
-
const { value: debouncedSearchQuery } = useDebounce(search.q || "", 400);
187
+
const { value: debouncedSearchQuery, isPending: isDebouncing } = useDebounce(
188
+
search.q || "",
189
+
400,
190
+
);
189
191
const searchInputRef = useRef<HTMLInputElement>(null);
190
192
const lastSyncedQuery = useRef<string>(search.q || "");
191
193
···
391
393
</option>
392
394
))}
393
395
</select>
394
-
<ListFilter className="absolute left-2 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none sm:hidden" />
396
+
<ArrowUpDown className="absolute left-2 top-1/2 -translate-y-1/2 w-4 h-4 text-gray-400 pointer-events-none sm:hidden" />
395
397
<ChevronDown className="absolute right-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-gray-400 pointer-events-none hidden sm:block" />
396
398
</div>
397
399
</div>
···
426
428
</div>
427
429
)}
428
430
429
-
{firstPage?.description && !hasError && (
430
-
<p className="text-sm text-gray-500 dark:text-gray-400 mt-2">
431
-
<OracleText text={firstPage.description} />
432
-
</p>
433
-
)}
434
-
435
431
{search.q && !hasError && (
436
-
<p className="text-sm text-gray-400 mt-2">
437
-
{totalCount > 0 && (
438
-
<>
439
-
Found {totalCount.toLocaleString()} results
440
-
{firstPage?.mode === "syntax" && " (syntax)"}
441
-
</>
432
+
<div className="text-sm mt-2 space-y-1">
433
+
{firstPage?.description && (
434
+
<p
435
+
className={`text-gray-500 dark:text-gray-400 ${isDebouncing ? "opacity-50" : ""}`}
436
+
>
437
+
<OracleText text={firstPage.description} />
438
+
</p>
442
439
)}
443
-
{totalCount === 0 &&
444
-
firstPage &&
445
-
!firstPageQuery.isFetching &&
446
-
"No results found"}
447
-
{!firstPage && firstPageQuery.isFetching && "Searching..."}
448
-
</p>
440
+
<p className="text-gray-400">
441
+
{isDebouncing
442
+
? "On your mark..."
443
+
: totalCount > 0
444
+
? `Found ${totalCount.toLocaleString()} results${firstPage?.mode === "syntax" ? " (syntax)" : ""}`
445
+
: firstPage && !firstPageQuery.isFetching
446
+
? "No results found"
447
+
: firstPageQuery.isFetching
448
+
? "Searching..."
449
+
: null}
450
+
</p>
451
+
</div>
449
452
)}
450
453
451
454
{!search.q && (
···
458
461
459
462
<div ref={listRef} className="px-6 pb-6">
460
463
<div
461
-
className="max-w-7xl mx-auto relative"
464
+
className={`max-w-7xl mx-auto relative transition-opacity ${isDebouncing ? "opacity-50" : ""}`}
462
465
style={{ height: virtualizer.getTotalSize() }}
463
466
>
464
467
{visibleItems.map((virtualRow) => {