Load a conversation's history on the client

The conversation pages rendered their messages on the server, so a page the back button restored from the back-forward cache showed an old thread. The server now renders everything else (rail, header, composer) and the history (active session, latest messages, active task) loads from api/admin/bots/conversation-history once the page is on screen, with a loading line under the header, and again on a pageshow restore. Messages sent or pushed while it loads are merged with it. Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-10-25 03:55:38 +01:00
parent cdb93ac1bc
commit d542b4e9ad
15 changed files with 485 additions and 63 deletions
@@ -0,0 +1,33 @@
+import Stack from "@moduletrace/twui/layout/Stack";
+import Span from "@moduletrace/twui/layout/Span";
+import { twMerge } from "tailwind-merge";
+
+type Props = {
+    label?: string;
+    className?: string;
+};
+
+/**
+ * A thin line sweeping across, set just under a pane header while its
+ * page loads. Takes no height (it overlays the top of what follows), so
+ * nothing moves when it goes. Under reduced motion it holds still.
+ */
+export default function LoadingLine({ label = "Loading", className }: Props) {
+    return (
+        <Stack
+            role="progressbar"
+            aria-label={label}
+            className={twMerge("relative h-0 w-full shrink-0 gap-0! z-10", className)}
+        >
+            <Stack className="absolute inset-x-0 top-0 h-0.5 gap-0! overflow-hidden bg-ink/5">
+                <Span
+                    className={twMerge(
+                        "block h-full w-1/3 bg-linear-to-r from-transparent via-ink to-transparent",
+                        "animate-loading-line",
+                        "motion-reduce:animate-none motion-reduce:w-full motion-reduce:opacity-30",
+                    )}
+                />
+            </Stack>
+        </Stack>
+    );
+}