overlay

2026-08-06 19:11:11 +02:00
parent 025623aaa6
commit f4a02a208c
21 changed files with 336 additions and 78 deletions
@@ -3,6 +3,11 @@
 	<head>
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		<!-- Declared in the shell, not in the layout head: the SPA fallback page
+		     (404.html) ships no rendered head, so without this the browser falls
+		     back to requesting /favicon.ico and takes a 404 on every load of an
+		     unprerendered URL. -->
+		<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
 		<script>
 			// apply the persisted theme before first paint to avoid a flash
 			try {
@@ -41,6 +41,13 @@
 		if (flagEl && !flagEl.src.endsWith(src)) flagEl.src = src;
 	});

+	// Built as a string rather than inline markup: the pieces are optional, and
+	// separators spelled out in the template lose their spacing to Svelte's
+	// whitespace trimming ("Canton of Schwyz,Switzerland").
+	let locationRegion = $derived([location?.admin1, location?.country].filter(Boolean).join(', '));
+	// the pill ellipses, so the full name still has to be readable somewhere
+	let locationLine = $derived([location?.name, locationRegion].filter(Boolean).join(' · '));
+
 	const themeCycle: Theme[] = ['system', 'light', 'dark'];
 	const themeTitles: Record<Theme, () => string> = {
 		system: m.theme_follow_system,
@@ -99,8 +106,10 @@

 	<!-- Current location display -->
 	{#if location}
+		<!-- min-w-0 + a ceiling so a long "Sant Pere de Ribes, Catalonia, Spain"
+		     ellipses inside the pill instead of pushing the search box off centre -->
 		<div
-			class="hidden items-center gap-2 rounded-full border border-border/70 bg-muted/40 py-1 ps-1 pe-3 lg:flex"
+			class="hidden min-w-0 max-w-70 items-center gap-2 rounded-full border border-border/70 bg-muted/40 py-1 ps-1 pe-3 lg:flex xl:max-w-96"
 		>
 			<img
 				bind:this={flagEl}
@@ -109,13 +118,10 @@
 				alt={location.country}
 			/>
 			<!-- full location (desktop); the page hero carries it on smaller screens -->
-			<span class="whitespace-nowrap text-sm font-semibold text-foreground">
+			<span class="min-w-0 truncate text-sm font-semibold text-foreground" title={locationLine}>
 				{location.name}
-				{#if location.admin1 || location.country}
-					<span class="font-normal text-muted-foreground">
-						· {#if location.admin1}{location.admin1},&nbsp;
-						{/if}{location.country ?? ''}
-					</span>
+				{#if locationRegion}
+					<span class="font-normal text-muted-foreground">· {locationRegion}</span>
 				{/if}
 			</span>
 		</div>
@@ -11,12 +11,40 @@ import type { Locale as DateFnsLocale } from 'date-fns';
 // locale the messages do.
 const DATE_LOCALES: Record<string, DateFnsLocale> = { en: enGB, de, es, fr, it };

+/**
+ * Normalises anything date-shaped into a plain `Date`, or null when it does not
+ * describe a real instant.
+ *
+ * Two reasons every helper below starts here:
+ *
+ * 1. date-fns copies its input with `new date.constructor(value)`. Hand it the
+ *    reactive `SvelteDate` the pages use for the selected day and it builds
+ *    *another* SvelteDate, then reads the copy's fields back through memoised
+ *    signals - a signal graph per formatted timestamp, in a path that runs
+ *    hundreds of times per render.
+ * 2. date-fns throws `RangeError: Invalid time value` on an invalid date. Thrown
+ *    from inside a render (or inside a view-transition callback, where it
+ *    surfaces as an unhandled rejection) that takes the whole page down for what
+ *    is really one unformattable cell.
+ */
+function plainDate(date: Date | null | undefined): Date | null {
+	const time = date?.getTime?.();
+	if (time == null || !Number.isFinite(time)) return null;
+	// already a plain Date: no copy needed
+	return date!.constructor === Date ? (date as Date) : new Date(time);
+}
+
 /**
 * Formats a UTC Date into a string for a specific timezone using date-fns patterns.
 * Patterns: 'HH:mm' for 24h time, 'EEE' for short weekday, etc.
+ *
+ * Returns '' for a date or zone it cannot format - callers compare these strings
+ * or print them, and both degrade gracefully on an empty one.
 */
 export function formatZoned(date: Date, timeZone: string, pattern: string): string {
-	return formatInTimeZone(date, timeZone, pattern, {
+	const d = plainDate(date);
+	if (!d || !timeZone) return '';
+	return formatInTimeZone(d, timeZone, pattern, {
 		locale: DATE_LOCALES[getLocale()] ?? enGB
 	});
 }
@@ -26,16 +54,20 @@ export function formatZoned(date: Date, timeZone: string, pattern: string): stri
 * Important for comparing weather forecast days against a selected date.
 */
 export function isSameDayInZone(date1: Date, date2: Date, timeZone: string): boolean {
-	const z1 = toZonedTime(date1, timeZone);
-	const z2 = toZonedTime(date2, timeZone);
-	return isSameDayDateFns(z1, z2);
+	const d1 = plainDate(date1);
+	const d2 = plainDate(date2);
+	if (!d1 || !d2 || !timeZone) return false;
+	return isSameDayDateFns(toZonedTime(d1, timeZone), toZonedTime(d2, timeZone));
 }

 /**
- * Gets the numeric hour (0-23) for a date in a specific timezone.
+ * Gets the numeric hour (0-23) for a date in a specific timezone, or NaN when
+ * the date cannot be read.
 */
 export function getZonedHour(date: Date, timeZone: string): number {
-	return parseInt(formatInTimeZone(date, timeZone, 'H'), 10);
+	const d = plainDate(date);
+	if (!d || !timeZone) return NaN;
+	return parseInt(formatInTimeZone(d, timeZone, 'H'), 10);
 }

 /**
@@ -43,9 +75,11 @@ export function getZonedHour(date: Date, timeZone: string): number {
 * or a formatted date string, all relative to the target timezone.
 */
 export function getRelativeDayLabel(date: Date, timeZone: string): string {
-	const now = new Date();
-	const zonedDate = toZonedTime(date, timeZone);
-	const zonedNow = toZonedTime(now, timeZone);
+	const d = plainDate(date);
+	if (!d || !timeZone) return '';
+
+	const zonedDate = toZonedTime(d, timeZone);
+	const zonedNow = toZonedTime(new Date(), timeZone);

 	if (isSameDayDateFns(zonedDate, zonedNow)) return m.day_today();

@@ -57,7 +91,7 @@ export function getRelativeDayLabel(date: Date, timeZone: string): string {
 	yesterday.setDate(yesterday.getDate() - 1);
 	if (isSameDayDateFns(zonedDate, yesterday)) return m.day_yesterday();

-	return formatZoned(date, timeZone, 'EEE d MMM');
+	return formatZoned(d, timeZone, 'EEE d MMM');
 }

 /**
@@ -24,10 +24,18 @@ export async function runDayTransition(update: () => void): Promise<void> {
 	try {
 		// Svelte applies the change on the next tick; the transition has to wait
 		// for that before it snapshots the new state.
-		await document.startViewTransition(async () => {
+		const transition = document.startViewTransition(async () => {
 			update();
 			await tick();
-		}).finished;
+		});
+		// A throw inside the callback rejects `updateCallbackDone` as well as
+		// `finished`. Nothing awaits the former, and that unhandled rejection is
+		// what turns one bad render into an "Uncaught" error on the page - so
+		// report it here instead and let `finished` drive the flow.
+		transition.updateCallbackDone.catch((error: unknown) => {
+			console.error('day transition failed to apply', error);
+		});
+		await transition.finished;
 	} catch {
 		/* a superseded transition is fine - the DOM is already up to date */
 	} finally {
@@ -76,6 +76,16 @@ interface ResolveLocationOptions {
 	};
 }

+/**
+ * Geocoding results for a route segment, kept for the life of the process.
+ *
+ * A city's coordinates do not change, and the same segment is resolved over and
+ * over: once per per-location route during the prerender (five builds of the
+ * same lookup for every city), and again on every client-side hop from a city's
+ * week page to its comparison or archive.
+ */
+const resolvedLocations = new Map<string, GeoLocation>();
+
 export async function resolveLocationFromRoute({
 	urlLocation,
 	routePrefix,
@@ -86,6 +96,11 @@ export async function resolveLocationFromRoute({
 		return coordinateLocation(parseFloat(coordMatch[1]), parseFloat(coordMatch[2]));
 	}

+	// The canonical-path check below still has to run per call (the same city is
+	// reached under different route prefixes), so only the lookup is cached.
+	const cached = resolvedLocations.get(urlLocation);
+	if (cached) return finishResolve(cached, routePrefix, event);
+
 	let urlLocationName: string;
 	let urlLocationId: string | undefined;

@@ -124,6 +139,15 @@ export async function resolveLocationFromRoute({
 		location = candidate;
 	}

+	resolvedLocations.set(urlLocation, location);
+	return finishResolve(location, routePrefix, event);
+}
+
+function finishResolve(
+	location: GeoLocation,
+	routePrefix: string,
+	event: ResolveLocationOptions['event']
+): GeoLocation {
 	// trailingSlash is 'always' (see routes/+layout.ts), so the router serves
 	// every path with a trailing slash. Match that here or the equality check
 	// never holds and the redirect loops forever. The comparison also has to
@@ -13,9 +13,8 @@
 	import Header from '$lib/components/navigation/header.svelte';
 	import WeatherNav from '$lib/components/navigation/weather-nav.svelte';

-	import favicon from '$lib/assets/favicon.svg';
-
 	import { routePath } from '$lib/i18n';
+	import * as m from '$lib/paraglide/messages';

 	import './layout.css';

@@ -63,18 +62,46 @@
 	// ── Page cross-fade ───────────────────────────────────────────────────────
 	// A real cross-fade needs the outgoing page still on screen while the
 	// incoming one appears - so the view transition is opened at navigation and
-	// deliberately held open until the new page reports that its data has landed.
-	// The browser keeps showing the old snapshot for that whole time (rather than
-	// flashing a skeleton), then fades it into the finished page.
+	// held open for a short grace period, waiting for the new page to report that
+	// its data has landed. A cached or fast response lands inside that window and
+	// the old page fades straight into the finished one, no skeleton in between.
 	//
-	// The wait is capped: past the ceiling we cross-fade into whatever is on
-	// screen instead of freezing the UI on a slow network.
-	const READY_CEILING_MS = 2200;
+	// Past the grace period the wait gives up and the loading overlay takes over:
+	// holding the old page frozen any longer looks like a dead click, and the
+	// overlay is the honest answer - something is happening, it just isn't here
+	// yet. Note the order: the overlay has to be in the DOM *before* the
+	// transition captures the incoming state, because a running view transition
+	// freezes the page and nothing painted after that point can appear.
+	const READY_HOLD_MS = 350;
 	const FADE_OUT_MS = 170;
+	// Nothing reports ready when a fetch fails outright, so the overlay needs its
+	// own way out rather than sitting on top of an error message forever.
+	const OVERLAY_CEILING_MS = 15000;

 	let contentVisible = $state(true);
 	let revealTimer = 0;

+	let loadingOverlay = $state(false);
+	let overlayHoldTimer = 0;
+	let overlayCeilingTimer = 0;
+
+	function showOverlay(): void {
+		loadingOverlay = true;
+		clearTimeout(overlayCeilingTimer);
+		overlayCeilingTimer = window.setTimeout(() => (loadingOverlay = false), OVERLAY_CEILING_MS);
+	}
+
+	function hideOverlay(): void {
+		clearTimeout(overlayHoldTimer);
+		clearTimeout(overlayCeilingTimer);
+		loadingOverlay = false;
+	}
+
+	/** The page that just mounted has its data: whatever we were waiting for is in. */
+	$effect(() => {
+		if ($pageContentReady) hideOverlay();
+	});
+
 	const reducedMotion = () =>
 		typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;

@@ -89,22 +116,36 @@
 		'/weather/historical/[location]'
 	]);

-	/** Resolves once the freshly mounted page has its data, or at the ceiling. */
+	/**
+	 * Resolves once the freshly mounted page has its data, or once the grace
+	 * period is up - in which case the overlay goes up first, so it is part of
+	 * the state the transition is about to snapshot.
+	 */
 	async function waitForContent(): Promise<void> {
-		const deadline = Date.now() + READY_CEILING_MS;
+		const deadline = Date.now() + READY_HOLD_MS;
 		while (!get(pageContentReady) && Date.now() < deadline) {
-			await new Promise((resolve) => setTimeout(resolve, 40));
+			await new Promise((resolve) => setTimeout(resolve, 20));
 		}
+		if (!get(pageContentReady)) showOverlay();
 		// one more frame so the page paints its data before the snapshot is taken
 		await tick();
 	}

 	onNavigate((navigation) => {
-		if (reducedMotion()) return;
-
 		const loadsData = DATA_ROUTES.has(navigation.to?.route?.id ?? '');
 		if (loadsData) markPageLoading();

+		if (reducedMotion()) {
+			// No transition to hang the wait on, so the overlay gets its own timer.
+			if (loadsData) {
+				clearTimeout(overlayHoldTimer);
+				overlayHoldTimer = window.setTimeout(() => {
+					if (!get(pageContentReady)) showOverlay();
+				}, READY_HOLD_MS);
+			}
+			return;
+		}
+
 		if (typeof document.startViewTransition === 'function') {
 			return new Promise<void>((swap) => {
 				document.startViewTransition(async () => {
@@ -142,11 +183,17 @@
 		}
 		const startedAt = Date.now();
 		const reveal = () => {
-			if (get(pageContentReady) || Date.now() - startedAt > READY_CEILING_MS) {
+			if (get(pageContentReady)) {
 				contentVisible = true;
 				return;
 			}
-			revealTimer = window.setTimeout(reveal, 60);
+			if (Date.now() - startedAt > READY_HOLD_MS) {
+				// same trade as above: show the skeleton, and say why it is empty
+				contentVisible = true;
+				showOverlay();
+				return;
+			}
+			revealTimer = window.setTimeout(reveal, 20);
 		};
 		reveal();
 	});
@@ -171,11 +218,40 @@
 </script>

 <svelte:head>
-	<link rel="icon" href={favicon} />
+	<!-- the icon itself lives in app.html, so the SPA fallback carries it too -->
 	<meta charset="utf-8" />
 	<meta name="viewport" content="width=device-width, initial-scale=1" />
 </svelte:head>

+<!-- Page-wide loading veil. Deliberately `pointer-events-none`: it is a status
+     indicator, not a modal, so the nav and the search stay usable while a slow
+     forecast is still on its way. -->
+{#if loadingOverlay}
+	<div
+		class="pointer-events-none fixed inset-0 z-60 flex items-center justify-center bg-background/55 backdrop-blur-[2px]"
+		in:fade={{ duration: 120 }}
+		out:fade={{ duration: 280 }}
+		role="status"
+		aria-live="polite"
+	>
+		<div
+			class="flex items-center gap-2.5 rounded-full border border-border bg-card px-4 py-2 shadow-lg"
+		>
+			<svg
+				class="h-4 w-4 animate-spin text-primary"
+				fill="none"
+				stroke="currentColor"
+				viewBox="0 0 24 24"
+				stroke-width="2.5"
+				aria-hidden="true"
+			>
+				<path stroke-linecap="round" d="M21 12a9 9 0 1 1-6.219-8.56" />
+			</svg>
+			<span class="text-sm font-semibold">{m.page_loading()}</span>
+		</div>
+	</div>
+{/if}
+
 <div class="flex h-screen overflow-hidden bg-background text-foreground">
 	<!-- Desktop sidebar -->
 	<div class="hidden h-full shrink-0 md:block">
@@ -42,6 +42,11 @@
 	let subtitle = $derived(
 		SUBTITLES.find(([prefix]) => routePath($page.url.pathname).startsWith(prefix))?.[1]?.() ?? null
 	);
+
+	// Joined here rather than in the markup: Svelte trims the whitespace around a
+	// line break, so a separator written as "{admin1},\n{country}" renders as
+	// "Canton of Schwyz,Switzerland".
+	let region = $derived([location?.admin1, location?.country].filter(Boolean).join(', '));
 </script>

 {#if subtitle && location}
@@ -57,10 +62,8 @@
 					{location.name}
 				</h1>
 				<p class="truncate text-sm text-muted-foreground">
-					<span class="lg:hidden"
-						>{#if location.admin1}{location.admin1},
-						{/if}{location.country ?? ''}<span class="mx-1 opacity-50">·</span></span
-					>{subtitle}
+					{#if region}<span class="lg:hidden">{region}<span class="mx-1 opacity-50">·</span></span
+						>{/if}{subtitle}
 				</p>
 			</div>
 		</div>
@@ -44,7 +44,7 @@
 	let { data }: { data: PageData } = $props();

 	// the page cross-fade waits for this before revealing the new page
-	reportPageReady(() => fetchedData != null);
+	reportPageReady(() => fetchedData != null || loadError != null);

 	useHeroActions(heroActions);

@@ -59,7 +59,7 @@
 	let { data }: { data: PageData } = $props();

 	// the page cross-fade waits for this before revealing the new page
-	reportPageReady(() => fetchedData != null);
+	reportPageReady(() => fetchedData != null || loadError != null);

 	useHeroActions(heroActions);

@@ -39,8 +39,10 @@

 	let { data }: { data: PageData } = $props();

-	// the page cross-fade waits for this before revealing the new page
-	reportPageReady(() => result != null);
+	// The page cross-fade waits for this before revealing the new page - and so
+	// does the loading overlay, so a visitor without a key has to count as ready:
+	// the paywall is the finished page here, nothing is on its way.
+	reportPageReady(() => result != null || loadError != null || !$isSupporter);

 	useHeroActions(heroActions);

@@ -213,7 +215,9 @@
 	);

 	function switchDay(date: Date) {
-		selectedDay.setTime(date.getTime());
+		// see the week page: an unformattable selected day breaks every consumer
+		const time = date?.getTime();
+		if (Number.isFinite(time)) selectedDay.setTime(time);
 	}
 </script>

@@ -33,8 +33,10 @@

 	let { data }: { data: PageData } = $props();

-	// the page cross-fade waits for this before revealing the new page
-	reportPageReady(() => result != null);
+	// The page cross-fade waits for this before revealing the new page - and so
+	// does the loading overlay, so a visitor without a key has to count as ready:
+	// the paywall is the finished page here, nothing is on its way.
+	reportPageReady(() => result != null || loadError != null || !$isSupporter);

 	useHeroActions(heroActions);

@@ -189,33 +191,39 @@

 <!-- the range buttons ride in the layout's location row (see weather/+layout) -->
 {#snippet heroActions()}
-	<div class="flex w-full flex-wrap items-center gap-3 sm:w-auto">
-		{#if result}
-			<!-- range buttons reslice the already-fetched horizon (no refetch) -->
-			<div
-				class="flex w-full gap-1 rounded-lg border border-border bg-card p-1 sm:w-auto"
-				role="group"
-				aria-label={m.seasonal_range_aria()}
-			>
-				{#each RANGES as range, i (range.label)}
-					{@const disabled = range.days !== Infinity && range.days > horizonDays}
-					<button
-						type="button"
-						class="flex-1 cursor-pointer rounded-md px-3 py-1.5 text-xs font-semibold whitespace-nowrap transition-colors sm:flex-none {rangeIndex ===
-						i
-							? 'bg-primary text-primary-foreground'
-							: 'text-muted-foreground hover:bg-muted hover:text-foreground'} {disabled
-							? 'cursor-not-allowed opacity-40'
-							: ''}"
-						aria-pressed={rangeIndex === i}
-						{disabled}
-						onclick={() => (rangeIndex = i)}
-					>
-						{range.label}
-					</button>
-				{/each}
-			</div>
-		{/if}
+	<!-- Out of flow on lg+ (the hero row is `relative`), same as the week, 14-day
+	     and archive pages: the controls then cannot move the heading when they
+	     change size. -->
+	<div class="flex w-full flex-wrap items-center gap-3 sm:w-auto lg:absolute lg:top-0 lg:right-0">
+		<!-- Range buttons reslice the already-fetched horizon (no refetch). Kept
+		     mounted and merely hidden while the forecast is on its way: mounting
+		     them on arrival re-flowed the row and nudged the heading. -->
+		<div
+			class="flex w-full gap-1 rounded-lg border border-border bg-card p-1 sm:w-auto"
+			class:invisible={!result}
+			role="group"
+			aria-label={m.seasonal_range_aria()}
+			aria-hidden={!result}
+		>
+			{#each RANGES as range, i (range.label)}
+				{@const disabled = !result || (range.days !== Infinity && range.days > horizonDays)}
+				<button
+					type="button"
+					class="flex-1 cursor-pointer rounded-md px-3 py-1.5 text-xs font-semibold whitespace-nowrap transition-colors sm:flex-none {rangeIndex ===
+					i
+						? 'bg-primary text-primary-foreground'
+						: 'text-muted-foreground hover:bg-muted hover:text-foreground'} {disabled
+						? 'cursor-not-allowed opacity-40'
+						: ''}"
+					aria-pressed={rangeIndex === i}
+					{disabled}
+					tabindex={result ? undefined : -1}
+					onclick={() => (rangeIndex = i)}
+				>
+					{range.label}
+				</button>
+			{/each}
+		</div>
 		<ModelSelector
 			selectedModel={seasonalModel}
 			groups={seasonalModelGroups}
@@ -49,7 +49,7 @@
 	let { data }: { data: PageData } = $props();

 	// the page cross-fade waits for this before revealing the new page
-	reportPageReady(() => fetchedDaily != null && fetchedHourly != null);
+	reportPageReady(() => (fetchedDaily != null && fetchedHourly != null) || loadError != null);

 	useHeroActions(heroActions);

@@ -211,8 +211,13 @@

 	// Charts intentionally keep their current range: they show the full week
 	// unless the user narrows it via the range presets or Ctrl+scroll.
+	// A model that answers with a broken timestamp must not be able to park an
+	// unreadable date in `selectedDay`: everything downstream formats it, and a
+	// date that cannot be formatted takes the page with it.
 	const switchDay = (date: Date) => {
-		runDayTransition(() => selectedDay.setTime(date.getTime()));
+		const time = date?.getTime();
+		if (!Number.isFinite(time)) return;
+		runDayTransition(() => selectedDay.setTime(time));
 	};

 	onMount(() => {