From 670b627985addde1b66fb4ebf174bb69a425e509 Mon Sep 17 00:00:00 2001
From: dawn <dawn@tangled.org>
Date: Thu, 3 Sep 2026 18:12:06 +0900
Subject: [PATCH] web/timeline: add boneyard skeletons and Pending boundaries
 to timeline

Signed-off-by: dawn <dawn@tangled.org>
---
 web/boneyard.config.json                      |   6 +
 ...ationspreview--skeleton-fixture.bones.json | 101 +++++++
 ...ecentspreview--skeleton-fixture.bones.json |  93 +++++++
 ...line-timeline--skeleton-fixture.bones.json | 263 +++++++++---------
 .../NotificationsPreview.stories.svelte       |  21 ++
 .../timeline/NotificationsPreview.svelte      |  76 +++--
 .../timeline/RecentsPreview.stories.svelte    |  22 ++
 .../components/timeline/RecentsPreview.svelte |  25 +-
 .../timeline/Timeline.stories.svelte          |  20 +-
 .../timeline/TimelineView.stories.svelte      |   9 +
 .../components/timeline/TimelineView.svelte   |  47 ++--
 .../components/timeline/TrendingRepos.svelte  |  21 +-
 web/src/lib/components/timeline/load.ts       |  24 +-
 .../timeline/timelineFeed.svelte.ts           | 101 -------
 web/src/lib/notifications.svelte.ts           |   6 +-
 web/src/routes/+page.svelte                   |  18 +-
 web/src/routes/+page.ts                       |   8 +-
 web/src/routes/timeline/+page.svelte          |  18 +-
 web/src/routes/timeline/+page.ts              |  18 ++
 19 files changed, 581 insertions(+), 316 deletions(-)
 create mode 100644 web/src/lib/bones/timeline-notificationspreview--skeleton-fixture.bones.json
 create mode 100644 web/src/lib/bones/timeline-recentspreview--skeleton-fixture.bones.json
 delete mode 100644 web/src/lib/components/timeline/timelineFeed.svelte.ts
 create mode 100644 web/src/routes/timeline/+page.ts

diff --git a/web/boneyard.config.json b/web/boneyard.config.json
index de7419e33..94f7b23c2 100644
--- a/web/boneyard.config.json
+++ b/web/boneyard.config.json
@@ -132,6 +132,12 @@
 		},
 		"notifications-notificationlist--social-skeleton-fixture": {
 			"route": "/iframe.html?id=notifications-notificationlist--social-skeleton-fixture&viewMode=story"
+		},
+		"timeline-recentspreview--skeleton-fixture": {
+			"route": "/iframe.html?id=timeline-recentspreview--skeleton-fixture&viewMode=story"
+		},
+		"timeline-notificationspreview--skeleton-fixture": {
+			"route": "/iframe.html?id=timeline-notificationspreview--skeleton-fixture&viewMode=story"
 		}
 	}
 }
