Send messages through an outbox, rather than sending them to the API directly from the UI.

This primarily serves to free up the message input immediately, so that the user can start drafting their next message right away. The wait while a message is being sent is actively disruptive when using Pilcrow on a server with noticable latency (hi.grimoire.ca has around 700ms), and this largely alleviates it.

Unsent messages can be lost if the client is closed or deactivated before they make it to the head of the queue.

2 files changed, 4 insertions, 2 deletions

diff --git a/ui/routes/(app)/+layout.js b/ui/routes/(app)/+layout.js
index 651bc8c..9c0afa8 100644
--- a/ui/routes/(app)/+layout.js
+++ b/ui/routes/(app)/+layout.js
@@ -1,8 +1,10 @@
 import * as session from '$lib/session.svelte.js';
+import { Outbox } from '$lib/outbox.svelte.js';
 
 export async function load() {
   let s = await session.boot();
   return {
+    outbox: Outbox.empty(),
     session: s
   };
 }
diff --git a/ui/routes/(app)/ch/[channel]/+page.svelte b/ui/routes/(app)/ch/[channel]/+page.svelte
index c8507cc..9506b67 100644
--- a/ui/routes/(app)/ch/[channel]/+page.svelte
+++ b/ui/routes/(app)/ch/[channel]/+page.svelte
@@ -7,7 +7,7 @@
   import * as api from '$lib/apiServer';
 
   const { data } = $props();
-  const { session } = data;
+  const { session, outbox } = data;
   let activeChannel;
 
   const channel = $derived(page.params.channel);
@@ -65,7 +65,7 @@
   }
 
   async function sendMessage(message) {
-    await api.postToChannel(channel, message);
+    outbox.send(channel, message);
   }
 
   async function deleteMessage(id) {