From 1c64187bacdbc7e190d3854e64cfb24fdc87477a Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Mon, 26 Oct 2026 17:35:00 +0000
Subject: [PATCH] web/profile: show the vouch badge only after it loads and
 scale it in

Signed-off-by: oppiliappan <me@oppi.li>
---
 web/.storybook/VouchArrivalReplay.svelte      | 23 +++++++++++++++++++
 .../profile/VouchAvatar.stories.svelte        | 22 ++++++++++++++++--
 .../lib/components/profile/VouchAvatar.svelte | 18 +++++++++------
 3 files changed, 54 insertions(+), 9 deletions(-)
 create mode 100644 web/.storybook/VouchArrivalReplay.svelte

diff --git a/web/.storybook/VouchArrivalReplay.svelte b/web/.storybook/VouchArrivalReplay.svelte
new file mode 100644
index 000000000..014f47ecb
--- /dev/null
+++ b/web/.storybook/VouchArrivalReplay.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Snippet } from "svelte";
+	import type { NetworkVouchItem } from "#lib/api/graph.ts";
+
+	interface Props {
+		vouches: readonly NetworkVouchItem[];
+		delay?: number;
+		children: Snippet<[{ preview: readonly NetworkVouchItem[] }]>;
+	}
+
+	let { vouches, delay = 600, children }: Props = $props();
+
+	let preview = $state.raw<readonly NetworkVouchItem[]>([]);
+
+	$effect(() => {
+		const settled = vouches;
+		preview = [];
+		const timer = setTimeout(() => (preview = settled), delay);
+		return () => clearTimeout(timer);
+	});
+</script>
+
+{@render children({ preview })}
diff --git a/web/src/lib/components/profile/VouchAvatar.stories.svelte b/web/src/lib/components/profile/VouchAvatar.stories.svelte
index c07b5bb4b..ad2ea0e85 100644
--- a/web/src/lib/components/profile/VouchAvatar.stories.svelte
+++ b/web/src/lib/components/profile/VouchAvatar.stories.svelte
@@ -1,6 +1,7 @@
 <script module lang="ts">
 	import { defineMeta } from "@storybook/addon-svelte-csf";
 	import VouchAvatar from "#lib/components/profile/VouchAvatar.svelte";
+	import VouchArrivalReplay from "#storybook/VouchArrivalReplay.svelte";
 	import type { NetworkVouchItem, VouchKind } from "#lib/api/graph.ts";
 
 	const viewer = "did:plc:alice";
@@ -19,7 +20,8 @@
 		directDenounce: [item(viewer, "denounce")],
 		mixed: [item("did:plc:friend", "vouch"), item("did:plc:critic", "denounce")],
 		indirectVouch: [item("did:plc:friend", "vouch")],
-		indirectDenounce: [item("did:plc:critic", "denounce")]
+		indirectDenounce: [item("did:plc:critic", "denounce")],
+		none: []
 	} satisfies Record<string, NetworkVouchItem[]>;
 
 	const { Story } = defineMeta({
@@ -47,4 +49,20 @@
 	args={{ preview: previews.indirectDenounce }}
 	parameters={{ auth: true }}
 />
-<Story name="None" args={{ preview: [] }} parameters={{ auth: true }} />
+<Story name="None" args={{ preview: previews.none }} parameters={{ auth: true }} />
+<Story name="Arrival" parameters={{ auth: true }}>
+	{#snippet template(args)}
+		<div class="flex flex-wrap items-start gap-lg font-sans typography-paragraph-small">
+			{#each Object.entries(previews) as [name, vouches] (name)}
+				<div class="flex flex-col items-center gap-xs text-foreground-muted">
+					<VouchArrivalReplay {vouches}>
+						{#snippet children({ preview })}
+							<VouchAvatar {...args} {preview} />
+						{/snippet}
+					</VouchArrivalReplay>
+					<span>{name}</span>
+				</div>
+			{/each}
+		</div>
+	{/snippet}
+</Story>
diff --git a/web/src/lib/components/profile/VouchAvatar.svelte b/web/src/lib/components/profile/VouchAvatar.svelte
index f64fd114a..180a32239 100644
--- a/web/src/lib/components/profile/VouchAvatar.svelte
+++ b/web/src/lib/components/profile/VouchAvatar.svelte
@@ -11,6 +11,9 @@
 	import ShieldIndirectDenounce from "#lib/components/icons/ShieldIndirectDenounce.svelte";
 	import { createVouchBadge } from "#lib/components/profile/vouchBadge.svelte.ts";
 	import type { NetworkVouchItem } from "#lib/api/graph.ts";
+	import { POP_DURATION, popEasing } from "#lib/motion/spring.ts";
+	import { prefersReducedMotion } from "svelte/motion";
+	import { fade, scale } from "svelte/transition";
 	import { twMerge } from "tailwind-merge";
 
 	interface Props {
@@ -48,23 +51,24 @@
 			"indirect-vouch": [ShieldIndirectVouch, "Vouched by your network"],
 			"indirect-denounce": [ShieldIndirectDenounce, "Denounced by your network"]
 		} as const;
-		return badge.state ? states[badge.state] : null;
+		return !badge.loading && badge.state ? states[badge.state] : null;
 	});
+
+	const arrive = (node: Element) =>
+		prefersReducedMotion.current
+			? fade(node, { duration: POP_DURATION })
+			: scale(node, { start: 0.4, duration: POP_DURATION, easing: popEasing });
 </script>
 
 <span class={twMerge("relative inline-flex shrink-0", sizeClass, className)}>
 	<Avatar {did} {src} {handle} size="full" pixels={pixels ?? avatarSizePx[size]} {loading} />
-	{#if badge.loading}
-		<span
-			class="pointer-events-none absolute -right-0.5 -bottom-0.5 size-1/2 animate-pulse rounded-full bg-background-strong"
-			aria-hidden="true"
-		></span>
-	{:else if shown}
+	{#if shown}
 		{@const Icon = shown[0]}
 		<span
 			class="pointer-events-none absolute -right-0.5 -bottom-0.5 size-1/2 text-white dark:text-gray-900"
 			role="img"
 			aria-label={shown[1]}
+			in:arrive
 		>
 			<Icon class="size-full" aria-hidden="true" />
 		</span>
-- 
2.54.0