layout shifts

src/routes/weather/week/[location]/DailyStripSticky.svelte

@@ -44,6 +44,10 @@
 		locationRoute
 	}: Props = $props();
 
+	// enough placeholder tiles to fill a wide viewport; the row scrolls, so a
+	// couple too many costs nothing
+	const SKELETON_CELLS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
+
 	// ─── Scroll-driven collapse (full cards → compact strip) ────────────────────
 	// All sizing derives from a single registered custom property `--strip-p`
 	// (0 = full cards, 1 = compact strip). Mobile and desktop share the exact
@@ -308,7 +312,7 @@
 									class="flex w-full flex-col items-center gap-0.5 md:flex-row md:justify-center md:gap-2"
 								>
 									<span class="inline-flex items-center gap-1 {lowPrecip ? 'opacity-40' : ''}">
-										<svg class="fill-sky-500" width="13" height="13">
+										<svg class="fill-sky-500" width="16" height="16">
 											<use xlink:href="/images/weather-icons/wi-raindrop.svg#Layer_1"></use>
 										</svg>
 										{Number(precipSum ?? 0).toFixed(precipSum >= 10 ? 0 : 1)}
@@ -319,16 +323,16 @@
 												class="hidden shrink-0 md:inline-flex md:-mr-1"
 												style="transform: {getWindArrowRotation(windDir)}"
 											>
-												<svg class="fill-muted-foreground" width="20" height="20">
+												<svg class="fill-muted-foreground" width="25" height="25">
 													<use xlink:href="/images/weather-icons/wi-direction-down.svg#Layer_1"
 													></use>
 												</svg>
 											</span>
-											<svg class="fill-muted-foreground md:hidden" width="13" height="13">
+											<svg class="fill-muted-foreground md:hidden" width="16" height="16">
 												<use xlink:href="/images/weather-icons/wi-strong-wind.svg#Layer_1"></use>
 											</svg>
 										{:else}
-											<svg class="fill-muted-foreground" width="13" height="13">
+											<svg class="fill-muted-foreground" width="16" height="16">
 												<use xlink:href="/images/weather-icons/wi-strong-wind.svg#Layer_1"></use>
 											</svg>
 										{/if}
@@ -391,6 +395,16 @@
 					</a>
 				{/if}
 			</div>
+		{:else}
+			<!-- same cell metrics as the real strip, so the bar looks alive while
+			     the forecast lands and nothing moves when it does -->
+			<div class="strip-days flex">
+				{#each SKELETON_CELLS as i (i)}
+					<div
+						class="strip-cell shrink-0 animate-pulse rounded-xl border border-border/50 bg-muted/60"
+					></div>
+				{/each}
+			</div>
 		{/if}
 	</div>
 </div>