From 18f59f80fa2e3cce30ec00a664e57445bdff9474 Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Tue, 1 Sep 2026 11:21:20 +0100
Subject: [PATCH] web/components: add skeleton to trending loader

Signed-off-by: oppiliappan <me@oppi.li>
---
 web/src/fixtures/timeline.ts                  | 11 +++
 ...dingreposlist--skeleton-fixture.bones.json | 88 +++++++++++++++++++
 .../timeline/Timeline.stories.svelte          | 14 ++-
 .../components/timeline/TimelineView.svelte   |  7 +-
 .../components/timeline/TrendingRepos.svelte  | 44 +---------
 .../timeline/TrendingReposList.stories.svelte | 18 ++++
 .../timeline/TrendingReposList.svelte         | 46 ++++++++++
 .../timeline/TrendingSkeleton.svelte          | 12 +++
 8 files changed, 197 insertions(+), 43 deletions(-)
 create mode 100644 web/src/lib/bones/timeline-trendingreposlist--skeleton-fixture.bones.json
 create mode 100644 web/src/lib/components/timeline/TrendingReposList.stories.svelte
 create mode 100644 web/src/lib/components/timeline/TrendingReposList.svelte
 create mode 100644 web/src/lib/components/timeline/TrendingSkeleton.svelte

diff --git a/web/src/fixtures/timeline.ts b/web/src/fixtures/timeline.ts
index 0c4bd159d..a2e77e4d6 100644
--- a/web/src/fixtures/timeline.ts
+++ b/web/src/fixtures/timeline.ts
@@ -88,3 +88,14 @@ export const trending: RepoCardData[] = [
 		stars: 9
 	}
 ];
