mirror of
https://github.com/coracle-social/coracle.git
synced 2024-09-29 08:21:20 +00:00
Spiff up search result loading indicator
This commit is contained in:
parent
073fe3f0dc
commit
92fd4fd8b1
@ -1,4 +1,5 @@
|
||||
<script lang="ts">
|
||||
import {slide} from "src/util/transition"
|
||||
import Input from "src/partials/Input.svelte"
|
||||
import Anchor from "src/partials/Anchor.svelte"
|
||||
import SearchResults from "src/app/shared/SearchResults.svelte"
|
||||
@ -9,6 +10,7 @@
|
||||
import {env, pubkey, canSign, hasNewNotifications, hasNewMessages} from "src/engine"
|
||||
|
||||
let innerWidth = 0
|
||||
let searching = false
|
||||
let searchInput
|
||||
|
||||
const {page} = router
|
||||
@ -65,16 +67,28 @@
|
||||
</div>
|
||||
{#if $searchTerm}
|
||||
<div
|
||||
class="absolute right-0 top-10 max-h-[70vh] w-96 overflow-auto rounded bg-tinted-700 shadow-2xl">
|
||||
<SearchResults showLoading term={searchTerm}>
|
||||
<div slot="result" let:result class="px-4 py-2 transition-colors hover:bg-neutral-800">
|
||||
{#if result.type === "topic"}
|
||||
#{result.topic.name}
|
||||
{:else if result.type === "profile"}
|
||||
<PersonBadge inert pubkey={result.id} class="cursor-pointer" />
|
||||
{/if}
|
||||
class="absolute right-0 top-10 w-96 rounded shadow-2xl">
|
||||
<div class="max-h-[70vh] overflow-auto bg-tinted-700 rounded">
|
||||
<SearchResults bind:searching term={searchTerm}>
|
||||
<div slot="result" let:result class="px-4 py-2 transition-colors hover:bg-neutral-800">
|
||||
{#if result.type === "topic"}
|
||||
#{result.topic.name}
|
||||
{:else if result.type === "profile"}
|
||||
<PersonBadge inert pubkey={result.id} class="cursor-pointer" />
|
||||
{/if}
|
||||
</div>
|
||||
</SearchResults>
|
||||
</div>
|
||||
{#if searching}
|
||||
<div
|
||||
transition:slide|local
|
||||
class="flex justify-center gap-2 bg-neutral-900 px-4 py-2 text-neutral-200">
|
||||
<div>
|
||||
<i class="fa fa-circle-notch fa-spin" />
|
||||
</div>
|
||||
Loading more options...
|
||||
</div>
|
||||
</SearchResults>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
@ -1,7 +1,6 @@
|
||||
<script lang="ts">
|
||||
import {throttle} from "throttle-debounce"
|
||||
import {derived} from "@welshman/lib"
|
||||
import {slide} from "src/util/transition"
|
||||
import {fuzzy} from "src/util/misc"
|
||||
import {parseAnything} from "src/util/nostr"
|
||||
import FlexColumn from "src/partials/FlexColumn.svelte"
|
||||
@ -11,7 +10,7 @@
|
||||
|
||||
export let term
|
||||
export let replace = false
|
||||
export let showLoading = false
|
||||
export let searching = null
|
||||
|
||||
const openTopic = topic => router.at("topics").of(topic).open({replace})
|
||||
|
||||
@ -71,6 +70,8 @@
|
||||
// Suppress the dialog for a moment if we're pasting an entity in since we'll immediately redirect
|
||||
let visible = false
|
||||
|
||||
$: searching = $loadingPeople
|
||||
|
||||
$: {
|
||||
if ($term) {
|
||||
loadPeople($term)
|
||||
@ -94,14 +95,4 @@
|
||||
<p class="text-center py-12">No results found.</p>
|
||||
{/each}
|
||||
</FlexColumn>
|
||||
{#if showLoading && $loadingPeople}
|
||||
<div
|
||||
transition:slide|local
|
||||
class="absolute bottom-0 left-0 right-0 flex gap-2 bg-tinted-700 px-4 py-2 text-neutral-200">
|
||||
<div>
|
||||
<i class="fa fa-circle-notch fa-spin" />
|
||||
</div>
|
||||
Loading more options...
|
||||
</div>
|
||||
{/if}
|
||||
{/if}
|
||||
|
@ -39,6 +39,7 @@
|
||||
|
||||
{#if data.length > 0 || (create && term)}
|
||||
<div
|
||||
transition:slide|local
|
||||
class="mt-2 flex max-h-[350px] flex-col overflow-y-auto overflow-x-hidden border border-solid border-neutral-600">
|
||||
{#if create && term}
|
||||
{@const i = data.length}
|
||||
@ -67,7 +68,7 @@
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
{#if loading}
|
||||
{#if loading && data.length > 0}
|
||||
<div transition:slide|local class="flex gap-2 bg-tinted-700 px-4 py-2 text-neutral-200">
|
||||
<div>
|
||||
<i class="fa fa-circle-notch fa-spin" />
|
||||
|
Loading…
Reference in New Issue
Block a user