feat: say what each section is loading

Author: gleich

src/lib/index/section.svelte

@@ -227,7 +227,6 @@
 		70% {
 			opacity: 100%;
 		}
-		80%,
 		100% {
 			opacity: 30%;
 		}
@@ -238,7 +237,6 @@
 		70% {
 			opacity: 100%;
 		}
-		80%,
 		100% {
 			opacity: 30%;
 		}

src/lib/index/sections/games/games-section.svelte

@@ -3,7 +3,7 @@
 	import Section from '$lib/index/section.svelte';
 	import type { LcpResponse } from '$lib/lcp/lcp.server';
 	import type { Game } from '$lib/lcp/steam';
-	import Loading from '$lib/loading.svelte';
+	import SectionLoading from '$lib/section-loading.svelte';
 	import Stats from '$lib/stats.svelte';
 	import { renderDuration } from '$lib/time';
 	import { Card, Error, Image } from '@gleich/ui';
@@ -35,7 +35,7 @@
 	}}
 >
 	{#if loading}
-		<Loading height={483.63} />
+		<SectionLoading name="games" height={483.63} />
 	{:else if games}
 		<p>
 			To relax I like to occasionally play games with some of my friends. My favorite game of all

src/lib/index/sections/music/music-section.svelte

@@ -3,7 +3,7 @@
 	import Section from '$lib/index/section.svelte';
 	import type { AppleMusicPlaylistSummary, AppleMusicSong, CacheData } from '$lib/lcp/applemusic';
 	import type { LcpResponse } from '$lib/lcp/lcp.server';
-	import Loading from '$lib/loading.svelte';
+	import SectionLoading from '$lib/section-loading.svelte';
 	import { Error } from '@gleich/ui';
 	import Playlist from './playlist.svelte';
 	import Song from './song.svelte';
@@ -56,7 +56,7 @@
 	}}
 >
 	{#if loading}
-		<Loading height={744} />
+		<SectionLoading name="music" height={744} />
 	{:else if response && recently_played && playlists}
 		<p>
 			I love a lot of different types of music ranging from electronic to jazz. A few of my favorite

src/lib/index/sections/projects/project-section.svelte

@@ -3,7 +3,7 @@
 	import Section from '$lib/index/section.svelte';
 	import type { Repository } from '$lib/lcp/github';
 	import type { LcpResponse } from '$lib/lcp/lcp.server';
-	import Loading from '$lib/loading.svelte';
+	import SectionLoading from '$lib/section-loading.svelte';
 	import Since from '$lib/time/since.svelte';
 	import ViewButton from '$lib/view-button.svelte';
 	import { Card, Error } from '@gleich/ui';
@@ -59,7 +59,7 @@
 	}}
 >
 	{#if loading}
-		<Loading height={446.5} />
+		<SectionLoading name="projects" height={446.5} />
 	{:else if projects}
 		<p class="intro">
 			I love to build and explore everything from <a

src/lib/index/sections/workouts/workouts-section.svelte

@@ -3,7 +3,7 @@
 	import StravaIcon from '$lib/icons/strava-icon.svelte';
 	import type { LcpResponse } from '$lib/lcp/lcp.server';
 	import { type Workout as LcpWorkout } from '$lib/lcp/workouts';
-	import Loading from '$lib/loading.svelte';
+	import SectionLoading from '$lib/section-loading.svelte';
 	import ViewButton from '$lib/view-button.svelte';
 	import { Error } from '@gleich/ui';
 	import Section from '../../section.svelte';
@@ -57,7 +57,7 @@
 	}}
 >
 	{#if loading}
-		<Loading height={529.91} />
+		<SectionLoading name="workouts" height={529.91} />
 	{:else if workouts}
 		<p>
 			One of my favorite things is staying active and enjoying the outdoors. I grew up in New

src/lib/loading.svelte src/lib/section-loading.sveltesrc/lib/loading.svelte renamed to src/lib/section-loading.svelte

@@ -1,25 +1,33 @@
 <script lang="ts">
 	import { Logo } from '@gleich/ui';
 
-	const { height }: { height: number } = $props();
+	const { height, name }: { height: string; name: string } = $props();
 </script>
 
 <div class="container" style:--expected-height={`${height}px`}>
 	<div class="logo">
 		<Logo />
 	</div>
+	<p class="loading">loading {name}</p>
 </div>
 
 <style>
 	.container {
 		display: flex;
 		align-items: center;
 		justify-content: center;
+		flex-direction: column;
 		height: calc(var(--expected-height) - 20px);
 	}
 
 	.logo {
 		width: 100px;
 		height: auto;
 	}
+
+	.loading {
+		color: grey;
+		font-family: 'IBM Plex Mono';
+		font-size: 14.5px;
+	}
 </style>