Spiff up search result loading indicator

src/app/Nav.svelte

@@ -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>

src/app/shared/SearchResults.svelte

@@ -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}

src/partials/Suggestions.svelte

@@ -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" />