diff --git a/web/src/lib/bones/timeline-notificationspreview--skeleton-fixture.bones.json b/web/src/lib/bones/timeline-notificationspreview--skeleton-fixture.bones.json
new file mode 100644
index 000000000..077e1c2fd
--- /dev/null
+++ b/web/src/lib/bones/timeline-notificationspreview--skeleton-fixture.bones.json
@@ -0,0 +1,101 @@
+{
+	"breakpoints": {
+		"375": {
+			"name": "timeline-notificationspreview--skeleton-fixture",
+			"viewportWidth": 343,
+			"width": 343,
+			"height": 206,
+			"bones": [
+				[0, 0, 100, 77, 0, true, 4, true],
+				[2.3324, 19, 4.0816, 14, 0],
+				[16.0213, 16, 62.2312, 20, 4],
+				[85.1859, 18, 12.4818, 15, 4],
+				[2.3324, 42, 9.0242, 15, 4],
+				[16.0213, 42, 73.7655, 15, 4],
+				[0, 77, 100, 77, 0, true, 4, true],
+				[2.3324, 96, 4.0816, 14, 0],
+				[16.0213, 93, 62.2312, 20, 4],
+				[82.9173, 95, 14.7504, 15, 4],
+				[2.3324, 119, 9.0242, 15, 4],
+				[16.0213, 119, 67.2148, 15, 4],
+				[0, 154, 100, 52, 0, true, 0, true],
+				[2.3324, 173, 4.0816, 14, 0],
+				[16.0213, 170, 62.2312, 20, 4],
+				[82.9173, 172, 14.7504, 15, 4]
+			]
+		},
+		"768": {
+			"name": "timeline-notificationspreview--skeleton-fixture",
+			"viewportWidth": 400,
+			"width": 400,
+			"height": 206,
+			"bones": [
+				[0, 0, 100, 77, 0, true, 4, true],
+				[4, 19, 3.5, 14, 0],
+				[15.7383, 16, 63.6133, 20, 4],
+				[85.2969, 18, 10.7031, 15, 4],
+				[4, 42, 7.7383, 15, 4],
+				[15.7383, 42, 63.2539, 15, 4],
+				[0, 77, 100, 77, 0, true, 4, true],
+				[4, 96, 3.5, 14, 0],
+				[15.7383, 93, 63.6133, 20, 4],
+				[83.3516, 95, 12.6484, 15, 4],
+				[4, 119, 7.7383, 15, 4],
+				[15.7383, 119, 57.6367, 15, 4],
+				[0, 154, 100, 52, 0, true, 0, true],
+				[4, 173, 3.5, 14, 0],
+				[15.7383, 170, 62.7969, 20, 4],
+				[83.3516, 172, 12.6484, 15, 4]
+			]
+		},
+		"1024": {
+			"name": "timeline-notificationspreview--skeleton-fixture",
+			"viewportWidth": 400,
+			"width": 400,
+			"height": 206,
+			"bones": [
+				[0, 0, 100, 77, 0, true, 4, true],
+				[4, 19, 3.5, 14, 0],
+				[15.7383, 16, 63.6133, 20, 4],
+				[85.2969, 18, 10.7031, 15, 4],
+				[4, 42, 7.7383, 15, 4],
+				[15.7383, 42, 63.2539, 15, 4],
+				[0, 77, 100, 77, 0, true, 4, true],
+				[4, 96, 3.5, 14, 0],
+				[15.7383, 93, 63.6133, 20, 4],
+				[83.3516, 95, 12.6484, 15, 4],
+				[4, 119, 7.7383, 15, 4],
+				[15.7383, 119, 57.6367, 15, 4],
+				[0, 154, 100, 52, 0, true, 0, true],
+				[4, 173, 3.5, 14, 0],
+				[15.7383, 170, 62.7969, 20, 4],
+				[83.3516, 172, 12.6484, 15, 4]
+			]
+		},
+		"1440": {
+			"name": "timeline-notificationspreview--skeleton-fixture",
+			"viewportWidth": 400,
+			"width": 400,
+			"height": 206,
+			"bones": [
+				[0, 0, 100, 77, 0, true, 4, true],
+				[4, 19, 3.5, 14, 0],
+				[15.7383, 16, 63.6133, 20, 4],
+				[85.2969, 18, 10.7031, 15, 4],
+				[4, 42, 7.7383, 15, 4],
+				[15.7383, 42, 63.2539, 15, 4],
+				[0, 77, 100, 77, 0, true, 4, true],
+				[4, 96, 3.5, 14, 0],
+				[15.7383, 93, 63.6133, 20, 4],
+				[83.3516, 95, 12.6484, 15, 4],
+				[4, 119, 7.7383, 15, 4],
+				[15.7383, 119, 57.6367, 15, 4],
+				[0, 154, 100, 52, 0, true, 0, true],
+				[4, 173, 3.5, 14, 0],
+				[15.7383, 170, 62.7969, 20, 4],
+				[83.3516, 172, 12.6484, 15, 4]
+			]
+		}
+	},
+	"_hash": "2c810dd676f6af47b116f5ee9e07261f"
+}
diff --git a/web/src/lib/bones/timeline-recentspreview--skeleton-fixture.bones.json b/web/src/lib/bones/timeline-recentspreview--skeleton-fixture.bones.json
new file mode 100644
index 000000000..9a9d29423
--- /dev/null
+++ b/web/src/lib/bones/timeline-recentspreview--skeleton-fixture.bones.json
@@ -0,0 +1,93 @@
+{
+	"breakpoints": {
+		"375": {
+			"name": "timeline-recentspreview--skeleton-fixture",
+			"viewportWidth": 343,
+			"width": 343,
+			"height": 180,
+			"bones": [
+				[0, 0, 100, 180, "0px 0px 4px 4px", true, 0, true],
+				[4.6647, 12, 8.1633, 28, "50%"],
+				[16.3265, 18, 27.9018, 15, 4],
+				[83.9513, 18, 11.3839, 15, 4],
+				[4.6647, 70, 8.1633, 28, "50%", true, 15, false],
+				[6.7055, 77, 4.0816, 14, 0],
+				[16.3265, 66, 77.1456, 15, 4],
+				[16.3265, 86, 27.5328, 15, 4],
+				[83.9513, 66, 11.3839, 15, 4],
+				[4.6647, 134, 8.1633, 28, "50%", true, 15, false],
+				[6.7055, 141, 4.0816, 14, 0],
+				[16.3265, 130, 73.105, 15, 4],
+				[16.3265, 150, 33.1906, 15, 4],
+				[83.9513, 130, 11.3839, 15, 4]
+			]
+		},
+		"768": {
+			"name": "timeline-recentspreview--skeleton-fixture",
+			"viewportWidth": 400,
+			"width": 400,
+			"height": 180,
+			"bones": [
+				[0, 0, 100, 180, "0px 0px 4px 4px", true, 0, true],
+				[4, 12, 7, 28, "50%"],
+				[14, 18, 23.9258, 15, 4],
+				[86.2383, 18, 9.7617, 15, 4],
+				[4, 70, 7, 28, "50%", true, 15, false],
+				[5.75, 77, 3.5, 14, 0],
+				[14, 66, 66.1523, 15, 4],
+				[14, 86, 23.6094, 15, 4],
+				[86.2383, 66, 9.7617, 15, 4],
+				[4, 134, 7, 28, "50%", true, 15, false],
+				[5.75, 141, 3.5, 14, 0],
+				[14, 130, 62.6875, 15, 4],
+				[14, 150, 28.4609, 15, 4],
+				[86.2383, 130, 9.7617, 15, 4]
+			]
+		},
+		"1024": {
+			"name": "timeline-recentspreview--skeleton-fixture",
+			"viewportWidth": 400,
+			"width": 400,
+			"height": 180,
+			"bones": [
+				[0, 0, 100, 180, "0px 0px 4px 4px", true, 0, true],
+				[4, 12, 7, 28, "50%"],
+				[14, 18, 23.9258, 15, 4],
+				[86.2383, 18, 9.7617, 15, 4],
+				[4, 70, 7, 28, "50%", true, 15, false],
+				[5.75, 77, 3.5, 14, 0],
+				[14, 66, 66.1523, 15, 4],
+				[14, 86, 23.6094, 15, 4],
+				[86.2383, 66, 9.7617, 15, 4],
+				[4, 134, 7, 28, "50%", true, 15, false],
+				[5.75, 141, 3.5, 14, 0],
+				[14, 130, 62.6875, 15, 4],
+				[14, 150, 28.4609, 15, 4],
+				[86.2383, 130, 9.7617, 15, 4]
+			]
+		},
+		"1440": {
+			"name": "timeline-recentspreview--skeleton-fixture",
+			"viewportWidth": 400,
+			"width": 400,
+			"height": 180,
+			"bones": [
+				[0, 0, 100, 180, "0px 0px 4px 4px", true, 0, true],
+				[4, 12, 7, 28, "50%"],
+				[14, 18, 23.9258, 15, 4],
+				[86.2383, 18, 9.7617, 15, 4],
+				[4, 70, 7, 28, "50%", true, 15, false],
+				[5.75, 77, 3.5, 14, 0],
+				[14, 66, 66.1523, 15, 4],
+				[14, 86, 23.6094, 15, 4],
+				[86.2383, 66, 9.7617, 15, 4],
+				[4, 134, 7, 28, "50%", true, 15, false],
+				[5.75, 141, 3.5, 14, 0],
+				[14, 130, 62.6875, 15, 4],
+				[14, 150, 28.4609, 15, 4],
+				[86.2383, 130, 9.7617, 15, 4]
+			]
+		}
+	},
+	"_hash": "0dedd33720952a860febb34e55804add"
+}
diff --git a/web/src/lib/bones/timeline-timeline--skeleton-fixture.bones.json b/web/src/lib/bones/timeline-timeline--skeleton-fixture.bones.json
index fe2358256..bd33cfbb7 100644
--- a/web/src/lib/bones/timeline-timeline--skeleton-fixture.bones.json
+++ b/web/src/lib/bones/timeline-timeline--skeleton-fixture.bones.json
@@ -53,153 +53,148 @@
 		},
 		"768": {
 			"name": "timeline-timeline--skeleton-fixture",
-			"viewportWidth": 736,
-			"width": 736,
-			"height": 927,
+			"viewportWidth": 600,
+			"width": 600,
+			"height": 764,
 			"bones": [
-				[33.3326, 0, 33.3347, 213, 4, true, 15, true],
-				[33.4685, 1, 33.063, 78, 0, true, 4, false],
-				[36.7294, 13, 13.9309, 24, 4],
-				[51.7472, 17, 11.377, 17, 4],
-				[36.7294, 47, 6.1906, 17, 4],
-				[35.6424, 99, 18.1598, 21, 4],
-				[35.6424, 126, 23.187, 15, 4],
-				[35.6424, 146, 26.8873, 15, 4],
-				[35.6424, 176, 4.403, 20, 4],
-				[37.6805, 213, 0.2717, 16, 0],
-				[33.3326, 229, 33.3347, 213, 4, true, 15, true],
-				[33.4685, 230, 33.063, 78, 0, true, 4, false],
-				[36.7294, 242, 14.5041, 24, 4],
-				[52.3204, 246, 6.4092, 17, 4],
-				[36.7294, 276, 14.969, 17, 4],
-				[52.7853, 276, 6.1906, 17, 4],
-				[35.6424, 328, 18.1598, 21, 4],
-				[35.6424, 355, 23.187, 15, 4],
-				[35.6424, 375, 26.8873, 15, 4],
-				[35.6424, 405, 4.403, 20, 4],
-				[37.6805, 442, 0.2717, 16, 0],
-				[33.3326, 458, 33.3347, 211, 4, true, 15, true],
-				[33.4685, 459, 33.063, 81, 0, true, 4, false],
-				[36.7294, 471, 14.5041, 24, 4],
-				[52.3204, 475, 7.7127, 17, 4],
-				[36.7294, 503, 12.8779, 24, 4],
-				[50.6942, 507, 6.1906, 17, 4],
-				[35.6424, 556, 13.0435, 96, "50%"],
-				[50.8598, 577, 9.1691, 17, 4],
-				[37.6805, 669, 0.2717, 16, 0],
-				[33.3326, 685, 33.3347, 242, 4, true, 15, true],
-				[33.4685, 686, 33.063, 107, 0, true, 4, false],
-				[36.7294, 698, 13.9309, 24, 4],
-				[51.7472, 702, 5.8105, 17, 4],
-				[36.7294, 732, 14.969, 17, 4],
-				[52.7853, 732, 1.7451, 17, 4],
-				[36.7294, 761, 8.8336, 17, 4],
-				[46.65, 761, 6.1906, 17, 4],
-				[35.6424, 813, 23.0405, 21, 4],
-				[35.6424, 840, 23.187, 15, 4],
-				[35.6424, 860, 26.8873, 15, 4],
-				[35.6424, 890, 4.403, 20, 4]
+				[0, 0, 100, 179, 4, true, 15, true],
+				[0.1667, 1, 99.6667, 49, 0, true, 4, false],
+				[4.1667, 13, 17.0885, 24, 4],
+				[22.5885, 17, 13.9557, 17, 4],
+				[37.8776, 17, 7.5938, 17, 4],
+				[2.8333, 70, 22.276, 21, 4],
+				[2.8333, 97, 61.9609, 15, 4],
+				[2.8333, 142, 5.401, 20, 4],
+				[5.3333, 179, 0.3333, 16, 0],
+				[0, 195, 100, 179, 4, true, 15, true],
+				[0.1667, 196, 99.6667, 49, 0, true, 4, false],
+				[4.1667, 208, 17.7917, 24, 4],
+				[23.2917, 212, 7.862, 17, 4],
+				[32.487, 212, 18.362, 17, 4],
+				[52.1823, 212, 7.5938, 17, 4],
+				[2.8333, 265, 22.276, 21, 4],
+				[2.8333, 292, 61.9609, 15, 4],
+				[2.8333, 337, 5.401, 20, 4],
+				[5.3333, 374, 0.3333, 16, 0],
+				[0, 390, 100, 179, 4, true, 15, true],
+				[0.1667, 391, 99.6667, 49, 0, true, 4, false],
+				[4.1667, 403, 17.7917, 24, 4],
+				[23.2917, 407, 9.4609, 17, 4],
+				[34.0859, 403, 15.7969, 24, 4],
+				[51.2161, 407, 7.5938, 17, 4],
+				[2.8333, 456, 16, 96, "50%"],
+				[21.5, 477, 11.2474, 17, 4],
+				[21.5, 504, 36.388, 21, 4],
+				[5.3333, 569, 0.3333, 16, 0],
+				[0, 585, 100, 179, 4, true, 15, true],
+				[0.1667, 586, 99.6667, 49, 0, true, 4, false],
+				[4.1667, 598, 17.0885, 24, 4],
+				[22.5885, 602, 7.1276, 17, 4],
+				[31.0495, 602, 18.362, 17, 4],
+				[50.7448, 602, 2.1406, 17, 4],
+				[54.2188, 602, 10.8359, 17, 4],
+				[66.388, 602, 7.5938, 17, 4],
+				[2.8333, 655, 28.263, 21, 4],
+				[2.8333, 682, 61.9609, 15, 4],
+				[2.8333, 727, 5.401, 20, 4]
 			]
 		},
 		"1024": {
 			"name": "timeline-timeline--skeleton-fixture",
-			"viewportWidth": 992,
-			"width": 992,
-			"height": 866,
+			"viewportWidth": 600,
+			"width": 600,
+			"height": 764,
 			"bones": [
-				[33.3323, 0, 33.3339, 184, 4, true, 15, true],
-				[33.4331, 1, 33.1322, 49, 0, true, 4, false],
-				[35.8524, 13, 10.3358, 24, 4],
-				[46.9947, 17, 8.441, 17, 4],
-				[56.2421, 17, 4.593, 17, 4],
-				[35.046, 70, 13.4734, 21, 4],
-				[35.046, 97, 26.1152, 15, 4],
-				[35.046, 117, 11.0367, 15, 4],
-				[35.046, 147, 3.2668, 20, 4],
-				[36.5581, 184, 0.2016, 16, 0],
-				[33.3323, 200, 33.3339, 213, 4, true, 15, true],
-				[33.4331, 201, 33.1322, 78, 0, true, 4, false],
-				[35.8524, 213, 10.7611, 24, 4],
-				[47.42, 217, 4.7552, 17, 4],
-				[52.9817, 217, 11.106, 17, 4],
-				[35.8524, 247, 4.593, 17, 4],
-				[35.046, 299, 13.4734, 21, 4],
-				[35.046, 326, 26.1152, 15, 4],
-				[35.046, 346, 11.0367, 15, 4],
-				[35.046, 376, 3.2668, 20, 4],
-				[36.5581, 413, 0.2016, 16, 0],
-				[33.3323, 429, 33.3339, 208, 4, true, 15, true],
-				[33.4331, 430, 33.1322, 78, 0, true, 4, false],
-				[35.8524, 442, 10.7611, 24, 4],
-				[47.42, 446, 5.7223, 17, 4],
-				[53.9488, 442, 9.5546, 24, 4],
-				[35.8524, 476, 4.593, 17, 4],
-				[35.046, 524, 9.6774, 96, "50%"],
-				[46.3363, 545, 6.8029, 17, 4],
-				[46.3363, 572, 22.0089, 21, 4],
-				[36.5581, 637, 0.2016, 16, 0],
-				[33.3323, 653, 33.3339, 213, 4, true, 15, true],
-				[33.4331, 654, 33.1322, 78, 0, true, 4, false],
-				[35.8524, 666, 10.3358, 24, 4],
-				[46.9947, 670, 4.3111, 17, 4],
-				[52.1122, 670, 11.106, 17, 4],
-				[35.8524, 700, 1.2947, 17, 4],
-				[37.9536, 700, 6.554, 17, 4],
-				[45.3141, 700, 4.593, 17, 4],
-				[35.046, 752, 17.0946, 21, 4],
-				[35.046, 779, 26.1152, 15, 4],
-				[35.046, 799, 11.0367, 15, 4],
-				[35.046, 829, 3.2668, 20, 4]
+				[0, 0, 100, 179, 4, true, 15, true],
+				[0.1667, 1, 99.6667, 49, 0, true, 4, false],
+				[4.1667, 13, 17.0885, 24, 4],
+				[22.5885, 17, 13.9557, 17, 4],
+				[37.8776, 17, 7.5938, 17, 4],
+				[2.8333, 70, 22.276, 21, 4],
+				[2.8333, 97, 61.9609, 15, 4],
+				[2.8333, 142, 5.401, 20, 4],
+				[5.3333, 179, 0.3333, 16, 0],
+				[0, 195, 100, 179, 4, true, 15, true],
+				[0.1667, 196, 99.6667, 49, 0, true, 4, false],
+				[4.1667, 208, 17.7917, 24, 4],
+				[23.2917, 212, 7.862, 17, 4],
+				[32.487, 212, 18.362, 17, 4],
+				[52.1823, 212, 7.5938, 17, 4],
+				[2.8333, 265, 22.276, 21, 4],
+				[2.8333, 292, 61.9609, 15, 4],
+				[2.8333, 337, 5.401, 20, 4],
+				[5.3333, 374, 0.3333, 16, 0],
+				[0, 390, 100, 179, 4, true, 15, true],
+				[0.1667, 391, 99.6667, 49, 0, true, 4, false],
+				[4.1667, 403, 17.7917, 24, 4],
+				[23.2917, 407, 9.4609, 17, 4],
+				[34.0859, 403, 15.7969, 24, 4],
+				[51.2161, 407, 7.5938, 17, 4],
+				[2.8333, 456, 16, 96, "50%"],
+				[21.5, 477, 11.2474, 17, 4],
+				[21.5, 504, 36.388, 21, 4],
+				[5.3333, 569, 0.3333, 16, 0],
+				[0, 585, 100, 179, 4, true, 15, true],
+				[0.1667, 586, 99.6667, 49, 0, true, 4, false],
+				[4.1667, 598, 17.0885, 24, 4],
+				[22.5885, 602, 7.1276, 17, 4],
+				[31.0495, 602, 18.362, 17, 4],
+				[50.7448, 602, 2.1406, 17, 4],
+				[54.2188, 602, 10.8359, 17, 4],
+				[66.388, 602, 7.5938, 17, 4],
+				[2.8333, 655, 28.263, 21, 4],
+				[2.8333, 682, 61.9609, 15, 4],
+				[2.8333, 727, 5.401, 20, 4]
 			]
 		},
 		"1440": {
 			"name": "timeline-timeline--skeleton-fixture",
-			"viewportWidth": 1408,
-			"width": 1408,
+			"viewportWidth": 600,
+			"width": 600,
 			"height": 764,
 			"bones": [
-				[28.6932, 0, 42.6136, 179, 4, true, 15, true],
-				[28.7642, 1, 42.4716, 49, 0, true, 4, false],
-				[30.4688, 13, 7.282, 24, 4],
-				[38.319, 17, 5.947, 17, 4],
-				[44.8342, 17, 3.236, 17, 4],
-				[29.9006, 70, 9.4926, 21, 4],
-				[29.9006, 97, 26.4038, 15, 4],
-				[29.9006, 142, 2.3016, 20, 4],
-				[30.9659, 179, 0.142, 16, 0],
-				[28.6932, 195, 42.6136, 179, 4, true, 15, true],
-				[28.7642, 196, 42.4716, 49, 0, true, 4, false],
-				[30.4688, 208, 7.5817, 24, 4],
-				[38.6186, 212, 3.3503, 17, 4],
-				[42.5371, 212, 7.8247, 17, 4],
-				[50.93, 212, 3.236, 17, 4],
-				[29.9006, 265, 9.4926, 21, 4],
-				[29.9006, 292, 26.4038, 15, 4],
-				[29.9006, 337, 2.3016, 20, 4],
-				[30.9659, 374, 0.142, 16, 0],
-				[28.6932, 390, 42.6136, 179, 4, true, 15, true],
-				[28.7642, 391, 42.4716, 49, 0, true, 4, false],
-				[30.4688, 403, 7.5817, 24, 4],
-				[38.6186, 407, 4.0316, 17, 4],
-				[43.2184, 403, 6.7316, 24, 4],
-				[50.5182, 407, 3.236, 17, 4],
-				[29.9006, 456, 6.8182, 96, "50%"],
-				[37.8551, 477, 4.7929, 17, 4],
-				[37.8551, 504, 15.5063, 21, 4],
-				[30.9659, 569, 0.142, 16, 0],
-				[28.6932, 585, 42.6136, 179, 4, true, 15, true],
-				[28.7642, 586, 42.4716, 49, 0, true, 4, false],
-				[30.4688, 598, 7.282, 24, 4],
-				[38.319, 602, 3.0373, 17, 4],
-				[41.9245, 602, 7.8247, 17, 4],
-				[50.3174, 602, 0.9122, 17, 4],
-				[51.7978, 602, 4.6176, 17, 4],
-				[56.9835, 602, 3.236, 17, 4],
-				[29.9006, 655, 12.0439, 21, 4],
-				[29.9006, 682, 26.4038, 15, 4],
-				[29.9006, 727, 2.3016, 20, 4]
+				[0, 0, 100, 179, 4, true, 15, true],
+				[0.1667, 1, 99.6667, 49, 0, true, 4, false],
+				[4.1667, 13, 17.0885, 24, 4],
+				[22.5885, 17, 13.9557, 17, 4],
+				[37.8776, 17, 7.5938, 17, 4],
+				[2.8333, 70, 22.276, 21, 4],
+				[2.8333, 97, 61.9609, 15, 4],
+				[2.8333, 142, 5.401, 20, 4],
+				[5.3333, 179, 0.3333, 16, 0],
+				[0, 195, 100, 179, 4, true, 15, true],
+				[0.1667, 196, 99.6667, 49, 0, true, 4, false],
+				[4.1667, 208, 17.7917, 24, 4],
+				[23.2917, 212, 7.862, 17, 4],
+				[32.487, 212, 18.362, 17, 4],
+				[52.1823, 212, 7.5938, 17, 4],
+				[2.8333, 265, 22.276, 21, 4],
+				[2.8333, 292, 61.9609, 15, 4],
+				[2.8333, 337, 5.401, 20, 4],
+				[5.3333, 374, 0.3333, 16, 0],
+				[0, 390, 100, 179, 4, true, 15, true],
+				[0.1667, 391, 99.6667, 49, 0, true, 4, false],
+				[4.1667, 403, 17.7917, 24, 4],
+				[23.2917, 407, 9.4609, 17, 4],
+				[34.0859, 403, 15.7969, 24, 4],
+				[51.2161, 407, 7.5938, 17, 4],
+				[2.8333, 456, 16, 96, "50%"],
+				[21.5, 477, 11.2474, 17, 4],
+				[21.5, 504, 36.388, 21, 4],
+				[5.3333, 569, 0.3333, 16, 0],
+				[0, 585, 100, 179, 4, true, 15, true],
+				[0.1667, 586, 99.6667, 49, 0, true, 4, false],
+				[4.1667, 598, 17.0885, 24, 4],
+				[22.5885, 602, 7.1276, 17, 4],
+				[31.0495, 602, 18.362, 17, 4],
+				[50.7448, 602, 2.1406, 17, 4],
+				[54.2188, 602, 10.8359, 17, 4],
+				[66.388, 602, 7.5938, 17, 4],
+				[2.8333, 655, 28.263, 21, 4],
+				[2.8333, 682, 61.9609, 15, 4],
+				[2.8333, 727, 5.401, 20, 4]
 			]
 		}
 	},
