From 152e6ab263d64af2bba84b730e435e870b2b68a9 Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Fri, 28 Aug 2026 11:01:54 +0100
Subject: [PATCH] web/components: improve loading state for watch button

Signed-off-by: oppiliappan <me@oppi.li>
---
 .../repo/SubscribeButton.stories.svelte       | 234 ++++++++++++++++++
 .../components/repo/SubscribeButton.svelte    |  43 ++--
 2 files changed, 263 insertions(+), 14 deletions(-)
 create mode 100644 web/src/lib/components/repo/SubscribeButton.stories.svelte

diff --git a/web/src/lib/components/repo/SubscribeButton.stories.svelte b/web/src/lib/components/repo/SubscribeButton.stories.svelte
new file mode 100644
index 000000000..7be62d01c
--- /dev/null
+++ b/web/src/lib/components/repo/SubscribeButton.stories.svelte
@@ -0,0 +1,234 @@
+<script module lang="ts">
+	import { defineMeta, type StoryContext } from "@storybook/addon-svelte-csf";
+	import { expect, screen, userEvent, waitFor } from "storybook/test";
+	import SubscribeButton from "./SubscribeButton.svelte";
+
+	const BOBBIN_URL = "https://bobbin.example.test";
+	const GET_SUB = "org.tangled.feed.subscription.getForActor";
+	const SUB_URI = "at://did:plc:alice/org.tangled.feed.subscription/3lksub";
+
+	type FetchMode = "loading" | "not-subscribed" | "subscribed" | "error";
+
+	// the initial subscription check goes through window.fetch (via createBobbinClient),
+	// so each story swaps in a fetch mock that answers the getForActor query differently.
+	const mockFetch = (mode: FetchMode): typeof fetch => {
+		if (mode === "loading") {
+			return (() => new Promise<Response>(() => {})) as typeof fetch;
+		}
+		return (async (input: RequestInfo | URL) => {
+			const url = String(input instanceof Request ? input.url : input);
+			if (!url.includes(GET_SUB)) return new Response(null, { status: 404 });
+			switch (mode) {
+				case "not-subscribed":
+					return new Response(null, { status: 404 });
+				case "subscribed":
+					return Response.json({ uri: SUB_URI });
+				case "error":
+					return Response.json(
+						{ error: "InternalError", message: "bobbin is down" },
+						{ status: 500 }
+					);
+			}
+		}) as typeof fetch;
+	};
+
+	const installFetchMock = ({
+		parameters
+	}: {
+		parameters: Record<string, unknown>;
+	}) => {
+		const mode = (parameters.fetchMode as FetchMode) ?? "not-subscribed";
+		const original = window.fetch;
+		window.fetch = mockFetch(mode);
+		return () => {
+			window.fetch = original;
+		};
+	};
+
+	// the toggle (create/delete) goes through the mock agent's handler instead, so a
+	// story that needs a successful toggle passes `respond` on the auth parameter.
+	const respond = (pathname: string): Response => {
+		if (pathname.includes("createRecord")) {
+			return Response.json({
+				uri: "at://did:plc:alice/org.tangled.feed.subscription/3lknew",
+				cid: "bafyreibfko5xzzdptcimcaql4tmsaffgr6jhreyjz3tv6nlh34si6k4u7e"
+			});
+		}
+		if (pathname.includes("deleteRecord")) {
+			return Response.json({});
+		}
+		return new Response(null, { status: 404 });
+	};
+
+	type PlayContext = Pick<StoryContext<Record<string, unknown>>, "canvas">;
+
+	// loading: the button keeps its "Watch" label + eye icon but is disabled, rather
+	// than swapping to a spinner-only loading state
+	const loadingState = async ({ canvas }: PlayContext) => {
+		const button = await canvas.findByRole("button", { name: /subscribe to notifications/i });
+		await expect(button).toBeDisabled();
+		await expect(button).toHaveTextContent("Watch");
+	};
+
+	const notWatching = async ({ canvas }: PlayContext) => {
+		const button = await canvas.findByRole("button", { name: /subscribe to notifications/i });
+		await waitFor(() => expect(button).toBeEnabled());
+		await expect(button).toHaveTextContent("Watch");
+	};
+
+	const watching = async ({ canvas }: PlayContext) => {
+		const button = await canvas.findByRole("button", {
+			name: /unsubscribe from notifications/i
+		});
+		await waitFor(() => expect(button).toBeEnabled());
+		await expect(button).toHaveTextContent("Watching");
+	};
+
+	// clicking subscribe: the icon swaps to a spinner while the request is in flight,
+	// then settles on "Watching" with the eye-off icon
+	const subscribing = async ({ canvas }: PlayContext) => {
+		const button = await canvas.findByRole("button", { name: /subscribe to notifications/i });
+		await waitFor(() => expect(button).toBeEnabled());
+		await userEvent.click(button);
+		await waitFor(() =>
+			expect(
+				canvas.getByRole("button", { name: /unsubscribe from notifications/i })
+			).toBeVisible()
+		);
+	};
+
+	const unsubscribing = async ({ canvas }: PlayContext) => {
+		const button = await canvas.findByRole("button", {
+			name: /unsubscribe from notifications/i
+		});
+		await waitFor(() => expect(button).toBeEnabled());
+		await userEvent.click(button);
+		await waitFor(() =>
+			expect(canvas.getByRole("button", { name: /subscribe to notifications/i })).toBeVisible()
+		);
+	};
+
+	// the subscription query failed: the button turns red with a triangle-alert icon,
+	// and hovering shows the error message in a tooltip. the error state clears itself
+	// after 2s, dropping the button back to its normal default state.
+	const loadError = async ({ canvas }: PlayContext) => {
+		await waitFor(() =>
+			expect(
+				canvas.getByRole("button", { name: /subscribe to notifications/i })
+			).toHaveAttribute("data-variant", "danger")
+		);
+		const button = canvas.getByRole("button", { name: /subscribe to notifications/i });
+		await expect(button).toHaveTextContent("Watch");
+		await userEvent.hover(button);
+		await waitFor(() =>
+			expect(screen.getByRole("tooltip")).toHaveTextContent("Could not load subscription state")
+		);
+		await waitFor(
+			() =>
+				expect(
+					canvas.getByRole("button", { name: /subscribe to notifications/i })
+				).not.toHaveAttribute("data-variant", "danger"),
+			{ timeout: 3000 }
+		);
+		await expect(canvas.queryByRole("tooltip")).toBeNull();
+	};
+
+	// the toggle request failed: the button falls into the same red error state, then
+	// clears back to normal after 2s
+	const toggleError = async ({ canvas }: PlayContext) => {
+		const button = await canvas.findByRole("button", { name: /subscribe to notifications/i });
+		await waitFor(() => expect(button).toBeEnabled());
+		await userEvent.click(button);
+		await waitFor(() =>
+			expect(
+				canvas.getByRole("button", { name: /subscribe to notifications/i })
+			).toHaveAttribute("data-variant", "danger")
+		);
+		await waitFor(
+			() =>
+				expect(
+					canvas.getByRole("button", { name: /subscribe to notifications/i })
+				).not.toHaveAttribute("data-variant", "danger"),
+			{ timeout: 3000 }
+		);
+	};
+
+	const { Story } = defineMeta({
+		title: "Repo/SubscribeButton",
+		component: SubscribeButton,
+		tags: ["autodocs"],
+		parameters: {
+			sveltekit_experimental: {
+				state: { page: { data: { publicConfig: { bobbinUrl: BOBBIN_URL } } } }
+			}
+		},
+		beforeEach: installFetchMock
+	});
+</script>
+
+<Story
+	name="Loading"
+	asChild
+	play={loadingState}
+	parameters={{ auth: true, fetchMode: "loading" }}
+>
+	<SubscribeButton repoDid="did:plc:repo" />
+</Story>
+
+<Story
+	name="Not watching"
+	asChild
+	play={notWatching}
+	parameters={{ auth: true, fetchMode: "not-subscribed" }}
+>
+	<SubscribeButton repoDid="did:plc:repo" />
+</Story>
+
+<Story
+	name="Watching"
+	asChild
+	play={watching}
+	parameters={{ auth: true, fetchMode: "subscribed" }}
+>
+	<SubscribeButton repoDid="did:plc:repo" />
+</Story>
+
+<Story
+	name="Subscribing"
+	asChild
+	play={subscribing}
+	parameters={{ auth: { respond }, fetchMode: "not-subscribed" }}
+>
+	<SubscribeButton repoDid="did:plc:repo" />
+</Story>
+
+<Story
+	name="Unsubscribing"
+	asChild
+	play={unsubscribing}
+	parameters={{ auth: { respond }, fetchMode: "subscribed" }}
+>
+	<SubscribeButton repoDid="did:plc:repo" />
+</Story>
+
+<Story
+	name="Load error"
+	asChild
+	play={loadError}
+	parameters={{ auth: true, fetchMode: "error" }}
+>
+	<SubscribeButton repoDid="did:plc:repo" />
+</Story>
+
+<Story
+	name="Toggle error"
+	asChild
+	play={toggleError}
+	parameters={{ auth: true, fetchMode: "not-subscribed" }}
+>
+	<SubscribeButton repoDid="did:plc:repo" />
+</Story>
+
+<Story name="Signed out" asChild parameters={{ auth: false }}>
+	<SubscribeButton repoDid="did:plc:repo" />
+</Story>
diff --git a/web/src/lib/components/repo/SubscribeButton.svelte b/web/src/lib/components/repo/SubscribeButton.svelte
index f843a767a..da71f5908 100644
--- a/web/src/lib/components/repo/SubscribeButton.svelte
+++ b/web/src/lib/components/repo/SubscribeButton.svelte
@@ -1,15 +1,15 @@
 <script lang="ts">
   import { page } from "$app/state";
   import Eye from "$icon/eye";
