Show replies only after most events are loaded

src/agent/network.ts

@@ -173,7 +173,15 @@ const streamContext = ({notes, onChunk, depth = 0}) =>
         }
 
         depth -= 1
-        events = await load({relays, filter, onChunk})
+
+        const promise = load({relays, filter, onChunk})
+
+        // Don't await the promise when we're on the last level, since we won't be
+        // displaying those replies, and we await `load` before showing children
+        // to reduce reflow
+        if (depth > 0) {
+          events = await promise
+        }
       }
     })
   )

src/partials/Notes.svelte

@@ -18,6 +18,7 @@
 
   let notes = []
   let notesBuffer = []
+  let showReplies = false
 
   const since = now()
   const maxNotes = 100
@@ -48,6 +49,8 @@
       onChunk: context => {
         notes = network.applyContext(notes, context)
       },
+    }).then(() => {
+      showReplies = true
     })
 
     // Show replies grouped by parent whenever possible
@@ -108,7 +111,7 @@
 
   <div>
     {#each notes as note (note.id)}
-    <Note depth={2} {note} />
+    <Note depth={showReplies ? 2 : 0} {note} />
     {/each}
   </div>
 

src/routes/Alerts.svelte

@@ -23,7 +23,10 @@
     return createScroller(async () => {
       limit += 10
 
-      const events = await database.alerts.all()
+      // Filter out alerts for which we failed to find the required context. The bug
+      // is really upstream of this, but it's an easy fix
+      const events = database.alerts.all()
+        .filter(e => e.replies.length > 0 || e.likedBy.length > 0 || e.isMention)
 
       notes = sortBy(e => -e.created_at, events).slice(0, limit)
     })