From 1035eb815f5a4996d8f546aa4b85da29ccea5d73 Mon Sep 17 00:00:00 2001 From: Owen Jacobson Date: Fri, 2 May 2025 01:24:10 -0400 Subject: 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. --- ui/lib/outbox.svelte.js | 47 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 47 insertions(+) create mode 100644 ui/lib/outbox.svelte.js (limited to 'ui/lib/outbox.svelte.js') 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(); + } + } +} -- cgit v1.2.3