refactor

src/routes/weather/week/[location]/+page.svelte

@@ -12,23 +12,28 @@
 	import MeteogramCharts from './MeteogramCharts.svelte';
 	import ModelSelector from './ModelSelector.svelte';
 
-	import type { GeoLocation } from '$lib/stores/settings';
+	import type { PageData } from './$types';
 	import type { FetchedDaily, FetchedHourly } from './types';
 
+	let { data }: { data: PageData } = $props();
+
 	let params = $state({
-		latitude: [$storedLocation.latitude],
-		longitude: [$storedLocation.longitude],
 		models: ['best_match'],
 		...defaultParameters
 	});
 
-	let location = $state<GeoLocation>($storedLocation);
-	storedLocation.subscribe((value) => {
-		location = value;
+	// the URL is the source of truth: location comes from the load function,
+	// which is also correct on hydrated prerendered pages. The persisted store
+	// only mirrors it so the header and bare /weather/* redirects follow along.
+	let location = $derived(data.location);
+	$effect(() => {
+		storedLocation.set(data.location);
 	});
 
 	let mounted = $state(false);
 	let loading = $state(true);
+	let loadError = $state<string | null>(null);
+	let requestVersion = 0;
 
 	const selectedDay = new SvelteDate();
 
@@ -52,40 +57,47 @@
 
 		if (!mounted || !loc || !modelList?.length) return;
 
-		const loadData = async () => {
-			loading = true;
+		// versioned so a slow stale response can never overwrite a newer one
+		const version = ++requestVersion;
+		loading = true;
+		loadError = null;
 
-			const result: WeekForecastResult = await fetchWeekForecast({
-				latitude: loc.latitude!,
-				longitude: loc.longitude!,
-				model: modelList[0],
-				temperature_unit: params.temperature_unit as 'celsius' | 'fahrenheit',
-				wind_speed_unit: params.wind_speed_unit as 'kmh' | 'ms' | 'mph' | 'kn',
-				precipitation_unit: params.precipitation_unit as 'mm' | 'inch',
-				forecast_days: 7,
-				past_days: 0,
-				timezone: loc.timezone
+		fetchWeekForecast({
+			latitude: loc.latitude!,
+			longitude: loc.longitude!,
+			model: modelList[0],
+			temperature_unit: params.temperature_unit as 'celsius' | 'fahrenheit',
+			wind_speed_unit: params.wind_speed_unit as 'kmh' | 'ms' | 'mph' | 'kn',
+			precipitation_unit: params.precipitation_unit as 'mm' | 'inch',
+			forecast_days: 7,
+			past_days: 0,
+			timezone: loc.timezone
+		})
+			.then((result: WeekForecastResult) => {
+				if (version !== requestVersion) return;
+
+				fetchedHourly = {
+					hourly: result.hourly,
+					utc_offset_seconds: result.utcOffsetSeconds,
+					timezone: result.timezone,
+					timestamps: result.hourlyTimestamps,
+					hourlyDates: result.hourlyDates,
+					markAreas: result.markAreas
+				};
+
+				fetchedDaily = {
+					daily: result.daily,
+					timezone: result.timezone,
+					dailyDates: result.dailyDates
+				};
+
+				loading = false;
+			})
+			.catch((err: unknown) => {
+				if (version !== requestVersion) return;
+				loadError = err instanceof Error ? err.message : String(err);
+				loading = false;
 			});
-
-			fetchedHourly = {
-				hourly: result.hourly,
-				utc_offset_seconds: result.utcOffsetSeconds,
-				timezone: result.timezone,
-				timestamps: result.hourlyTimestamps,
-				hourlyDates: result.hourlyDates,
-				markAreas: result.markAreas
-			};
-
-			fetchedDaily = {
-				daily: result.daily,
-				timezone: result.timezone,
-				dailyDates: result.dailyDates
-			};
-
-			loading = false;
-		};
-
-		loadData();
 	});
 </script>
 
@@ -97,6 +109,14 @@
 
 <div class="week-page">
 	<div class="weather-content" style="min-height: 50vh">
+		{#if loadError}
+			<div
+				class="mb-4 rounded-md border border-destructive/50 bg-destructive/10 px-4 py-3 text-sm text-destructive"
+			>
+				Failed to load weather data: {loadError}
+			</div>
+		{/if}
+
 		<DailyCards daily={fetchedDaily} {selectedDay} units={params} onSelectDay={switchDay} />
 
 		{#if fetchedHourly && fetchedDaily}

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

@@ -1,12 +1,11 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
 
-	import * as echarts from 'echarts';
-
 	import { formatZoned, getRelativeDayLabel } from '$lib/utils/date';
 	import { buildCurrentTimeSeries, buildDaylightSeries, getThemeColors } from '$lib/utils/echarts';
 
 	import { ChartContainer, ChartToolbar, EChart } from '$lib/components/charts';
+	import { echarts } from '$lib/components/charts/echarts';
 	import '$lib/components/charts/echarts.css';
 
 	import { getColor } from '../../utils/colors';
@@ -19,6 +18,8 @@
 		getWindUnit
 	} from './types';
 
+	import type { ECharts } from 'echarts';
+
 	interface Props {
 		data: FetchedHourly;
 		selectedDay: Date;
@@ -34,7 +35,7 @@
 
 	let showCharts = $state(false);
 	let chartComponents: EChart[] = $state([]);
-	let chartInstances: echarts.ECharts[] = $state([]);
+	let chartInstances: ECharts[] = $state([]);
 	let chartOptions: Array<Record<string, unknown>> = $state([]);
 
 	export function scrollToDay(day: Date): void {
@@ -76,7 +77,7 @@
 		onResetZoom?.();
 	}
 
-	function handleChartReady(chart: echarts.ECharts): void {
+	function handleChartReady(chart: ECharts): void {
 		chart.group = CHART_GROUP;
 		chartInstances = [...chartInstances, chart];
 		if (chartInstances.length === 3) {
@@ -85,14 +86,6 @@
 		}
 	}
 
-	$effect(() => {
-		// Reset chart instances when data changes
-		if (data) {
-			chartInstances = [];
-			chartComponents = [];
-		}
-	});
-
 	$effect(() => {
 		if (!data) return;
 
@@ -530,6 +523,7 @@
 			{#each chartOptions as option, i (i)}
 				<EChart
 					{option}
+					notMerge
 					height={i === 2 ? '320px' : '300px'}
 					onChartReady={handleChartReady}
 					bind:this={chartComponents[i]}

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

@@ -1,57 +0,0 @@
-<script lang="ts">
-	import { formatZoned } from '$lib/utils/date';
-
-	import type { FetchedDaily } from './types';
-
-	interface Props {
-		daily: FetchedDaily | null;
-		dayIndex: number;
-	}
-
-	let { daily, dayIndex }: Props = $props();
-
-	let sunrise = $derived.by(() => {
-		if (!daily) return null;
-		const ts = daily.daily.sunrise[dayIndex];
-		return ts ? new Date(ts * 1000) : null;
-	});
-
-	let sunset = $derived.by(() => {
-		if (!daily) return null;
-		const ts = daily.daily.sunset[dayIndex];
-		return ts ? new Date(ts * 1000) : null;
-	});
-</script>
-
-{#if daily && sunrise && sunset}
-	<div class="sun-info">
-		<div class="sun-item">
-			<svg class="fill-foreground" width="24px" height="24px">
-				<use class="stroke-2" xlink:href="/images/weather-icons/wi-sunrise.svg#Layer_1"></use>
-			</svg>
-			<span>{formatZoned(sunrise, daily.timezone, 'HH:mm')}</span>
-		</div>
-		<div class="sun-item">
-			<svg class="fill-foreground" width="24px" height="24px">
-				<use class="stroke-2" xlink:href="/images/weather-icons/wi-sunset.svg#Layer_1"></use>
-			</svg>
-			<span>{formatZoned(sunset, daily.timezone, 'HH:mm')}</span>
-		</div>
-	</div>
-{/if}
-
-<style>
-	.sun-info {
-		display: flex;
-		gap: 1.5rem;
-		margin-top: 1rem;
-		flex-wrap: wrap;
-	}
-
-	.sun-item {
-		display: flex;
-		align-items: center;
-		gap: 4px;
-		font-size: 14px;
-	}
-</style>