atmosphere explorer
0
fork

Configure Feed

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

optimize search in car explorer

Juliet d7e8dd78 e4cb2ca7

+29 -9
+29 -9
src/views/car/explore.tsx
··· 5 5 import { fromStream, isCommit } from "@atcute/repo"; 6 6 import * as TID from "@atcute/tid"; 7 7 import { Title } from "@solidjs/meta"; 8 - import { createEffect, createMemo, createSignal, For, Match, Show, Switch } from "solid-js"; 8 + import { 9 + createEffect, 10 + createMemo, 11 + createSignal, 12 + For, 13 + Match, 14 + Show, 15 + Switch, 16 + untrack, 17 + } from "solid-js"; 9 18 import { Button } from "../../components/button.jsx"; 10 19 import { Favicon } from "../../components/favicon.jsx"; 11 20 import { JSONValue } from "../../components/json.jsx"; ··· 13 22 import { isTouchDevice } from "../../layout.jsx"; 14 23 import { didDocCache, resolveDidDoc } from "../../utils/api.js"; 15 24 import { localDateFromTimestamp } from "../../utils/date.js"; 25 + import { createDebouncedValue } from "../../utils/hooks/debounced.js"; 16 26 import { createDropHandler, createFileChangeHandler, handleDragOver } from "./file-handlers.js"; 17 27 import { 18 28 type Archive, ··· 424 434 onRoute: (view: View) => void; 425 435 }) => { 426 436 const [filter, setFilter] = createSignal(""); 437 + const debouncedFilter = createDebouncedValue(filter, 150); 427 438 const [displayCount, setDisplayCount] = createSignal(RECORDS_PER_PAGE); 428 439 429 440 // Sort entries by TID timestamp (most recent first), non-TID entries go to the end ··· 441 452 }); 442 453 }); 443 454 455 + const searchableEntries = createMemo(() => { 456 + return sortedEntries().map((entry) => ({ 457 + entry, 458 + searchText: JSON.stringify(entry.record).toLowerCase(), 459 + })); 460 + }); 461 + 444 462 const filteredEntries = createMemo(() => { 445 - const f = filter().toLowerCase().trim(); 463 + const f = debouncedFilter().toLowerCase().trim(); 446 464 if (!f) return sortedEntries(); 447 - return sortedEntries().filter((entry) => 448 - JSON.stringify(entry.record).toLowerCase().includes(f), 449 - ); 465 + return searchableEntries() 466 + .filter(({ searchText }) => searchText.includes(f)) 467 + .map(({ entry }) => entry); 468 + }); 469 + 470 + createEffect(() => { 471 + debouncedFilter(); 472 + untrack(() => setDisplayCount(RECORDS_PER_PAGE)); 450 473 }); 451 474 452 475 const displayedEntries = createMemo(() => { ··· 475 498 <TextInput 476 499 placeholder="Filter records" 477 500 value={filter()} 478 - onInput={(e) => { 479 - setFilter(e.currentTarget.value); 480 - setDisplayCount(RECORDS_PER_PAGE); 481 - }} 501 + onInput={(e) => setFilter(e.currentTarget.value)} 482 502 class="grow text-sm" 483 503 /> 484 504