From 118f9989488f2b885c0e9676d9fc4e31b5d82794 Mon Sep 17 00:00:00 2001 From: AlexRV12 <71396855+AlexRV12@users.noreply.github.com> Date: Thu, 3 Sep 2026 10:21:06 +0200 Subject: [PATCH] fix: keep the sliding tab indicator from measuring the state it writes --- frontend/src/lib/components/common/tabs/Tabs.svelte | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/frontend/src/lib/components/common/tabs/Tabs.svelte b/frontend/src/lib/components/common/tabs/Tabs.svelte index 158706c5ad..b287b12c0a 100644 --- a/frontend/src/lib/components/common/tabs/Tabs.svelte +++ b/frontend/src/lib/components/common/tabs/Tabs.svelte @@ -77,10 +77,15 @@ // label renders to. Zero width means nothing is selected yet, and the bar stays hidden. let row: HTMLDivElement | undefined = $state() let bar = $state({ x: 0, w: 0 }) + // Where the bar rests while nothing is selected, so it fades out in place rather than + // sliding to the left edge. A plain local, not state: measureBar runs inside the effect + // below, and reading there the state it writes would make that effect its own dependency. + let lastX = 0 function measureBar() { const el = row?.querySelector('[data-tab-selected="true"]') - bar = el ? { x: el.offsetLeft, w: el.offsetWidth } : { x: bar.x, w: 0 } + if (el) lastX = el.offsetLeft + bar = { x: lastX, w: el ? el.offsetWidth : 0 } } // Placing the bar for the first paint. Every later move comes from the observers below: a