From 1c5ea2b52eeeaa26324f71ca9406f9da2e7c5f91 Mon Sep 17 00:00:00 2001
From: Vincent van der Wal <github@vincentvanderwal.nl>
Date: Thu, 6 Aug 2026 19:24:22 +0200
Subject: [PATCH] beter crossfade

---
 src/lib/utils/skeleton-fade.ts                |  44 ++++
 .../weather/14-day/[location]/+page.svelte    |  82 ++++----
 .../weather/compare/[location]/+page.svelte   |  80 ++++----
 .../historical/[location]/+page.svelte        |   6 +-
 .../weather/seasonal/[location]/+page.svelte  |  74 +++----
 .../weather/week/[location]/+page.svelte      | 189 +++++++++---------
 6 files changed, 276 insertions(+), 199 deletions(-)
 create mode 100644 src/lib/utils/skeleton-fade.ts

diff --git a/src/lib/utils/skeleton-fade.ts b/src/lib/utils/skeleton-fade.ts
new file mode 100644
index 0000000..851aede
--- /dev/null
+++ b/src/lib/utils/skeleton-fade.ts
@@ -0,0 +1,44 @@
+import type { TransitionConfig } from 'svelte/transition';
+
+const prefersReducedMotion = () =>
+	typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+/**
+ * Fades a loading placeholder out *over* the content that replaces it.
+ *
+ * A plain `out:fade` is not usable on a skeleton: Svelte keeps the node in the
+ * layout for the length of the transition, so the real content stacks below the
+ * placeholder and the whole page jumps up the moment the placeholder finally
+ * unmounts. That is why these placeholders only ever faded in - the swap was
+ * abrupt, but at least nothing moved.
+ *
+ * This pins the placeholder to the box it already occupies and takes it out of
+ * flow for the fade instead. The content settles into its final position
+ * immediately and the skeleton dissolves on top of it.
+ *
+ * Requirements at the call site: the placeholder's parent must be positioned
+ * (`class="relative"`) and must be the same element that renders the real
+ * content, or the overlay lands somewhere else on the page.
+ */
+export function skeletonOut(node: HTMLElement, { duration = 260 } = {}): TransitionConfig {
+	if (prefersReducedMotion()) return { duration: 0 };
+
+	// measured while the node is still in flow, which is when Svelte builds the
+	// transition - the values below are what freeze it in place
+	const { offsetTop, offsetLeft, offsetWidth, offsetHeight } = node;
+
+	return {
+		duration,
+		css: (t) => `
+			opacity: ${t};
+			position: absolute;
+			top: ${offsetTop}px;
+			left: ${offsetLeft}px;
+			width: ${offsetWidth}px;
+			height: ${offsetHeight}px;
+			margin: 0;
+			pointer-events: none;
+			z-index: 5;
+		`
+	};
+}
diff --git a/src/routes/weather/14-day/[location]/+page.svelte b/src/routes/weather/14-day/[location]/+page.svelte
index e440a6f..743053a 100644
--- a/src/routes/weather/14-day/[location]/+page.svelte
+++ b/src/routes/weather/14-day/[location]/+page.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import { get } from 'svelte/store';
+	import { fade } from 'svelte/transition';
 
 	import { page } from '$app/stores';
 
 	import { reportPageReady } from '$lib/stores/page-transition.svelte';
 	import { storedEnsembleModel, storedLocation, storedUnits } from '$lib/stores/settings';
 
+	import { skeletonOut } from '$lib/utils/skeleton-fade';
 	import { syncSearchParams, unlessDefault } from '$lib/utils/url-state';
 
 	import { ChartContainer, ChartToolbar } from '$lib/components/charts';
@@ -342,42 +344,52 @@
 	</div>
 {/if}
 
