From 7015ed136c3aa90d85c0235d8e86b5121a8b7b14 Mon Sep 17 00:00:00 2001
From: Jonathan Staab <shtaab@gmail.com>
Date: Wed, 30 Nov 2022 20:47:53 -0800
Subject: [PATCH] Add some loading icons

---
 package-lock.json              | Bin 257394 -> 258034 bytes
 package.json                   |   1 +
 src/App.svelte                 |  18 +++++++++----
 src/partials/Note.svelte       |   5 +---
 src/partials/NoteDetail.svelte |  47 +++++++++++++++++++--------------
 src/routes/ChatRoom.svelte     |   2 +-
 src/routes/Notes.svelte        |  12 ++++++---
 src/routes/UserDetail.svelte   |  24 ++++++++++++++---
 8 files changed, 72 insertions(+), 37 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index af9bf6220ab569e2472c59bc745891d93cc7942b..9af4fd01acea77c462cc2394f486bffcaf0242c7 100644
GIT binary patch
delta 417
zcmex#i~rMo{ta$SQaSmFDVcfcy2S;Vd3mWt#Y$ERN^u5y#(E}`1+|2ypWV*P)f~XI
zJ%EYv_-lSN#nU%RFi9~QPhJpXJbm9AMs^)E`C@%t{o=CJoRU;sbQxWP=?gL#)xyfW
z6T{671AU#Hl0*D5vmD)%4RS+sEV7MV0?o`aBXbMPe4Q+ueBGTRD#NoajFLi%l6@*I
z-2C%`b1l<cwJi$GLdvUL%mREu^CR6nN(?+bEsZ0}r+>V`DAz9dj&Zx-JElD+sqgMk
Snz(y<-!^86?Z6;kY6<`{kCWv9

delta 39
vcmex#pa0V>{ta$S(|va_b2Zm8ZLeiwJpQ`9<UQl|lJ`v8PHqQ^FEs@Kb1)KX

diff --git a/package.json b/package.json
index 2be7b7bc..39959a28 100644
--- a/package.json
+++ b/package.json
@@ -30,6 +30,7 @@
     "hurdak": "github:ConsignCloud/hurdak",
     "nostr-tools": "github:fiatjaf/nostr-tools#1b798b2",
     "ramda": "^0.28.0",
+    "svelte-loading-spinners": "^0.3.4",
     "svelte-routing": "^1.6.0",
     "throttle-debounce": "^5.0.0",
     "vite-plugin-node-polyfills": "^0.5.0"
diff --git a/src/App.svelte b/src/App.svelte
index 93dc9f4e..b350f5c8 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -50,10 +50,14 @@
     modal.subscribe($modal => {
       // Keep scroll position on body, but don't allow scrolling
       if ($modal) {
-        scrollY = window.scrollY
 
-        document.body.style.top = `-${scrollY}px`
-        document.body.style.position = `fixed`
+        // This is not idempotent, so don't duplicate it
+        if (document.body.style.position !== 'fixed') {
+          scrollY = window.scrollY
+
+          document.body.style.top = `-${scrollY}px`
+          document.body.style.position = `fixed`
+        }
       } else {
         document.body.style = ''
         window.scrollTo(0, scrollY)
@@ -77,11 +81,15 @@
       <Route path="/chat/new" component={ChatEdit} />
       <Route path="/chat/:room" let:params>
         {#key params.room}
-        <ChatRoom room={params.room} />
+        <ChatRoom {...params} />
         {/key}
       </Route>
       <Route path="/chat/:room/edit" component={ChatEdit} />
-      <Route path="/users/:pubkey" component={UserDetail} />
+      <Route path="/users/:pubkey" let:params>
+        {#key params.pubkey}
+        <UserDetail {...params} />
+        {/key}
+      </Route>
       <Route path="/settings/keys" component={Keys} />
       <Route path="/settings/relays" component={RelayList} />
       <Route path="/settings/profile" component={Profile} />
diff --git a/src/partials/Note.svelte b/src/partials/Note.svelte
index 9534ef81..c9aebb0c 100644
--- a/src/partials/Note.svelte
+++ b/src/partials/Note.svelte
@@ -37,11 +37,8 @@
   }
 
   const showParent = async () => {
-    const notes = await annotateNotes(
-      await channels.getter.all({kinds: [1, 5, 7], ids: [parentId]})
-    )
 
-    modal.set({note: notes[0]})
+    modal.set({note: {id: parentId}})
   }
 
   const react = content => {
diff --git a/src/partials/NoteDetail.svelte b/src/partials/NoteDetail.svelte
index 5ff38b92..0675d731 100644
--- a/src/partials/NoteDetail.svelte
+++ b/src/partials/NoteDetail.svelte
@@ -1,20 +1,28 @@
 <script>
   import {onMount} from 'svelte'
   import {writable} from 'svelte/store'
+  import {fly} from 'svelte/transition'
   import {find, propEq} from 'ramda'
-  import {Cursor} from "src/state/nostr"
-  import {notesListener, modal} from "src/state/app"
+  import Spinner from 'src/partials/Spinner.svelte'
+  import {Cursor, channels} from "src/state/nostr"
+  import {notesListener, annotateNotes, modal} from "src/state/app"
   import {user} from "src/state/user"
   import Note from 'src/partials/Note.svelte'
 
   export let note
 
-  const notes = writable([note])
+  const notes = writable([])
   let cursor
   let listener
 
   onMount(() => {
-    cursor = new Cursor({ids: [note.id]}, note.created_at)
+    channels.getter
+      .all({kinds: [1, 5, 7], ids: [note.id]})
+      .then(annotateNotes)
+      .then($notes => {
+        notes.set($notes)
+      })
+
     listener = notesListener(notes, [
       {kinds: [1, 5, 7], '#e': [note.id]},
       // We can't target reaction deletes by e tag, so get them
@@ -25,10 +33,6 @@
     // Populate our initial empty space
     listener.start()
 
-    const unsubNotes = notes.subscribe($notes => {
-      note = find(propEq('id', note.id), $notes)
-    })
-
     // Unsubscribe when modal closes so that others can re-subscribe sooner
     const unsubModal = modal.subscribe($modal => {
       cursor?.stop()
@@ -36,27 +40,30 @@
     })
 
     return () => {
-      unsubNotes()
       unsubModal()
     }
   })
 </script>
 
-{#if note.pubkey}
-<Note showEntire note={note} />
-{#each note.replies as r (r.id)}
-  <div class="ml-4 border-l border-solid border-medium">
-    <Note interactive invertColors isReply note={r} />
-  {#each r.replies as r2 (r2.id)}
+{#each $notes as note (note.id)}
+<div n:fly={{y: 20}}>
+  <Note showEntire note={note} />
+  {#each note.replies as r (r.id)}
     <div class="ml-4 border-l border-solid border-medium">
-      <Note interactive invertColors isReply note={r2} />
-    {#each r2.replies as r3 (r3.id)}
+      <Note interactive invertColors isReply note={r} />
+    {#each r.replies as r2 (r2.id)}
       <div class="ml-4 border-l border-solid border-medium">
-        <Note interactive invertColors isReply note={r3} />
+        <Note interactive invertColors isReply note={r2} />
+      {#each r2.replies as r3 (r3.id)}
+        <div class="ml-4 border-l border-solid border-medium">
+          <Note interactive invertColors isReply note={r3} />
+        </div>
+      {/each}
       </div>
     {/each}
     </div>
   {/each}
-  </div>
+</div>
+{:else}
+<Spinner />
 {/each}
-{/if}
diff --git a/src/routes/ChatRoom.svelte b/src/routes/ChatRoom.svelte
index 18c527dc..fa13d3e6 100644
--- a/src/routes/ChatRoom.svelte
+++ b/src/routes/ChatRoom.svelte
@@ -134,7 +134,7 @@
 <div class="flex gap-4 h-full">
   <div class="sm:ml-56 w-full">
     <div class="relative">
-      <div class="flex flex-col pt-20 pb-32">
+      <div class="flex flex-col py-32">
         <ul class="p-4 max-h-full flex-grow flex flex-col-reverse" name="messages">
           {#each annotatedMessages as m (m.id)}
             <li in:fly={{y: 20}} class="py-1">
diff --git a/src/routes/Notes.svelte b/src/routes/Notes.svelte
index d1122d50..d4eb0f34 100644
--- a/src/routes/Notes.svelte
+++ b/src/routes/Notes.svelte
@@ -5,6 +5,7 @@
   import {navigate} from "svelte-routing"
   import {uniqBy, prop} from 'ramda'
   import Anchor from "src/partials/Anchor.svelte"
+  import Spinner from "src/partials/Spinner.svelte"
   import Note from "src/partials/Note.svelte"
   import {relays, Cursor} from "src/state/nostr"
   import {scroller, annotateNotes, notesListener, modal} from "src/state/app"
@@ -31,7 +32,7 @@
     scroll()
 
     // When a modal opens, suspend our subscriptions
-    modal.subscribe(async $modal => {
+    const modalUnsub = modal.subscribe(async $modal => {
       if ($modal) {
         cursor.stop()
         listener.stop()
@@ -40,6 +41,10 @@
         listener.start()
       }
     })
+
+    return () => {
+      modalUnsub()
+    }
   })
 
   onDestroy(() => {
@@ -61,11 +66,10 @@
       {/each}
     </li>
   {/each}
-  <li class="flex justify-center py-12" in:fly={{y: 20}}>
-    <p>Loading notes...</p>
-  </li>
 </ul>
 
+<!-- This will always be sitting at the bottom in case infinite scrolling can't keep up -->
+<Spinner />
 
 {#if $relays.length > 0}
 <div class="fixed bottom-0 right-0 p-8">
diff --git a/src/routes/UserDetail.svelte b/src/routes/UserDetail.svelte
index fcc12fed..909c90be 100644
--- a/src/routes/UserDetail.svelte
+++ b/src/routes/UserDetail.svelte
@@ -4,7 +4,8 @@
   import {uniqBy, prop} from 'ramda'
   import {fly} from 'svelte/transition'
   import Note from "src/partials/Note.svelte"
-  import {Cursor} from 'src/state/nostr'
+  import Spinner from "src/partials/Spinner.svelte"
+  import {Cursor, epoch} from 'src/state/nostr'
   import {user as currentUser} from 'src/state/user'
   import {accounts, scroller, notesListener, modal, annotateNotes} from "src/state/app"
 
@@ -15,12 +16,15 @@
   let cursor
   let listener
   let scroll
+  let interval
+  let loading = true
+  let modalUnsub
 
   $: user = $accounts[pubkey]
 
   onMount(async () => {
     cursor = new Cursor({kinds: [1], authors: [pubkey]})
-    listener = await notesListener(notes, {kinds: [1, 5, 7], authors: [pubkey]})
+    listener = await notesListener(notes, [{kinds: [1], authors: [pubkey]}, {kinds: [5, 7]}])
     scroll = scroller(cursor, async chunk => {
       const annotated = await annotateNotes(chunk, {showParents: true})
 
@@ -30,8 +34,13 @@
     // Populate our initial empty space
     scroll()
 
+    // Track loading based on cursor cutoff date
+    interval = setInterval(() => {
+      loading = cursor.since > epoch
+    }, 1000)
+
     // When a modal opens, suspend our subscriptions
-    modal.subscribe(async $modal => {
+    modalUnsub = modal.subscribe(async $modal => {
       if ($modal) {
         cursor.stop()
         listener.stop()
@@ -45,7 +54,10 @@
   onDestroy(() => {
     cursor?.stop()
     listener?.stop()
+    modalUnsub()
+    clearInterval(interval)
   })
+
 </script>
 
 <svelte:window on:scroll={scroll} />
@@ -81,6 +93,12 @@
         </div>
       {/each}
     </li>
+    {:else}
+    {#if loading}
+    <li><Spinner /></li>
+    {:else}
+    <li class="p-20 text-center" in:fly={{y: 20}}>No notes found.</li>
+    {/if}
     {/each}
   </ul>
 </div>