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.

1 files changed, 47 insertions, 0 deletions

diff --git a/ui/lib/outbox.svelte.js b/ui/lib/outbox.svelte.js
new file mode 100644
index 0000000..0681f29
--- /dev/null
+++ b/ui/lib/outbox.svelte.js
@@ -0,0 +1,47 @@
+import * as api from './apiServer.js';
+import * as md from './markdown.js';
+
+class Message {
+  constructor(channel, body) {
+    this.channel = channel;
+    this.body = body;
+    this.renderedBody = md.render(body);
+  }
+}
+
+export class Outbox {
+  pending = $state([]);
+
+  static empty() {
+    return new Outbox([]);
+  }
+
+  constructor(pending) {
+    this.pending = pending;
+  }
+
+  send(channel, body) {
+    this.pending.push(new Message(channel, body));
+    this.start();
+  }
+
+  start() {
+    if (this.sending) {
+      return;
+    }
+    // This is a promise transform primarily to keep the management of `this.sending` in one place,
+    // rather than spreading it across multiple methods.
+    this.sending = this.drain().finally(() => {
+      this.sending = null;
+    });
+  }
+
+  async drain() {
+    while (this.pending.length > 0) {
+      const { channel, body } = this.pending[0];
+
+      await api.retry(() => api.postToChannel(channel, body));
+      this.pending.shift();
+    }
+  }
+}