+
+// the trending rail always shows a fixed 5 rows, so the skeleton fixture
+// needs a full 5 items (with descriptions) to capture that exact height
+export const trendingSkeleton: RepoCardData[] = Array.from({ length: 5 }, (_, i) => ({
+	name: trending[i % trending.length]!.name,
+	repoDid: trending[i % trending.length]!.repoDid,
+	ownerHandle: trending[i % trending.length]!.ownerHandle,
+	description: trending[i % trending.length]!.description ?? "A tiny CI runner.",
+	createdAt: trending[i % trending.length]!.createdAt,
+	stars: trending[i % trending.length]!.stars
+}));
diff --git a/web/src/lib/bones/timeline-trendingreposlist--skeleton-fixture.bones.json b/web/src/lib/bones/timeline-trendingreposlist--skeleton-fixture.bones.json
new file mode 100644
index 000000000..a72b7d83f
--- /dev/null
+++ b/web/src/lib/bones/timeline-trendingreposlist--skeleton-fixture.bones.json
@@ -0,0 +1,88 @@
+{
+	"breakpoints": {
+		"375": {
+			"width": 343,
+			"height": 300,
+			"bones": [
+				[13.9942, 13, 6.9971, 14, 4],
+				[25.656, 12, 38.3236, 16, 4],
+				[25.656, 30, 55.7434, 14, 4],
+				[13.9942, 73, 6.9971, 14, 4],
+				[25.656, 72, 38.3236, 16, 4],
+				[25.656, 90, 55.7434, 14, 4],
+				[13.9942, 133, 6.9971, 14, 4],
+				[25.656, 132, 38.3236, 16, 4],
+				[25.656, 150, 55.7434, 14, 4],
+				[13.9942, 193, 6.9971, 14, 4],
+				[25.656, 192, 38.3236, 16, 4],
+				[25.656, 210, 55.7434, 14, 4],
+				[13.9942, 253, 6.9971, 14, 4],
+				[25.656, 252, 38.3236, 16, 4],
+				[25.656, 270, 55.7434, 14, 4]
+			]
+		},
+		"768": {
+			"width": 736,
+			"height": 300,
+			"bones": [
+				[6.5217, 13, 3.2609, 14, 4],
+				[11.9565, 12, 47.2283, 16, 4],
+				[11.9565, 30, 68.6957, 14, 4],
+				[6.5217, 73, 3.2609, 14, 4],
+				[11.9565, 72, 47.2283, 16, 4],
+				[11.9565, 90, 68.6957, 14, 4],
+				[6.5217, 133, 3.2609, 14, 4],
+				[11.9565, 132, 47.2283, 16, 4],
+				[11.9565, 150, 68.6957, 14, 4],
+				[6.5217, 193, 3.2609, 14, 4],
+				[11.9565, 192, 47.2283, 16, 4],
+				[11.9565, 210, 68.6957, 14, 4],
+				[6.5217, 253, 3.2609, 14, 4],
+				[11.9565, 252, 47.2283, 16, 4],
+				[11.9565, 270, 68.6957, 14, 4]
+			]
+		},
+		"1024": {
+			"width": 992,
+			"height": 300,
+			"bones": [
+				[4.8387, 13, 2.4194, 14, 4],
+				[8.871, 12, 49.2339, 16, 4],
+				[8.871, 30, 71.6129, 14, 4],
+				[4.8387, 73, 2.4194, 14, 4],
+				[8.871, 72, 49.2339, 16, 4],
+				[8.871, 90, 71.6129, 14, 4],
+				[4.8387, 133, 2.4194, 14, 4],
+				[8.871, 132, 49.2339, 16, 4],
+				[8.871, 150, 71.6129, 14, 4],
+				[4.8387, 193, 2.4194, 14, 4],
+				[8.871, 192, 49.2339, 16, 4],
+				[8.871, 210, 71.6129, 14, 4],
+				[4.8387, 253, 2.4194, 14, 4],
+				[8.871, 252, 49.2339, 16, 4],
+				[8.871, 270, 71.6129, 14, 4]
+			]
+		},
+		"1440": {
+			"width": 1408,
+			"height": 300,
+			"bones": [
+				[3.4091, 13, 1.7045, 14, 4],
+				[6.25, 12, 50.9375, 16, 4],
+				[6.25, 30, 74.0909, 14, 4],
+				[3.4091, 73, 1.7045, 14, 4],
+				[6.25, 72, 50.9375, 16, 4],
+				[6.25, 90, 74.0909, 14, 4],
+				[3.4091, 133, 1.7045, 14, 4],
+				[6.25, 132, 50.9375, 16, 4],
+				[6.25, 150, 74.0909, 14, 4],
+				[3.4091, 193, 1.7045, 14, 4],
+				[6.25, 192, 50.9375, 16, 4],
+				[6.25, 210, 74.0909, 14, 4],
+				[3.4091, 253, 1.7045, 14, 4],
+				[6.25, 252, 50.9375, 16, 4],
+				[6.25, 270, 74.0909, 14, 4]
+			]
+		}
+	}
+}
diff --git a/web/src/lib/components/timeline/Timeline.stories.svelte b/web/src/lib/components/timeline/Timeline.stories.svelte
index 66a6e36e5..26fef8f6c 100644
--- a/web/src/lib/components/timeline/Timeline.stories.svelte
+++ b/web/src/lib/components/timeline/Timeline.stories.svelte
@@ -19,4 +19,16 @@
 
 <Story name="Empty" args={{ feed: [], emptyMessage: "Nothing here yet." }} />
 
