From a378ecbad4cc94e4f1abf16451de643b88751293 Mon Sep 17 00:00:00 2001
From: Jon Staab <shtaab@gmail.com>
Date: Wed, 11 Dec 2024 10:31:39 -0800
Subject: [PATCH] Improve loading indicator in channels

---
 src/lib/components/Spinner.svelte             |  2 +-
 src/routes/spaces/[relay]/[room]/+page.svelte | 19 +++++++------------
 2 files changed, 8 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/Spinner.svelte b/src/lib/components/Spinner.svelte
index d9fd55a..0d99961 100644
--- a/src/lib/components/Spinner.svelte
+++ b/src/lib/components/Spinner.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import {slide, fade} from "svelte/transition"
 
-  export let loading
+  export let loading = false
 </script>
 
 <span class="flex min-h-10 items-center">
diff --git a/src/routes/spaces/[relay]/[room]/+page.svelte b/src/routes/spaces/[relay]/[room]/+page.svelte
index e1cd86d..cd9ceed 100644
--- a/src/routes/spaces/[relay]/[room]/+page.svelte
+++ b/src/routes/spaces/[relay]/[room]/+page.svelte
@@ -91,7 +91,7 @@
     })
 
   let limit = 30
-  let loading = true
+  let loading = sleep(5000)
   let unsub: () => void
   let element: HTMLElement
   let scroller: Scroller
@@ -135,6 +135,7 @@
       threshold: 3000,
       onScroll: () => {
         limit += 30
+        loading = sleep(5000)
       },
     })
 
@@ -146,10 +147,6 @@
     scroller?.stop()
     unsub?.()
   })
-
-  setTimeout(() => {
-    loading = false
-  }, 5000)
 </script>
 
 <div class="relative flex h-full flex-col">
@@ -190,13 +187,11 @@
       {/if}
     {/each}
     <p class="flex h-10 items-center justify-center py-20">
-      <Spinner {loading}>
-        {#if loading}
-          Looking for messages...
-        {:else}
-          End of message history
-        {/if}
-      </Spinner>
+      {#await loading}
+        <Spinner loading>Looking for messages...</Spinner>
+      {:then}
+        <Spinner>End of message history</Spinner>
+      {/await}
     </p>
   </div>
   <ChannelCompose bind:editor {content} {onSubmit} />