-  import EyeOff from "$icon/eye-off";
   import { getAuth } from "$lib/auth.svelte";
   import { loginWithReturn } from "$lib/auth/guards";
   import { createSubscription, deleteSubscription, getSubscriptionRkey } from "$lib/api/graph";
   import { createBobbinClient } from "$lib/api/client";
+  import TriangleAlert from "$icon/triangle-alert";
   import Button from "$lib/components/ui/Button.svelte";
-
-
   import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
+  import Spinner from "$lib/components/ui/Spinner.svelte";
+  import Tooltip from "$lib/components/ui/Tooltip.svelte";
   import { resolve } from "$app/paths";
 
   interface Props {
@@ -51,6 +51,14 @@
     return () => { cancelled = true; };
   });
 
+  $effect(() => {
+    if (!error) return;
+    const timer = setTimeout(() => {
+      error = null;
+    }, 2000);
+    return () => clearTimeout(timer);
+  });
+
   const toggle = async () => {
     const agent = auth.agent;
     if (!agent || loading || toggling || !repoDid) return;
@@ -74,25 +82,32 @@
 </script>
 
 {#if signedIn}
-  <ButtonGroup>
-    {#if loading}
-      <Button variant="default" size="small" disabled loading aria-label="Loading subscription state" />
-    {:else}
+  {#if error}
+    <Tooltip content={error}>
+      <Button
+        variant="danger"
+        size="small"
+        icon={TriangleAlert}
+        onclick={toggle}
+        disabled={loading || toggling}
+        aria-label="Subscribe to notifications"
+      >
+        Watch
+      </Button>
+    </Tooltip>
+  {:else}
+    <ButtonGroup>
       <Button
         variant="default"
         size="small"
-        icon={subscribed ? EyeOff : Eye}
+        icon={toggling ? Spinner : Eye}
         onclick={toggle}
-        loading={toggling}
-        disabled={toggling}
+        disabled={loading || toggling}
         aria-label={subscribed ? "Unsubscribe from notifications" : "Subscribe to notifications"}
       >
         {subscribed ? "Watching" : "Watch"}
       </Button>
-    {/if}
-  </ButtonGroup>
-  {#if error}
-    <span class="typography-paragraph-mini text-foreground-danger">{error}</span>
+    </ButtonGroup>
   {/if}
 {:else}
   <Button variant="default" size="small" icon={Eye} href={loginHref}>
-- 
2.51.2