From ca8023834c827406c78521edbfbd10ad54f62d8a 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 follow button

Signed-off-by: oppiliappan <me@oppi.li>
---
 .../profile/FollowButton.stories.svelte       | 147 ++++++++++++++++++
 .../components/profile/FollowButton.svelte    |  32 ++--
 2 files changed, 168 insertions(+), 11 deletions(-)
 create mode 100644 web/src/lib/components/profile/FollowButton.stories.svelte

diff --git a/web/src/lib/components/profile/FollowButton.stories.svelte b/web/src/lib/components/profile/FollowButton.stories.svelte
new file mode 100644
index 000000000..0b1d415ec
--- /dev/null
+++ b/web/src/lib/components/profile/FollowButton.stories.svelte
@@ -0,0 +1,147 @@
+<script module lang="ts">
+	import { defineMeta, type StoryContext } from "@storybook/addon-svelte-csf";
+	import { expect, screen, userEvent, waitFor } from "storybook/test";
+	import FollowButton from "./FollowButton.svelte";
+
+	// the toggle (create/delete) goes through the mock agent's handler, 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/sh.tangled.graph.follow/3lknew",
+				cid: "bafyreibfko5xzzdptcimcaql4tmsaffgr6jhreyjz3tv6nlh34si6k4u7e"
+			});
+		}
+		if (pathname.includes("deleteRecord")) {
+			return Response.json({});
+		}
+		return new Response(null, { status: 404 });
+	};
+
+	// a never-settling respond keeps the toggle in its loading state so the
+	// spinner swap can be asserted
+	const hang = () => new Promise<Response>(() => {});
+
+	type PlayContext = Pick<StoryContext<Record<string, unknown>>, "canvas">;
+
+	const subject = "did:plc:subject";
+
+	const notFollowing = async ({ canvas }: PlayContext) => {
+		const button = await canvas.findByRole("button", { name: "Follow" });
+		await waitFor(() => expect(button).toBeEnabled());
+	};
+
+	const following = async ({ canvas }: PlayContext) => {
+		const button = await canvas.findByRole("button", { name: "Unfollow" });
+		await waitFor(() => expect(button).toBeEnabled());
+	};
+
+	// clicking follow: the icon swaps to a spinner while the write is in flight,
+	// then settles on "Unfollow" with the minus icon
+	const followingNow = async ({ canvas }: PlayContext) => {
+		const button = await canvas.findByRole("button", { name: "Follow" });
+		await userEvent.click(button);
+		await waitFor(() => expect(canvas.getByRole("button", { name: "Unfollow" })).toBeVisible());
+	};
+
+	// a hung write: the button stays on "Follow" with the icon replaced by a spinner
+	const followingLoading = async ({ canvas }: PlayContext) => {
+		const button = await canvas.findByRole("button", { name: "Follow" });
+		await userEvent.click(button);
+		await waitFor(() => expect(button).toHaveAttribute("aria-busy", "true"));
+		await expect(button).toHaveTextContent("Follow");
+		await expect(button).toBeDisabled();
+	};
+
+	const unfollowing = async ({ canvas }: PlayContext) => {
+		const button = await canvas.findByRole("button", { name: "Unfollow" });
+		await userEvent.click(button);
+		await waitFor(() => expect(canvas.getByRole("button", { name: "Follow" })).toBeVisible());
+	};
+
+	// the toggle failed: the button turns red with a triangle-alert icon, and
+	// hovering shows the error in a tooltip. the error clears itself after 2s.
+	const toggleError = async ({ canvas }: PlayContext) => {
+		const button = await canvas.findByRole("button", { name: "Follow" });
+		await waitFor(() => expect(button).toBeEnabled());
+		await userEvent.click(button);
+		await waitFor(() =>
+			expect(canvas.getByRole("button", { name: "Follow" })).toHaveAttribute(
+				"data-variant",
+				"danger"
+			)
+		);
+		await userEvent.hover(button);
+		await waitFor(() =>
+			expect(screen.getByRole("tooltip")).toHaveTextContent("Something went wrong")
+		);
+		await waitFor(
+			() =>
+				expect(canvas.getByRole("button", { name: "Follow" })).not.toHaveAttribute(
+					"data-variant",
+					"danger"
+				),
+			{ timeout: 3000 }
+		);
+		await waitFor(() => expect(canvas.queryByRole("tooltip")).toBeNull());
+	};
+
+	const signedOutFollow = async ({ canvas }: PlayContext) => {
+		const [follow] = await canvas.findAllByRole("link", { name: "Follow" });
+		expect(follow.getAttribute("href")).toContain("/login");
+	};
+
+	const { Story } = defineMeta({
+		title: "Profile/FollowButton",
+		component: FollowButton,
+		tags: ["autodocs"],
+		args: { profileDid: subject }
+	});
+</script>
+
+<Story name="Not following" asChild play={notFollowing} parameters={{ auth: true }}>
+	<div class="w-48">
+		<FollowButton profileDid={subject} initialRkey={null} />
+	</div>
+</Story>
+
+<Story name="Following" asChild play={following} parameters={{ auth: true }}>
+	<div class="w-48">
+		<FollowButton profileDid={subject} initialRkey="3jkfollow" />
+	</div>
+</Story>
+
+<Story name="Following now" asChild play={followingNow} parameters={{ auth: { respond } }}>
+	<div class="w-48">
+		<FollowButton profileDid={subject} initialRkey={null} />
+	</div>
+</Story>
+
+<Story
+	name="Following (loading)"
+	asChild
+	play={followingLoading}
+	parameters={{ auth: { respond: hang } }}
+>
+	<div class="w-48">
+		<FollowButton profileDid={subject} initialRkey={null} />
+	</div>
+</Story>
+
+<Story name="Unfollowing" asChild play={unfollowing} parameters={{ auth: { respond } }}>
+	<div class="w-48">
+		<FollowButton profileDid={subject} initialRkey="3jkfollow" />
+	</div>
+</Story>
+
+<Story name="Toggle error" asChild play={toggleError} parameters={{ auth: true }}>
+	<div class="w-48">
+		<FollowButton profileDid={subject} initialRkey={null} />
+	</div>
+</Story>
+
+<Story name="Signed out" asChild play={signedOutFollow} parameters={{ auth: false }}>
+	<div class="w-48">
+		<FollowButton profileDid={subject} initialRkey={null} />
+	</div>
+</Story>
diff --git a/web/src/lib/components/profile/FollowButton.svelte b/web/src/lib/components/profile/FollowButton.svelte
index 0d7e7462c..107ee604a 100644
--- a/web/src/lib/components/profile/FollowButton.svelte
+++ b/web/src/lib/components/profile/FollowButton.svelte
@@ -1,8 +1,11 @@
 <script lang="ts">
 	import { resolve } from "$app/paths";
 	import Button from "$lib/components/ui/Button.svelte";