-<Story name="Skeleton fixture" args={{ feed }} />
+<Story name="Skeleton fixture" args={{ feed }}>
+	{#snippet template(args)}
+		<div
+			class="mx-auto flex w-full max-w-[1920px] flex-col md:grid md:grid-cols-[minmax(0,25rem)_minmax(0,37.5rem)_minmax(0,25rem)] md:items-start md:justify-center"
+		>
+			<div class="hidden md:block"></div>
+			<div class="md:col-start-2 md:mx-auto md:w-full md:max-w-150">
+				<Timeline {...args} />
+			</div>
+			<div class="hidden md:block"></div>
+		</div>
+	{/snippet}
+</Story>
diff --git a/web/src/lib/components/timeline/TimelineView.svelte b/web/src/lib/components/timeline/TimelineView.svelte
index 788fb9c17..ed5f39ba0 100644
--- a/web/src/lib/components/timeline/TimelineView.svelte
+++ b/web/src/lib/components/timeline/TimelineView.svelte
@@ -9,6 +9,7 @@
 	import Timeline from "./Timeline.svelte";
 	import TimelineSkeleton from "./TimelineSkeleton.svelte";
 	import TrendingRepos from "./TrendingRepos.svelte";
+	import TrendingSkeleton from "./TrendingSkeleton.svelte";
 	import type { RepoCardData } from "$lib/components/profile/types";
 	import type * as ShTangledFeedGetTimeline from "$lib/api/lexicons/types/sh/tangled/feed/getTimeline";
 
@@ -87,7 +88,11 @@
 	<div
 		class="order-1 flex flex-col gap-4 px-2 pt-4 md:sticky md:top-0 md:order-0 md:col-start-3 md:row-start-1 md:ml-auto md:h-screen md:w-full md:max-w-100 md:overflow-y-auto md:p-4"
 	>
-		<TrendingRepos repos={trending} />
+		{#if loading}
+			<TrendingSkeleton />
+		{:else}
+			<TrendingRepos repos={trending} />
+		{/if}
 
 		<div class="hidden md:block">
 			<Announcements />
diff --git a/web/src/lib/components/timeline/TrendingRepos.svelte b/web/src/lib/components/timeline/TrendingRepos.svelte
index 4baf56a25..1b2019057 100644
--- a/web/src/lib/components/timeline/TrendingRepos.svelte
+++ b/web/src/lib/components/timeline/TrendingRepos.svelte
@@ -1,50 +1,12 @@
 <script lang="ts">
-	import { resolve } from "$app/paths";
-	import Star from "$icon/star";
 	import TrendingUp from "$icon/trending-up";
-	import { formatCount } from "$lib/format";
-	import { repoKey, type RepoCardData } from "$lib/components/profile/types";
+	import type { RepoCardData } from "$lib/components/profile/types";
 	import PreviewCard from "./PreviewCard.svelte";
+	import TrendingReposList from "./TrendingReposList.svelte";
 
 	let { repos }: { repos: RepoCardData[] } = $props();
 </script>
 
 <PreviewCard title="Trending" icon={TrendingUp}>
-	{#if repos.length > 0}
-		<div class="rounded-b bg-background-default py-1">
-			{#each repos as repo (repoKey(repo))}
-				<!-- a real anchor per row: a stretched (absolute inset-0) link inside a
-				     position:relative row breaks hit-testing on safari -->
-				<a
-					href={resolve(`/${repo.ownerHandle}/${repo.name}` as "/")}
-					class="grid grid-cols-[3.5rem_minmax(0,1fr)] gap-x-4 px-4 py-3 no-underline hover:bg-background-subtle hover:no-underline"
-				>
-					<span
-						class="flex items-start justify-end gap-1 typography-paragraph-small text-foreground-subtle tabular-nums"
-					>
-						<Star class="mt-0.5 size-3 shrink-0 fill-current" aria-hidden="true" />
-						{formatCount(repo.stars ?? 0)}
-					</span>
-					<span class="min-w-0">
-						<span class="block truncate font-medium text-foreground-default">
-							{repo.ownerHandle}/{repo.name}
-						</span>
-						{#if repo.description}
-							<span
-								class="line-clamp-1 block typography-paragraph-small text-foreground-muted"
-							>
-								{repo.description}
-							</span>
-						{/if}
-					</span>
-				</a>
-			{/each}
-		</div>
-	{:else}
-		<p
-			class="rounded-b bg-background-canvas p-6 text-center typography-paragraph-small text-foreground-subtle"
-		>
-			No trending repositories this week
-		</p>
-	{/if}
+	<TrendingReposList {repos} />
 </PreviewCard>
diff --git a/web/src/lib/components/timeline/TrendingReposList.stories.svelte b/web/src/lib/components/timeline/TrendingReposList.stories.svelte
new file mode 100644
index 000000000..9c4cb6dfb
--- /dev/null
+++ b/web/src/lib/components/timeline/TrendingReposList.stories.svelte
@@ -0,0 +1,18 @@
+<script module lang="ts">
+	import { defineMeta } from "@storybook/addon-svelte-csf";
+	import { trending, trendingSkeleton } from "$fixtures/timeline";
+	import TrendingReposList from "./TrendingReposList.svelte";
+
+	const { Story } = defineMeta({
+		title: "Timeline/TrendingReposList",
+		component: TrendingReposList,
+		tags: ["autodocs"],
+		args: { repos: trending }
+	});
+</script>
+
+<Story name="Default" />
+
+<Story name="Empty" args={{ repos: [] }} />
+
+<Story name="Skeleton fixture" args={{ repos: trendingSkeleton }} />
diff --git a/web/src/lib/components/timeline/TrendingReposList.svelte b/web/src/lib/components/timeline/TrendingReposList.svelte
new file mode 100644
index 000000000..7baf97e11
--- /dev/null
+++ b/web/src/lib/components/timeline/TrendingReposList.svelte
@@ -0,0 +1,46 @@
+<script lang="ts">
+	import { resolve } from "$app/paths";
+	import Star from "$icon/star";
+	import { formatCount } from "$lib/format";
+	import { repoKey, type RepoCardData } from "$lib/components/profile/types";
+
+	let { repos }: { repos: RepoCardData[] } = $props();
+</script>
+
+{#if repos.length > 0}
+	<div class="rounded-b bg-background-default py-1">
+		{#each repos as repo (repoKey(repo))}
+			<!-- a real anchor per row: a stretched (absolute inset-0) link inside a
+			     position:relative row breaks hit-testing on safari -->
+			<a
+				href={resolve(`/${repo.ownerHandle}/${repo.name}` as "/")}
+				class="grid grid-cols-[3.5rem_minmax(0,1fr)] gap-x-4 px-4 py-3 no-underline hover:bg-background-subtle hover:no-underline"
+			>
+				<span
+					class="flex items-start justify-end gap-1 typography-paragraph-small text-foreground-subtle tabular-nums"
+				>
+					<Star class="mt-0.5 size-3 shrink-0 fill-current" aria-hidden="true" />
+					{formatCount(repo.stars ?? 0)}
+				</span>
+				<span class="min-w-0">
+					<span class="block truncate font-medium text-foreground-default">
+						{repo.ownerHandle}/{repo.name}
+					</span>
+					{#if repo.description}
+						<span
+							class="line-clamp-1 block typography-paragraph-small text-foreground-muted"
+						>
+							{repo.description}
+						</span>
+					{/if}
+				</span>
+			</a>
+		{/each}
+	</div>
+{:else}
+	<p
+		class="rounded-b bg-background-canvas p-6 text-center typography-paragraph-small text-foreground-subtle"
+	>
+		No trending repositories this week
+	</p>
+{/if}
diff --git a/web/src/lib/components/timeline/TrendingSkeleton.svelte b/web/src/lib/components/timeline/TrendingSkeleton.svelte
new file mode 100644
index 000000000..7deb7d42a
--- /dev/null
+++ b/web/src/lib/components/timeline/TrendingSkeleton.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import TrendingUp from "$icon/trending-up";
+	import timelineTrendingreposlistSkeletonFixture from "$lib/bones/timeline-trendingreposlist--skeleton-fixture.bones.json";
+	import Bones from "$lib/components/ui/Bones.svelte";
+	import PreviewCard from "./PreviewCard.svelte";
+</script>
+
+<PreviewCard title="Trending" icon={TrendingUp}>
+	<div class="rounded-b bg-background-default py-1">
+		<Bones capture={timelineTrendingreposlistSkeletonFixture} />
+	</div>
+</PreviewCard>
-- 
2.51.2