👁️
5
fork

Configure Feed

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

mess with search results display

+25 -22
+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) => {