+	import Spinner from "$lib/components/ui/Spinner.svelte";
+	import Tooltip from "$lib/components/ui/Tooltip.svelte";
 	import UserRoundPlus from "$icon/user-round-plus";
 	import UserRoundMinus from "$icon/user-round-minus";
+	import TriangleAlert from "$icon/triangle-alert";
 	import { getAuth } from "$lib/auth.svelte";
 	import { createFollow, deleteFollow } from "$lib/api/graph";
 	import { getProfileCounts } from "./counts.svelte";
@@ -27,6 +30,14 @@
 	});
 
 	const following = $derived(relation.active);
+	const failed = $derived(relation.failed);
+	$effect(() => {
+		if (!failed) return;
+		const timer = setTimeout(() => {
+			relation.resetFailure();
+		}, 2000);
+		return () => clearTimeout(timer);
+	});
 
 	const commit = (change: FollowChange) => {
 		profileCounts?.adjust(change.subjectDid, "followers", change.delta);
@@ -72,27 +83,26 @@
 			<UserRoundPlus class="size-4" aria-hidden="true" /><span>Follow</span>
 		</Button>
 	{:else}
-		<div class="flex w-full flex-col">
+		<Tooltip content="Something went wrong. Try again." disabled={!failed} class="w-full">
 			<Button
-				variant="default"
+				variant={failed ? "danger" : "default"}
 				class="w-full gap-2"
 				insetShadow={true}
-				loading={relation.loading}
-				disabled={!relation.known}
+				disabled={!relation.known || relation.loading}
+				aria-busy={relation.loading}
 				onclick={toggle}
 			>
-				{#if following}
+				{#if relation.loading}
+					<Spinner class="size-4 shrink-0" />
+				{:else if failed}
+					<TriangleAlert class="size-4 shrink-0" aria-hidden="true" />
+				{:else if following}
 					<UserRoundMinus class="size-4" aria-hidden="true" />
 				{:else}
 					<UserRoundPlus class="size-4" aria-hidden="true" />
 				{/if}
 				<span>{following ? "Unfollow" : "Follow"}</span>
 			</Button>
-			{#if relation.failed}
-				<p class="mt-1 typography-paragraph-small text-foreground-danger">
-					Something went wrong. Try again.
-				</p>
-			{/if}
-		</div>
+		</Tooltip>
 	{/if}
 {/if}
-- 
2.51.2