-	"_hash": "785096541aaddfa1e6dcaa3044dada37"
+	"_hash": "bbfad98c557c2ed69dae3dc6672761f5"
 }
diff --git a/web/src/lib/components/timeline/NotificationsPreview.stories.svelte b/web/src/lib/components/timeline/NotificationsPreview.stories.svelte
index 432a123bc..803445289 100644
--- a/web/src/lib/components/timeline/NotificationsPreview.stories.svelte
+++ b/web/src/lib/components/timeline/NotificationsPreview.stories.svelte
@@ -3,6 +3,7 @@
 	import { expect, within } from "storybook/test";
 	import { notifications as mockNotifications } from "$lib/components/notifications/mock";
 	import NotificationsPreview from "$lib/components/timeline/NotificationsPreview.svelte";
+	import NotificationList from "$lib/components/notifications/NotificationList.svelte";
 
 	const { Story } = defineMeta({
 		title: "Timeline/NotificationsPreview",
@@ -27,3 +28,23 @@
 <Story name="Unknown" args={{ signedIn: true }} />
 
 <Story name="LoggedOut" args={{ signedIn: false }} />
+
+<Story
+	name="Skeleton fixture"
+	args={{ signedIn: true, notifications: mockNotifications.slice(0, 3) }}
+	parameters={{
+		bones: {
+			class: "w-full max-w-100 [&_a::after]:hidden"
+		}
+	}}
+>
+	{#snippet template()}
+		<NotificationList
+			notifications={mockNotifications.slice(0, 3)}
+			border={false}
+			grouped={false}
+		/>
+	{/snippet}
+</Story>
+
+<Story name="Loading" args={{ signedIn: true, notifications: new Promise(() => {}) }} />
diff --git a/web/src/lib/components/timeline/NotificationsPreview.svelte b/web/src/lib/components/timeline/NotificationsPreview.svelte
index 040850fc7..37def097f 100644
--- a/web/src/lib/components/timeline/NotificationsPreview.svelte
+++ b/web/src/lib/components/timeline/NotificationsPreview.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { browser } from "$app/environment";
 	import { resolve } from "$app/paths";
 	import ArrowRight from "$icon/arrow-right";
 	import Bell from "$icon/bell";
@@ -7,34 +8,65 @@
 	import { createLoad } from "$lib/action.svelte";
 	import NotificationList from "$lib/components/notifications/NotificationList.svelte";
 	import type { NotificationSummary } from "$lib/components/notifications/types";
-	import { getNotifications, type Notifications } from "$lib/notifications.svelte";
+	import {
+		getNotifications,
+		type Notifications,
+		type NotificationsPreview as PreviewData
+	} from "$lib/notifications.svelte";
 	import PreviewCard from "$lib/components/timeline/PreviewCard.svelte";
 	import PreviewEmpty from "$lib/components/timeline/PreviewEmpty.svelte";
+	import timelineNotificationspreviewSkeletonFixture from "$lib/bones/timeline-notificationspreview--skeleton-fixture.bones.json";
+	import Bones from "$lib/components/ui/Bones.svelte";
 
-	// the appview preview serves five rows and sends the rest to the full page
 	const PREVIEW_LIMIT = 5;
 
 	let {
 		signedIn = false,
 		notifications: fixtures
-	}: { signedIn?: boolean; notifications?: NotificationSummary[] } = $props();
+	}: {
+		signedIn?: boolean;
+		notifications?: NotificationSummary[] | Promise<NotificationSummary[]>;
+	} = $props();
 
-	// stories render this card without the layout, so the context can be absent
 	const context = getNotifications() as Notifications | undefined;
 	const path = "/notifications";
 
-	const preview = createLoad(async () => {
-		if (!signedIn) return null;
-		if (fixtures) {
-			return { notifications: fixtures, totalUnread: fixtures.filter((n) => !n.read).length };
-		}
-		return (await context?.preview(PREVIEW_LIMIT)) ?? null;
+	const fixturePreview = $derived.by(() => {
+		if (!fixtures) return undefined;
+		if (fixtures instanceof Promise) return fixtures;
+		return {
+			notifications: fixtures,
+			totalUnread: fixtures.filter((n) => !n.read).length
+		};
 	});
 
-	const items = $derived(preview.data?.notifications ?? []);
-	const totalUnread = $derived(preview.data?.totalUnread ?? null);
+	// Use createLoad to reactively fetch preview in browser
+	const previewLoad = createLoad(async (): Promise<PreviewData | null> => {
+		if (!browser || !signedIn || !context) return null;
+		return await context.preview(PREVIEW_LIMIT);
+	});
+
+	const loading = $derived(
+		signedIn &&
+			fixtures === undefined &&
+			(previewLoad.loading || previewLoad.data === undefined)
+	);
 </script>
 
+{#snippet content(items: NotificationSummary[], totalUnread: number | null)}
+	{#if items.length > 0}
+		<NotificationList notifications={items} border={false} grouped={false} />
+	{:else if totalUnread === 0}
+		<PreviewEmpty icon={Inbox}>
+			<p>All caught up!</p>
+		</PreviewEmpty>
+	{:else}
+		<PreviewEmpty icon={Bell}>
+			<a href={resolve(path as "/")}>Open your inbox</a>
+		</PreviewEmpty>
+	{/if}
+{/snippet}
+
 <PreviewCard title="Notifications" icon={Bell} href={path}>
 	{#snippet action()}
 		<a
@@ -50,12 +82,20 @@
 		<PreviewEmpty icon={BellOff}>
 			<a href={resolve("/login" as "/")}>Log in</a> to view your inbox
 		</PreviewEmpty>
-	{:else if items.length > 0}
-		<NotificationList notifications={items} border={false} grouped={false} />
-	{:else if totalUnread === 0}
-		<PreviewEmpty icon={Inbox}>
-			<p>All caught up!</p>
-		</PreviewEmpty>
+	{:else if loading}
+		<Bones capture={timelineNotificationspreviewSkeletonFixture} />
+	{:else if fixturePreview}
+		{#if fixturePreview instanceof Promise}
+			{#await fixturePreview}
+				<Bones capture={timelineNotificationspreviewSkeletonFixture} />
+			{:then resolved}
+				{@render content(resolved, null)}
+			{/await}
+		{:else}
+			{@render content(fixturePreview.notifications, fixturePreview.totalUnread)}
+		{/if}
+	{:else if previewLoad.data}
+		{@render content(previewLoad.data.notifications, previewLoad.data.totalUnread)}
 	{:else}
 		<PreviewEmpty icon={Bell}>
 			<a href={resolve(path as "/")}>Open your inbox</a>
diff --git a/web/src/lib/components/timeline/RecentsPreview.stories.svelte b/web/src/lib/components/timeline/RecentsPreview.stories.svelte
index 65189d62c..324556ad1 100644
--- a/web/src/lib/components/timeline/RecentsPreview.stories.svelte
+++ b/web/src/lib/components/timeline/RecentsPreview.stories.svelte
@@ -1,6 +1,7 @@
 <script module lang="ts">
 	import { defineMeta } from "@storybook/addon-svelte-csf";
 	import RecentsPreview from "$lib/components/timeline/RecentsPreview.svelte";
+	import RecentItem, { recentPath } from "$lib/components/timeline/RecentItem.svelte";
 	import type { RecentItemData } from "$lib/components/timeline/types";
 
 	const items: RecentItemData[] = [
@@ -51,3 +52,24 @@
 <Story name="Default" />
 
 <Story name="Empty" args={{ items: [] }} />
+
+<Story
+	name="Skeleton fixture"
+	args={{ items: items.slice(0, 3) }}
+	parameters={{
+		bones: {
+			class: "w-full max-w-100"
+		}
+	}}
+>
+	{#snippet template()}
+		<div class="relative flex flex-col rounded-b bg-background-default">
+			<div class="absolute inset-y-0 w-px bg-border-default" style="left: 1.875rem"></div>
+			{#each items.slice(0, 3) as item (recentPath(item))}
+				<RecentItem {item} />
+			{/each}
+		</div>
+	{/snippet}
+</Story>
+
+<Story name="Loading" args={{ items: new Promise(() => {}) }} />
diff --git a/web/src/lib/components/timeline/RecentsPreview.svelte b/web/src/lib/components/timeline/RecentsPreview.svelte
index dd6d585ae..6a50cb8ae 100644
--- a/web/src/lib/components/timeline/RecentsPreview.svelte
+++ b/web/src/lib/components/timeline/RecentsPreview.svelte
@@ -2,20 +2,23 @@
 	import History from "$icon/history";
 	import Route from "$icon/route";
 	import EmptyState from "$lib/components/ui/EmptyState.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 	import PreviewCard from "$lib/components/timeline/PreviewCard.svelte";
 	import PreviewEmpty from "$lib/components/timeline/PreviewEmpty.svelte";
 	import RecentItem, { recentPath } from "$lib/components/timeline/RecentItem.svelte";
+	import timelineRecentspreviewSkeletonFixture from "$lib/bones/timeline-recentspreview--skeleton-fixture.bones.json";
+	import Bones from "$lib/components/ui/Bones.svelte";
 	import type { RecentItemData } from "$lib/components/timeline/types";
 
-	let { items = [] }: { items?: RecentItemData[] } = $props();
+	let { items = [] }: { items?: RecentItemData[] | Promise<RecentItemData[]> } = $props();
 </script>
 
-<PreviewCard title="Recents" icon={History}>
-	{#if items.length > 0}
+{#snippet content(resolvedItems: RecentItemData[])}
+	{#if resolvedItems.length > 0}
 		<div class="relative flex flex-col rounded-b bg-background-default">
 			<!-- the thread the avatars and badges sit on, centred on the icon column -->
 			<div class="absolute inset-y-0 w-px bg-border-default" style="left: 1.875rem"></div>
-			{#each items as item (recentPath(item))}
+			{#each resolvedItems as item (recentPath(item))}
 				<RecentItem {item} />
 			{/each}
 		</div>
@@ -24,4 +27,18 @@
 			<EmptyState size="inline" message="No recent pages yet." class="justify-center" />
 		</PreviewEmpty>
 	{/if}
+{/snippet}
+
+<PreviewCard title="Recents" icon={History}>
+	{#if items instanceof Promise}
+		<Pending>
+			{#snippet skeleton()}
+				<Bones capture={timelineRecentspreviewSkeletonFixture} />
+			{/snippet}
+			{@const resolved = await items}
+			{@render content(resolved)}
+		</Pending>
+	{:else}
+		{@render content(items)}
+	{/if}
 </PreviewCard>
diff --git a/web/src/lib/components/timeline/Timeline.stories.svelte b/web/src/lib/components/timeline/Timeline.stories.svelte
index 707ffed92..fb7e9f3a8 100644
--- a/web/src/lib/components/timeline/Timeline.stories.svelte
+++ b/web/src/lib/components/timeline/Timeline.stories.svelte
@@ -27,16 +27,16 @@
 	}}
 />
 
-<Story name="Skeleton fixture" args={{ feed }}>
+<Story
+	name="Skeleton fixture"
+	args={{ feed }}
+	parameters={{
+		bones: {
+			class: "w-full max-w-150"
+		}
+	}}
+>
 	{#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>
+		<Timeline {...args} />
 	{/snippet}
 </Story>
diff --git a/web/src/lib/components/timeline/TimelineView.stories.svelte b/web/src/lib/components/timeline/TimelineView.stories.svelte
index f04ebf533..1ac0acba1 100644
--- a/web/src/lib/components/timeline/TimelineView.stories.svelte
+++ b/web/src/lib/components/timeline/TimelineView.stories.svelte
@@ -34,3 +34,12 @@
 
 <!-- nobody you follow has been busy, but trending still has something to say -->
 <Story name="Following empty" args={{ followingOnly: true, feed: [] }} />
+
+<!-- loading state with pending feed and trending skeletons -->
+<Story
+	name="Loading"
+	args={{
+		feed: new Promise(() => {}),
+		trending: new Promise(() => {})
+	}}
+/>
diff --git a/web/src/lib/components/timeline/TimelineView.svelte b/web/src/lib/components/timeline/TimelineView.svelte
index 9b289653c..d796c3400 100644
--- a/web/src/lib/components/timeline/TimelineView.svelte
+++ b/web/src/lib/components/timeline/TimelineView.svelte
@@ -5,29 +5,34 @@
 	import ButtonGroup from "$lib/components/ui/ButtonGroup.svelte";
 	import Announcements from "$lib/components/timeline/Announcements.svelte";
 	import NotificationsPreview from "$lib/components/timeline/NotificationsPreview.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
 	import RecentsPreview from "$lib/components/timeline/RecentsPreview.svelte";
 	import Timeline from "$lib/components/timeline/Timeline.svelte";
-	import TimelineSkeleton from "$lib/components/timeline/TimelineSkeleton.svelte";
 	import TrendingRepos from "$lib/components/timeline/TrendingRepos.svelte";
-	import TrendingSkeleton from "$lib/components/timeline/TrendingSkeleton.svelte";
+	import Bones from "$lib/components/ui/Bones.svelte";
+	import timelineTimelineSkeletonFixture from "$lib/bones/timeline-timeline--skeleton-fixture.bones.json";
 	import type { RepoCardData } from "$lib/components/profile/types";
+	import type { NotificationSummary } from "$lib/components/notifications/types";
+	import type { RecentItemData } from "$lib/components/timeline/types";
 	import type * as ShTangledFeedGetTimeline from "$lib/api/lexicons/types/sh/tangled/feed/getTimeline";
 
 	let {
 		feed = [],
 		trending = [],
+		notifications,
+		recents,
 		followingOnly = false,
 		signedIn = false,
-		loading = false,
-		trendingLoading = loading,
 		basePath
 	}: {
-		feed?: ShTangledFeedGetTimeline.$output["feed"];
-		trending?: RepoCardData[];
+		feed?:
+			| ShTangledFeedGetTimeline.$output["feed"]
+			| Promise<ShTangledFeedGetTimeline.$output["feed"]>;
+		trending?: RepoCardData[] | Promise<RepoCardData[]>;
+		notifications?: NotificationSummary[] | Promise<NotificationSummary[]>;
+		recents?: RecentItemData[] | Promise<RecentItemData[]>;
 		followingOnly?: boolean;
 		signedIn?: boolean;
-		loading?: boolean;
-		trendingLoading?: boolean;
 		/** route the global/following toggle stays on, e.g. "/" or "/timeline" */
 		basePath: string;
 	} = $props();
@@ -43,8 +48,8 @@
 	<div
 		class="hidden md:sticky md:top-0 md:flex md:h-screen md:w-full md:max-w-100 md:flex-col md:gap-4 md:overflow-y-auto md:p-4"
 	>
-		<NotificationsPreview {signedIn} />
-		<RecentsPreview />
+		<NotificationsPreview {signedIn} {notifications} />
+		<RecentsPreview items={recents} />
 	</div>
 
 	<div class="order-2 md:order-0 md:col-start-2 md:row-start-1 md:mx-auto md:w-full md:max-w-150">
@@ -72,8 +77,20 @@
 				{/if}
 			</div>
 
-			{#if loading}
-				<TimelineSkeleton />
+			{#if feed instanceof Promise}
+				<Pending>
+					{#snippet skeleton()}
+						<Bones capture={timelineTimelineSkeletonFixture} />
+					{/snippet}
+					{@const resolvedFeed = await feed}
+					<Timeline
+						feed={resolvedFeed}
+						{signedIn}
+						emptyMessage={followingOnly
+							? "Nobody you follow has been busy."
+							: "Nothing here yet."}
+					/>
+				</Pending>
 			{:else}
 				<Timeline
 					{feed}
@@ -90,11 +107,7 @@
 	<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"
 	>
-		{#if trendingLoading}
-			<TrendingSkeleton />
-		{:else}
-			<TrendingRepos repos={trending} />
-		{/if}
+		<TrendingRepos repos={trending} />
 
 		<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 383a3dbea..15e867f61 100644
--- a/web/src/lib/components/timeline/TrendingRepos.svelte
+++ b/web/src/lib/components/timeline/TrendingRepos.svelte
@@ -3,10 +3,27 @@
 	import type { RepoCardData } from "$lib/components/profile/types";
 	import PreviewCard from "$lib/components/timeline/PreviewCard.svelte";
 	import TrendingReposList from "$lib/components/timeline/TrendingReposList.svelte";
+	import Pending from "$lib/components/ui/Pending.svelte";
+	import Bones from "$lib/components/ui/Bones.svelte";
+	import timelineTrendingreposlistSkeletonFixture from "$lib/bones/timeline-trendingreposlist--skeleton-fixture.bones.json";
 
-	let { repos }: { repos: RepoCardData[] } = $props();
+	let {
+		repos = []
+	}: {
+		repos?: RepoCardData[] | Promise<RepoCardData[]>;
+	} = $props();
 </script>
 
 <PreviewCard title="Trending" icon={TrendingUp}>
-	<TrendingReposList {repos} />
+	{#if repos instanceof Promise}
+		<Pending>
+			{#snippet skeleton()}
+				<Bones capture={timelineTrendingreposlistSkeletonFixture} />
+			{/snippet}
+			{@const resolved = await repos}
+			<TrendingReposList repos={resolved} />
+		</Pending>
+	{:else}
+		<TrendingReposList {repos} />
+	{/if}
 </PreviewCard>
diff --git a/web/src/lib/components/timeline/load.ts b/web/src/lib/components/timeline/load.ts
index e0b628a33..f65750d7c 100644
--- a/web/src/lib/components/timeline/load.ts
+++ b/web/src/lib/components/timeline/load.ts
@@ -13,15 +13,23 @@ export interface LoadFeedOptions {
 
 // shared by /timeline and the signed-in homescreen at /
 export const loadFeed = async ({ ctx, followingOnly }: LoadFeedOptions) => {
-	const { feed } = await jsonGet<ShTangledFeedGetTimeline.$output>(
-		ctx,
-		"sh.tangled.feed.getTimeline",
-		{ followingOnly, limit: PAGE_LIMIT }
-	);
-	return feed;
+	try {
+		const { feed } = await jsonGet<ShTangledFeedGetTimeline.$output>(
+			ctx,
+			"sh.tangled.feed.getTimeline",
+			{ followingOnly, limit: PAGE_LIMIT }
+		);
+		return feed;
+	} catch {
+		return [];
+	}
 };
 
 export const loadTrendingRepos = async (ctx: BobbinContext) => {
-	const trending = await getTrending(ctx).catch(() => ({ people: [], repos: [] }));
-	return trending.repos.map(toRepoCard);
+	try {
+		const trending = await getTrending(ctx);
+		return trending.repos.map(toRepoCard);
+	} catch {
+		return [];
+	}
 };
diff --git a/web/src/lib/components/timeline/timelineFeed.svelte.ts b/web/src/lib/components/timeline/timelineFeed.svelte.ts
deleted file mode 100644
index a62d8babe..000000000
--- a/web/src/lib/components/timeline/timelineFeed.svelte.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import { createBobbinClient } from "$lib/api/client";
-import { getAuth } from "$lib/auth.svelte";
-import { loadFeed, loadTrendingRepos } from "$lib/components/timeline/load";
-import type * as ShTangledFeedGetTimeline from "$lib/api/lexicons/types/sh/tangled/feed/getTimeline";
-import type { RepoCardData } from "$lib/components/profile/types";
-
-export interface TimelineFeedOptions {
-	followingOnly: () => boolean;
-	/** set to `() => false` to skip fetching entirely (e.g. marketing page branch of `/`) */
-	enabled?: () => boolean;
-}
-
-export const createTimelineFeed = (opts: TimelineFeedOptions) => {
-	const auth = getAuth();
-
-	let feed = $state<ShTangledFeedGetTimeline.$output["feed"]>([]);
-	let trending = $state<RepoCardData[]>([]);
-	let loading = $state(true);
-	let trendingLoading = $state(true);
-	let failed = $state(false);
-
-	const signedIn = $derived(Boolean(auth.currentDid));
-
-	$effect(() => {
-		const isEnabled = opts.enabled ? opts.enabled() : true;
-		if (!isEnabled || auth.agentPending) return;
-
-		const agent = auth.agent ?? undefined;
-		const wantFollowing = opts.followingOnly() && Boolean(auth.currentDid);
-
-		loading = true;
-		failed = false;
-		let cancelled = false;
-
-		const ctx = createBobbinClient({ serviceUrl: auth.bobbinUrl, agent });
-		loadFeed({ ctx, followingOnly: wantFollowing })
-			.then((result) => {
-				if (cancelled) return;
-				feed = result;
-				loading = false;
-			})
-			.catch(() => {
-				if (!cancelled) {
-					loading = false;
-					failed = true;
-				}
-			});
-
-		return () => {
-			cancelled = true;
-		};
-	});
-
-	$effect(() => {
-		const isEnabled = opts.enabled ? opts.enabled() : true;
-		if (!isEnabled || auth.agentPending) return;
-
-		const agent = auth.agent ?? undefined;
-
-		trendingLoading = true;
-		let cancelled = false;
-
-		const ctx = createBobbinClient({ serviceUrl: auth.bobbinUrl, agent });
-		loadTrendingRepos(ctx)
-			.then((result) => {
-				if (cancelled) return;
-				trending = result;
-				trendingLoading = false;
-			})
-			.catch(() => {
-				if (!cancelled) {
-					trendingLoading = false;
-				}
-			});
-
-		return () => {
-			cancelled = true;
-		};
-	});
-
-	return {
-		get feed() {
-			return feed;
-		},
-		get trending() {
-			return trending;
-		},
-		get loading() {
-			return loading;
-		},
-		get trendingLoading() {
-			return trendingLoading;
-		},
-		get failed() {
-			return failed;
-		},
-		get signedIn() {
-			return signedIn;
-		}
-	};
-};
diff --git a/web/src/lib/notifications.svelte.ts b/web/src/lib/notifications.svelte.ts
index 2c78b61b2..68bf65795 100644
--- a/web/src/lib/notifications.svelte.ts
+++ b/web/src/lib/notifications.svelte.ts
@@ -40,8 +40,10 @@ export const createNotifications = (
 	};
 
 	const preview = async (limit: number): Promise<NotificationsPreview | null> => {
-		const agent = auth.agent;
-		if (!agent || !deliberiUrl) return null;
+		const did = auth.currentDid;
+		if (!did || !deliberiUrl) return null;
+		const agent = auth.agent ?? (await auth.agentFor(did).catch(() => null));
+		if (!agent) return null;
 		const deliberi = createDeliberiClient({ deliberiUrl, agent });
 		const hydrate = (items: NotificationItem[]): Promise<NotificationSummary[]> =>
 			hydrateNotifications(createBobbinClient({ serviceUrl: bobbinUrl }), items);
diff --git a/web/src/routes/+page.svelte b/web/src/routes/+page.svelte
index 96c4af3ac..14d532697 100644
--- a/web/src/routes/+page.svelte
+++ b/web/src/routes/+page.svelte
@@ -3,15 +3,13 @@
 	import { getAuth } from "$lib/auth.svelte";
 	import MarketingHome from "$lib/components/home/MarketingHome.svelte";
 	import TimelineView from "$lib/components/timeline/TimelineView.svelte";
-	import { createTimelineFeed } from "$lib/components/timeline/timelineFeed.svelte";
+	import type { PageData } from "./$types";
+
+	let { data }: { data: PageData } = $props();
 
 	const auth = getAuth();
 	const signedIn = $derived(Boolean(auth.currentUser));
 	const followingOnly = $derived(page.url.searchParams.get("following") === "true");
-	const feedState = createTimelineFeed({
-		followingOnly: () => followingOnly,
-		enabled: () => signedIn
-	});
 </script>
 
 <svelte:head>
@@ -21,12 +19,10 @@
 
 {#if signedIn}
 	<TimelineView
-		feed={feedState.feed}
-		trending={feedState.trending}
-		loading={feedState.loading}
-		trendingLoading={feedState.trendingLoading}
-		followingOnly={followingOnly && feedState.signedIn}
-		signedIn={feedState.signedIn}
+		feed={data.feed}
+		trending={data.trending}
+		followingOnly={followingOnly && signedIn}
+		{signedIn}
 		basePath="/"
 	/>
 {:else}
diff --git a/web/src/routes/+page.ts b/web/src/routes/+page.ts
index 7a1c58061..376730c3f 100644
--- a/web/src/routes/+page.ts
+++ b/web/src/routes/+page.ts
@@ -3,6 +3,7 @@ import { redirect } from "@sveltejs/kit";
 import { createBobbinClient } from "$lib/api/client";
 import { httpStatusFor, toHttpError } from "$lib/api/load";
 import { getProfile } from "$lib/api/records";
+import { loadFeed, loadTrendingRepos } from "$lib/components/timeline/load";
 import type { PageLoad } from "./$types";
 
 export const load: PageLoad = async (event) => {
@@ -27,5 +28,10 @@ export const load: PageLoad = async (event) => {
 		}
 	}
 
-	return {};
+	const followingOnly = event.url.searchParams.get("following") === "true";
+
+	return {
+		feed: loadFeed({ ctx, followingOnly }),
+		trending: loadTrendingRepos(ctx)
+	};
 };
diff --git a/web/src/routes/timeline/+page.svelte b/web/src/routes/timeline/+page.svelte
index 1c37a9c90..74aef253b 100644
--- a/web/src/routes/timeline/+page.svelte
+++ b/web/src/routes/timeline/+page.svelte
@@ -1,10 +1,14 @@
 <script lang="ts">
 	import { page } from "$app/state";
+	import { getAuth } from "$lib/auth.svelte";
 	import TimelineView from "$lib/components/timeline/TimelineView.svelte";
-	import { createTimelineFeed } from "$lib/components/timeline/timelineFeed.svelte";
+	import type { PageData } from "./$types";
 
+	let { data }: { data: PageData } = $props();
+
+	const auth = getAuth();
+	const signedIn = $derived(Boolean(auth.currentUser));
 	const followingOnly = $derived(page.url.searchParams.get("following") === "true");
-	const feedState = createTimelineFeed({ followingOnly: () => followingOnly });
 </script>
 
 <svelte:head>
@@ -12,11 +16,9 @@
 </svelte:head>
 
 <TimelineView
-	feed={feedState.feed}
-	trending={feedState.trending}
-	loading={feedState.loading}
-	trendingLoading={feedState.trendingLoading}
-	followingOnly={followingOnly && feedState.signedIn}
-	signedIn={feedState.signedIn}
+	feed={data.feed}
+	trending={data.trending}
+	followingOnly={followingOnly && signedIn}
+	{signedIn}
 	basePath="/timeline"
 />
diff --git a/web/src/routes/timeline/+page.ts b/web/src/routes/timeline/+page.ts
new file mode 100644
index 000000000..2ce6bdd4a
--- /dev/null
+++ b/web/src/routes/timeline/+page.ts
@@ -0,0 +1,18 @@
+import { createBobbinClient } from "$lib/api/client";
+import { loadFeed, loadTrendingRepos } from "$lib/components/timeline/load";
+import type { PageLoad } from "./$types";
+
+export const load: PageLoad = async (event) => {
+	const parent = await event.parent();
+	const ctx = createBobbinClient({
+		serviceUrl: parent.publicConfig.bobbinUrl,
+		fetch: event.fetch
+	});
+
+	const followingOnly = event.url.searchParams.get("following") === "true";
+
+	return {
+		feed: loadFeed({ ctx, followingOnly }),
+		trending: loadTrendingRepos(ctx)
+	};
+};
-- 
2.51.2