feat: loading state for caches

resolves #4

Signed-off-by: Matt Gleich <git@mattglei.ch>

Author: gleich

src/lib/index/section.svelte

@@ -77,7 +77,7 @@
 	}
 
 	.section-name {
-		background-color: #343537;
+		background-color: var(--section-name-background-color);
 		border: 1px solid var(--border);
 		border-top: 0;
 		border-left: 0;
@@ -172,12 +172,6 @@
 		display: none;
 	}
 
-	@media (prefers-color-scheme: light) {
-		.section-name {
-			background-color: #eaeaea;
-		}
-	}
-
 	@media (max-width: 450px) {
 		.children {
 			padding: 5px;

src/routes/writing/lcp/+page.svelte

@@ -19,7 +19,7 @@
 	<WritingSection title="Cache Status Overview">
 		<div class="statuses">
 			{#await data.projects}
-				<p>Loading projects cache...</p>
+				<CacheStatus name="Projects" loading />
 			{:then projects}
 				<CacheStatus
 					name="Projects"
@@ -28,7 +28,7 @@
 				/>
 			{/await}
 			{#await data.workouts}
-				<p>Loading workouts cache...</p>
+				<CacheStatus name="Workouts" loading />
 			{:then workouts}
 				<CacheStatus
 					name="Workouts"
@@ -37,7 +37,7 @@
 				/>
 			{/await}
 			{#await data.music}
-				<p>Loading music cache...</p>
+				<CacheStatus name="Music" loading />
 			{:then music}
 				<CacheStatus
 					name="Music"
@@ -46,7 +46,7 @@
 				/>
 			{/await}
 			{#await data.games}
-				<p>Loading games cache...</p>
+				<CacheStatus name="Games" loading />
 			{:then games}
 				<CacheStatus
 					name="Games"

src/routes/writing/lcp/cache-status.svelte

@@ -5,15 +5,18 @@
 
 	const {
 		name,
+		loading = false,
 		updated,
 		updateFrequency
-	}: { name: string; updated?: Date; updateFrequency: string } = $props();
+	}: { name: string; loading?: boolean; updated?: Date; updateFrequency?: string } = $props();
 </script>
 
 <Card padding="0">
 	<div class="header">
 		<p class="cache-name">{name} Cache</p>
-		{#if updated}
+		{#if loading}
+			<p class="loading">LOADING</p>
+		{:else if updated}
 			<p class="online">ONLINE</p>
 		{:else}
 			<p class="offline">OFFLINE</p>
@@ -26,7 +29,9 @@
 		<p>{updateFrequency}</p>
 	</div>
 	<div class="updated">
-		{#if updated}
+		{#if loading}
+			Loading...
+		{:else if updated}
 			Updated <Since time={updated} />
 		{:else}
 			Cache is currently offline
@@ -41,7 +46,7 @@
 		padding-top: 6px;
 		font-family: 'Inter';
 		font-weight: 700;
-		background-color: #343537;
+		background-color: var(--section-name-background-color);
 		box-shadow: inset 0px 0px 6px var(--box-shadow-color);
 		border: 1px solid var(--border);
 		border-top: 0;
@@ -57,7 +62,8 @@
 	}
 
 	.online,
-	.offline {
+	.offline,
+	.loading {
 		font-family: 'IBM Plex Mono';
 		display: flex;
 		align-items: center;
@@ -69,6 +75,12 @@
 		border-bottom-left-radius: var(--border-radius);
 	}
 
+	.loading {
+		color: var(--yellow-foreground);
+		background-color: var(--yellow-background);
+		border: 1px solid var(--yellow-border);
+	}
+
 	.online {
 		color: var(--green-foreground);
 		background-color: var(--green-background);