-{#if fetchedData}
-	<!-- full-bleed graphs until lg / contained card on lg+; titles stay within
-	     the page margins (padded), the graphs bleed to the edges -->
-	<div class="-mx-3 border-y border-border/70 bg-card shadow-sm lg:mx-0 lg:rounded-2xl lg:border">
-		{#each chartDefs as def, i (i)}
-			<div class="px-0 pt-1.5 pb-1 lg:px-4 lg:pb-3 {i > 0 ? 'border-t border-border/50' : ''}">
-				<div class="mb-1 px-3 lg:px-0">
-					<h4 class="text-sm font-bold tracking-tight">{def.title}</h4>
-					{#if def.subtitle}
-						<p class="text-xs text-muted-foreground">{def.subtitle}</p>
-					{/if}
+<!-- `relative` lets the placeholder dissolve over the finished charts (skeletonOut) -->
+<div class="relative">
+	{#if fetchedData}
+		<!-- full-bleed graphs until lg / contained card on lg+; titles stay within
+		     the page margins (padded), the graphs bleed to the edges -->
+		<div class="-mx-3 border-y border-border/70 bg-card shadow-sm lg:mx-0 lg:rounded-2xl lg:border">
+			{#each chartDefs as def, i (i)}
+				<div class="px-0 pt-1.5 pb-1 lg:px-4 lg:pb-3 {i > 0 ? 'border-t border-border/50' : ''}">
+					<div class="mb-1 px-3 lg:px-0">
+						<h4 class="text-sm font-bold tracking-tight">{def.title}</h4>
+						{#if def.subtitle}
+							<p class="text-xs text-muted-foreground">{def.subtitle}</p>
+						{/if}
+					</div>
+					<ChartContainer {loading} chartCount={1} chartHeight={300} minWidth={520} bleed={false}>
+						<CanvasChart
+							bind:this={chartComponents[i]}
+							timestamps={timestampsSec}
+							timezone={fetchedData.timezone}
+							series={def.series}
+							bands={fetchedData.daylightBands}
+							unit={def.unit}
+							showCredit={def.showCredit}
+							zeroBaseLeft={def.zeroBaseLeft ?? true}
+							yMin={def.yMin}
+							yMax={def.yMax}
+							{showLegend}
+							height={300}
+							group={CHART_GROUP}
+						/>
+					</ChartContainer>
 				</div>
-				<ChartContainer {loading} chartCount={1} chartHeight={300} minWidth={520} bleed={false}>
-					<CanvasChart
-						bind:this={chartComponents[i]}
-						timestamps={timestampsSec}
-						timezone={fetchedData.timezone}
-						series={def.series}
-						bands={fetchedData.daylightBands}
-						unit={def.unit}
-						showCredit={def.showCredit}
-						zeroBaseLeft={def.zeroBaseLeft ?? true}
-						yMin={def.yMin}
-						yMax={def.yMax}
-						{showLegend}
-						height={300}
-						group={CHART_GROUP}
-					/>
-				</ChartContainer>
-			</div>
-		{/each}
-	</div>
-{:else}
-	<!-- reserve the chart area height before data arrives (no layout shift) -->
-	<ChartContainer loading chartCount={params.hourly?.length || 1} chartHeight={340} bleed={false} />
-{/if}
+			{/each}
+		</div>
+	{:else}
+		<!-- reserve the chart area height before data arrives (no layout shift) -->
+		<div in:fade={{ duration: 200 }} out:skeletonOut>
+			<ChartContainer
+				loading
+				chartCount={params.hourly?.length || 1}
+				chartHeight={340}
+				bleed={false}
+			/>
+		</div>
+	{/if}
+</div>
 
 <!-- ─── Toolbar: Controls + Download ───────────────────────────────────────── -->
 
diff --git a/src/routes/weather/compare/[location]/+page.svelte b/src/routes/weather/compare/[location]/+page.svelte
index 6e4d55f..4300a0b 100644
--- a/src/routes/weather/compare/[location]/+page.svelte
+++ b/src/routes/weather/compare/[location]/+page.svelte
@@ -9,6 +9,7 @@
 	import { storedLocation, storedModel, storedUnits } from '$lib/stores/settings';
 
 	import { formatZoned } from '$lib/utils/date';
+	import { skeletonOut } from '$lib/utils/skeleton-fade';
 	import { listUnlessDefault, readList, syncSearchParams } from '$lib/utils/url-state';
 
 	import { ChartContainer, ChartToolbar } from '$lib/components/charts';
@@ -379,44 +380,49 @@
 
 <!-- chart count derives from the selected variables (not the fetched data),
      so the reserved height is right even before the response arrives -->
-{#if fetchedData}
-	<!-- full-bleed graphs until lg / contained card on lg+; titles stay within
-	     the page margins (padded), the graphs bleed to the edges -->
-	<div class="-mx-3 border-y border-border/70 bg-card shadow-sm lg:mx-0 lg:rounded-2xl lg:border">
-		{#each chartDefs as def, i (i)}
-			<div class="px-0 pt-1.5 pb-1 lg:px-4 lg:pb-3 {i > 0 ? 'border-t border-border/50' : ''}">
-				<div class="mb-1 px-3 lg:px-0">
-					<h4 class="text-sm font-bold tracking-tight">{def.title}</h4>
-					{#if def.subtitle}
-						<p class="text-xs text-muted-foreground">{def.subtitle}</p>
-					{/if}
+<!-- `relative` lets the placeholder dissolve over the finished charts (skeletonOut) -->
+<div class="relative">
+	{#if fetchedData}
+		<!-- full-bleed graphs until lg / contained card on lg+; titles stay within
+		     the page margins (padded), the graphs bleed to the edges -->
+		<div class="-mx-3 border-y border-border/70 bg-card shadow-sm lg:mx-0 lg:rounded-2xl lg:border">
+			{#each chartDefs as def, i (i)}
+				<div class="px-0 pt-1.5 pb-1 lg:px-4 lg:pb-3 {i > 0 ? 'border-t border-border/50' : ''}">
+					<div class="mb-1 px-3 lg:px-0">
+						<h4 class="text-sm font-bold tracking-tight">{def.title}</h4>
+						{#if def.subtitle}
+							<p class="text-xs text-muted-foreground">{def.subtitle}</p>
+						{/if}
+					</div>
+					<ChartContainer {loading} chartCount={1} chartHeight={300} minWidth={520} bleed={false}>
+						<CanvasChart
+							bind:this={chartComponents[i]}
+							timestamps={timestampsSec}
+							timezone={fetchedData.timezone}
+							series={def.series}
+							bands={fetchedData.daylightBands}
+							unit={def.unit}
+							showCredit={def.showCredit}
+							{showLegend}
+							height={300}
+							group={CHART_GROUP}
+						/>
+					</ChartContainer>
 				</div>
-				<ChartContainer {loading} chartCount={1} chartHeight={300} minWidth={520} bleed={false}>
-					<CanvasChart
-						bind:this={chartComponents[i]}
-						timestamps={timestampsSec}
-						timezone={fetchedData.timezone}
-						series={def.series}
-						bands={fetchedData.daylightBands}
-						unit={def.unit}
-						showCredit={def.showCredit}
-						{showLegend}
-						height={300}
-						group={CHART_GROUP}
-					/>
-				</ChartContainer>
-			</div>
-		{/each}
-	</div>
-{:else}
-	<!-- reserve the chart area height before data arrives (no layout shift) -->
-	<ChartContainer
-		loading
-		chartCount={params.hourly?.filter((v) => v !== 'weather_code').length || 1}
-		chartHeight={340}
-		bleed={false}
-	/>
-{/if}
+			{/each}
+		</div>
+	{:else}
+		<!-- reserve the chart area height before data arrives (no layout shift) -->
+		<div in:fade={{ duration: 200 }} out:skeletonOut>
+			<ChartContainer
+				loading
+				chartCount={params.hourly?.filter((v) => v !== 'weather_code').length || 1}
+				chartHeight={340}
+				bleed={false}
+			/>
+		</div>
+	{/if}
+</div>
 
 {#if fetchedData && !loading}
 	<ModelPictogramTimeline
diff --git a/src/routes/weather/historical/[location]/+page.svelte b/src/routes/weather/historical/[location]/+page.svelte
index a106540..5fe1c6b 100644
--- a/src/routes/weather/historical/[location]/+page.svelte
+++ b/src/routes/weather/historical/[location]/+page.svelte
@@ -13,6 +13,8 @@
 		storedVariablePrefs
 	} from '$lib/stores/settings';
 
+	import { skeletonOut } from '$lib/utils/skeleton-fade';
+
 	import { ChartContainer } from '$lib/components/charts';
 
 	import * as m from '$lib/paraglide/messages';
@@ -258,7 +260,7 @@
 		</div>
 	{/if}
 
-	<div class="mt-4">
+	<div class="relative mt-4">
 		{#if result && fetchedHourly && fetchedDaily}
 			<HistoricalDaily
 				daily={result.daily}
@@ -282,7 +284,7 @@
 
 			<HistoricalMeteograms data={fetchedHourly} units={params} {loading} {selectedDay} />
 		{:else}
-			<div transition:fade={{ duration: 200 }} class="grid gap-3">
+			<div in:fade={{ duration: 200 }} out:skeletonOut class="grid gap-3">
 				<div class="h-28 animate-pulse rounded-2xl border border-border/70 bg-card"></div>
 				<ChartContainer loading chartCount={3} chartHeight={300} bleed={false} />
 			</div>
diff --git a/src/routes/weather/seasonal/[location]/+page.svelte b/src/routes/weather/seasonal/[location]/+page.svelte
index 80f76b6..f5f0e83 100644
--- a/src/routes/weather/seasonal/[location]/+page.svelte
+++ b/src/routes/weather/seasonal/[location]/+page.svelte
@@ -6,6 +6,8 @@
 	import { reportPageReady } from '$lib/stores/page-transition.svelte';
 	import { storedLocation, storedSeasonalModel, storedUnits } from '$lib/stores/settings';
 
+	import { skeletonOut } from '$lib/utils/skeleton-fade';
+
 	import { ChartContainer, ChartToolbar } from '$lib/components/charts';
 	import { Label } from '$lib/components/ui/label';
 	import { Switch } from '$lib/components/ui/switch';
@@ -270,40 +272,44 @@
 		</div>
 	{/if}
 
-	{#if visible && months.length > 0}
-		<SeasonalMonths {months} units={params} {normals} />
+	<!-- `relative` anchors the placeholder while it fades out over the real
+	     outlook rather than holding its own slot in the layout (skeletonOut). -->
+	<div class="relative">
+		{#if visible && months.length > 0}
+			<SeasonalMonths {months} units={params} {normals} />
 
-		<div class="mt-6">
-			<SeasonalCharts
-				result={visible}
-				{normals}
-				units={params}
-				{loading}
-				{showLegend}
-				bind:charts={chartComponents}
-			/>
-		</div>
-
-		<div class="mt-6 md:mt-10">
-			<ChartToolbar charts={liveCharts} fileName="seasonal-outlook">
-				{#snippet controls()}
-					<div class="flex items-center gap-2">
-						<Switch id="show_legend" name="Show legend" bind:checked={showLegend} />
-						<Label for="show_legend" class="cursor-pointer text-base leading-none"
-							>{m.legend_show()}</Label
-						>
-					</div>
-				{/snippet}
-			</ChartToolbar>
-		</div>
-	{:else if !loadError}
-		<div transition:fade={{ duration: 200 }} class="grid gap-3">
-			<div class="grid gap-2.5 sm:grid-cols-2 lg:grid-cols-3">
-				{#each [0, 1, 2, 3, 4, 5] as i (i)}
-					<div class="h-44 animate-pulse rounded-xl border border-border/70 bg-card"></div>
-				{/each}
+			<div class="mt-6">
+				<SeasonalCharts
+					result={visible}
+					{normals}
+					units={params}
+					{loading}
+					{showLegend}
+					bind:charts={chartComponents}
+				/>
 			</div>
-			<ChartContainer loading chartCount={2} chartHeight={300} bleed={false} />
-		</div>
-	{/if}
+
+			<div class="mt-6 md:mt-10">
+				<ChartToolbar charts={liveCharts} fileName="seasonal-outlook">
+					{#snippet controls()}
+						<div class="flex items-center gap-2">
+							<Switch id="show_legend" name="Show legend" bind:checked={showLegend} />
+							<Label for="show_legend" class="cursor-pointer text-base leading-none"
+								>{m.legend_show()}</Label
+							>
+						</div>
+					{/snippet}
+				</ChartToolbar>
+			</div>
+		{:else if !loadError}
+			<div in:fade={{ duration: 200 }} out:skeletonOut class="grid gap-3">
+				<div class="grid gap-2.5 sm:grid-cols-2 lg:grid-cols-3">
+					{#each [0, 1, 2, 3, 4, 5] as i (i)}
+						<div class="h-44 animate-pulse rounded-xl border border-border/70 bg-card"></div>
+					{/each}
+				</div>
+				<ChartContainer loading chartCount={2} chartHeight={300} bleed={false} />
+			</div>
+		{/if}
+	</div>
 </PaywallGate>
diff --git a/src/routes/weather/week/[location]/+page.svelte b/src/routes/weather/week/[location]/+page.svelte
index e51b943..ee9176c 100644
--- a/src/routes/weather/week/[location]/+page.svelte
+++ b/src/routes/weather/week/[location]/+page.svelte
@@ -18,6 +18,7 @@
 	import { formatZoned } from '$lib/utils/date';
 	import { daySwap, runDayTransition } from '$lib/utils/day-swap';
 	import { buildLocationRoute } from '$lib/utils/location';
+	import { skeletonOut } from '$lib/utils/skeleton-fade';
 	import { syncSearchParams, unlessDefault } from '$lib/utils/url-state';
 
 	import { ChartContainer } from '$lib/components/charts';
@@ -473,109 +474,115 @@
 				{locationRoute}
 			/>
 
-			{#if fetchedHourly && fetchedDaily}
-				<div class="day-region-table" use:daySwap={selectedDayKey}>
-					<HourlyTable
-						data={fetchedHourly}
-						daily={fetchedDaily}
-						{selectedDay}
-						units={params}
-						locationName={location.name ?? ''}
-						onCustomize={() => (variableSidebarOpen = true)}
-					/>
-				</div>
-			{:else}
-				<!-- Mirrors the real table: same header bar and the same body height,
-				     so the heading doesn't pop in and nothing below moves.
-				     Placeholders only fade IN - a fade-out would keep them in the
-				     layout while the real content mounts below, and everything below
-				     would jump the moment they finally unmount. -->
-				<div
-					in:fade={{ duration: 200 }}
-					class="-mx-3 overflow-hidden border-y border-border/70 bg-card shadow-sm md:mx-0 md:rounded-2xl md:border"
-				>
+			<!-- `relative` is what lets the placeholder fade out on top of the table
+			     instead of holding a second slot in the layout (see skeletonOut). -->
+			<div class="relative">
+				{#if fetchedHourly && fetchedDaily}
+					<div class="day-region-table" use:daySwap={selectedDayKey}>
+						<HourlyTable
+							data={fetchedHourly}
+							daily={fetchedDaily}
+							{selectedDay}
+							units={params}
+							locationName={location.name ?? ''}
+							onCustomize={() => (variableSidebarOpen = true)}
+						/>
+					</div>
+				{:else}
+					<!-- Mirrors the real table: same header bar and the same body height,
+					     so the heading doesn't pop in and nothing below moves. -->
 					<div
-						class="flex items-center justify-between gap-2 border-b border-border/70 bg-muted/40 px-4 py-2.5"
+						in:fade={{ duration: 200 }}
+						out:skeletonOut
+						class="-mx-3 overflow-hidden border-y border-border/70 bg-card shadow-sm md:mx-0 md:rounded-2xl md:border"
 					>
-						<div class="h-6 w-44 animate-pulse rounded bg-muted"></div>
-						<div class="flex items-center gap-2">
-							<div class="h-8 w-24 animate-pulse rounded-lg bg-muted"></div>
-							<div class="h-8 w-20 animate-pulse rounded-lg bg-muted"></div>
-						</div>
-					</div>
-					<!-- one placeholder per row the real table will render, so the body
-					     reads as a loading table rather than a blank panel -->
-					<div class="divide-y divide-border/50">
-						<!-- the time + daylight row, which is taller than the variable rows -->
-						<div class="flex items-center gap-4 px-4" style="height: {TABLE_TIME_ROW_PX}px">
-							<div class="h-3.5 w-14 shrink-0 animate-pulse rounded bg-muted"></div>
-							<div class="h-5 flex-1 animate-pulse rounded bg-muted/70"></div>
-						</div>
-						{#each { length: enabledTableRows } as _, i (i)}
-							<div class="flex items-center gap-4 px-4" style="height: {tableRowPx}px">
-								<div class="h-3.5 w-14 shrink-0 animate-pulse rounded bg-muted"></div>
-								<div class="h-3.5 flex-1 animate-pulse rounded bg-muted/70"></div>
+						<div
+							class="flex items-center justify-between gap-2 border-b border-border/70 bg-muted/40 px-4 py-2.5"
+						>
+							<div class="h-6 w-44 animate-pulse rounded bg-muted"></div>
+							<div class="flex items-center gap-2">
+								<div class="h-8 w-24 animate-pulse rounded-lg bg-muted"></div>
+								<div class="h-8 w-20 animate-pulse rounded-lg bg-muted"></div>
 							</div>
-						{/each}
+						</div>
+						<!-- one placeholder per row the real table will render, so the body
+					     reads as a loading table rather than a blank panel -->
+						<div class="divide-y divide-border/50">
+							<!-- the time + daylight row, which is taller than the variable rows -->
+							<div class="flex items-center gap-4 px-4" style="height: {TABLE_TIME_ROW_PX}px">
+								<div class="h-3.5 w-14 shrink-0 animate-pulse rounded bg-muted"></div>
+								<div class="h-5 flex-1 animate-pulse rounded bg-muted/70"></div>
+							</div>
+							{#each { length: enabledTableRows } as _, i (i)}
+								<div class="flex items-center gap-4 px-4" style="height: {tableRowPx}px">
+									<div class="h-3.5 w-14 shrink-0 animate-pulse rounded bg-muted"></div>
+									<div class="h-3.5 flex-1 animate-pulse rounded bg-muted/70"></div>
+								</div>
+							{/each}
+						</div>
 					</div>
-				</div>
-			{/if}
+				{/if}
+			</div>
 
-			{#if fetchedHourly && fetchedDaily}
-				<div class="day-region-summary" use:daySwap={selectedDayKey}>
-					<DaySummary data={fetchedHourly} daily={fetchedDaily} {selectedDay} units={params} />
-				</div>
-			{:else}
-				<!-- Same footprint as the written forecast, so it doesn't shove the
-				     meteograms down when it arrives. The heights are measured from the
-				     real card at each breakpoint: on phones the narrative is clamped to
-				     five lines with a fixed toggle row, so that side is exact; from md
-				     up the text runs free and this is the typical height. The sun/moon
-				     grid reflows at sm, md and lg, which is why all four are needed. -->
-				<section class="mt-6" in:fade={{ duration: 200 }}>
-					<div
-						class="h-96.5 animate-pulse rounded-2xl border border-border/70 bg-card sm:h-85 md:h-73 lg:h-56"
-					></div>
-				</section>
-			{/if}
+			<div class="relative">
+				{#if fetchedHourly && fetchedDaily}
+					<div class="day-region-summary" use:daySwap={selectedDayKey}>
+						<DaySummary data={fetchedHourly} daily={fetchedDaily} {selectedDay} units={params} />
+					</div>
+				{:else}
+					<!-- Same footprint as the written forecast, so it doesn't shove the
+					     meteograms down when it arrives. The heights are measured from the
+					     real card at each breakpoint: on phones the narrative is clamped to
+					     five lines with a fixed toggle row, so that side is exact; from md
+					     up the text runs free and this is the typical height. The sun/moon
+					     grid reflows at sm, md and lg, which is why all four are needed. -->
+					<section class="mt-6" in:fade={{ duration: 200 }} out:skeletonOut>
+						<div
+							class="h-96.5 animate-pulse rounded-2xl border border-border/70 bg-card sm:h-85 md:h-73 lg:h-56"
+						></div>
+					</section>
+				{/if}
+			</div>
 
-			{#if fetchedHourly}
-				<div class="day-region-charts" use:daySwap={selectedDayKey}>
-					<MeteogramCharts
-						data={fetchedHourly}
-						{selectedDay}
-						units={params}
-						{loading}
-						{chartHeight}
-					/>
-				</div>
-			{:else}
-				<!-- reserve the exact chart area height before the first fetch resolves,
-				     header row included -->
-				<section class="mt-8" in:fade={{ duration: 200 }}>
-					<!-- The real header wraps to two rows until the controls fit beside
+			<div class="relative">
+				{#if fetchedHourly}
+					<div class="day-region-charts" use:daySwap={selectedDayKey}>
+						<MeteogramCharts
+							data={fetchedHourly}
+							{selectedDay}
+							units={params}
+							{loading}
+							{chartHeight}
+						/>
+					</div>
+				{:else}
+					<!-- reserve the exact chart area height before the first fetch resolves,
+					     header row included -->
+					<section class="mt-8" in:fade={{ duration: 200 }} out:skeletonOut>
+						<!-- The real header wraps to two rows until the controls fit beside
 					     the title, which happens at different widths than you would
 					     expect because the sidebar takes its share from md up. These
 					     min-heights follow the measured wrap points. -->
-					<div
-						class="mb-3 flex min-h-27 flex-wrap items-center justify-between gap-2 sm:min-h-16.5 md:min-h-27 lg:min-h-16.5 xl:min-h-7.5"
-					>
-						<div class="h-7 w-52 animate-pulse rounded bg-muted"></div>
-						<div class="flex items-center gap-3">
-							<div class="h-7 w-56 animate-pulse rounded-lg bg-muted"></div>
-							<div class="h-7 w-24 animate-pulse rounded-lg bg-muted"></div>
+						<div
+							class="mb-3 flex min-h-27 flex-wrap items-center justify-between gap-2 sm:min-h-16.5 md:min-h-27 lg:min-h-16.5 xl:min-h-7.5"
+						>
+							<div class="h-7 w-52 animate-pulse rounded bg-muted"></div>
+							<div class="flex items-center gap-3">
+								<div class="h-7 w-56 animate-pulse rounded-lg bg-muted"></div>
+								<div class="h-7 w-24 animate-pulse rounded-lg bg-muted"></div>
+							</div>
 						</div>
-					</div>
-					<!-- Each meteogram is its plot plus a title row and axis labels, so
+						<!-- Each meteogram is its plot plus a title row and axis labels, so
 					     the reserved box needs that chrome on top of the plot height or
 					     everything below lands ~50px per chart too high. -->
-					<ChartContainer
-						loading
-						chartCount={enabledChartCount || 1}
-						chartHeight={chartHeight + (narrowViewport ? 43 : 62)}
-					/>
-				</section>
-			{/if}
+						<ChartContainer
+							loading
+							chartCount={enabledChartCount || 1}
+							chartHeight={chartHeight + (narrowViewport ? 43 : 62)}
+						/>
+					</section>
+				{/if}
+			</div>
 
 			{#if selectedDayKey}
 				<NearbyCities