From cccb7f49f6f32bde61529e3205337c44ee9bf40e Mon Sep 17 00:00:00 2001
From: Mathias Picker <48158184+MathiasWP@users.noreply.github.com>
Date: Mon, 24 Aug 2026 18:43:41 +0200
Subject: [PATCH] Spin the refresh icon in place

---
 .changeset/spinning-icons-hold-still.md |  5 +++++
 src/lib/components/Sidebar.svelte       | 14 ++++++++++++--
 2 files changed, 17 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/spinning-icons-hold-still.md

diff --git a/.changeset/spinning-icons-hold-still.md b/.changeset/spinning-icons-hold-still.md
new file mode 100644
index 0000000..3a5125a
--- /dev/null
+++ b/.changeset/spinning-icons-hold-still.md
@@ -0,0 +1,5 @@
+---
+'fiber': patch
+---
+
+Keep the refresh spinner on its axis — it was sized 11.7px, and the rotated mask landed on a slightly different centre at each angle, so it wobbled rather than spun.
diff --git a/src/lib/components/Sidebar.svelte b/src/lib/components/Sidebar.svelte
index d6980ff..9cc16b6 100644
--- a/src/lib/components/Sidebar.svelte
+++ b/src/lib/components/Sidebar.svelte
@@ -1048,11 +1048,18 @@
 									<Tooltip.Root>
 										<Tooltip.Trigger>
 											{#snippet child({ props })}
+												<!--
+													Sized in whole pixels instead of `text-3`, which every other
+													icon here uses: an icon box is 1.2em, and against the 13px root
+													that comes out 11.7px. A mask that size resamples to a slightly
+													different centre at each angle, so the spin wobbles instead of
+													turning in place. A whole-pixel box holds still.
+												-->
 												<span
 													{...props}
 													role="img"
 													aria-label="Refreshing endpoints"
-													class="i-lucide-refresh-cw text-3 text-muted shrink-0 animate-spin"
+													class="i-lucide-refresh-cw w-12px h-12px text-muted shrink-0 animate-spin"
 												></span>
 											{/snippet}
 										</Tooltip.Trigger>
@@ -1103,8 +1110,11 @@
 									</ContextMenu.Item>
 									{#if section.loader}
 										<ContextMenu.Item class="menu-item" onSelect={() => refresh(section)}>
+											<!-- Whole-pixel box so the spin doesn't wobble — see above. -->
 											<span
-												class="i-lucide-refresh-cw text-3 {collections.loading[section.id]
+												class="i-lucide-refresh-cw w-12px h-12px {collections.loading[
+													section.id
+												]
 													? 'animate-spin'
 													: ''}"
 											></span>