vielle.dev
forked from
pds.ls/pdsls
atproto explorer
no suspense loading
handle.invalid
+13
-15
src/components/search.tsx
+13
-15
src/components/search.tsx
···
1
1
import { Client, CredentialManager } from "@atcute/client";
2
2
import { A, useLocation, useNavigate } from "@solidjs/router";
3
-
import { createResource, createSignal, For, onCleanup, onMount, Show, Suspense } from "solid-js";
3
+
import { createResource, createSignal, For, onCleanup, onMount, Show } from "solid-js";
4
4
import { isTouchDevice } from "../layout";
5
5
import { createDebouncedValue } from "../utils/hooks/debounced";
6
6
···
122
122
</div>
123
123
<Show when={search()?.length && input()}>
124
124
<div class="dark:bg-dark-300 dark:shadow-dark-800 absolute z-30 mt-2 flex w-full flex-col rounded-lg border-[0.5px] border-neutral-300 bg-neutral-50 p-1 shadow-md transition-opacity duration-200 dark:border-neutral-700 starting:opacity-0">
125
-
<Suspense fallback={<div class="p-1">Loading...</div>}>
126
-
<For each={search()}>
127
-
{(actor) => (
128
-
<A
129
-
class="flex items-center gap-2 rounded-lg p-1 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
130
-
href={`/at://${actor.did}`}
131
-
onClick={() => setShowSearch(false)}
132
-
>
133
-
<img src={actor.avatar} class="size-6 rounded-full" />
134
-
<span>{actor.handle}</span>
135
-
</A>
136
-
)}
137
-
</For>
138
-
</Suspense>
125
+
<For each={search()}>
126
+
{(actor) => (
127
+
<A
128
+
class="flex items-center gap-2 rounded-lg p-1 hover:bg-neutral-200 active:bg-neutral-300 dark:hover:bg-neutral-700 dark:active:bg-neutral-600"
129
+
href={`/at://${actor.did}`}
130
+
onClick={() => setShowSearch(false)}
131
+
>
132
+
<img src={actor.avatar} class="size-6 rounded-full" />
133
+
<span>{actor.handle}</span>
134
+
</A>
135
+
)}
136
+
</For>
139
137
</div>
140
138
</Show>
141
139
</form>