style: Improved library page loading animations

src/app.css

@@ -14,6 +14,10 @@ a {
 	@apply bg-zinc-700 bg-opacity-75;
 }
 
+.placeholder-text {
+	@apply bg-zinc-700 bg-opacity-40 animate-pulse text-transparent rounded-lg select-none;
+}
+
 .selectable {
 	@apply focus-visible:outline outline-2 outline-[#f0cd6dc2] outline-offset-2;
 }

src/lib/components/Poster/Poster.svelte

@@ -18,7 +18,7 @@
 	export let rating: number | undefined = undefined;
 	export let progress = 0;
 
-	export let size: 'dynamic' | 'md' | 'lg' = 'md';
+	export let size: 'dynamic' | 'md' | 'lg' | 'sm' = 'md';
 	export let orientation: 'portrait' | 'landscape' = 'landscape';
 </script>
 
@@ -29,6 +29,8 @@
 		{
 			'aspect-video': orientation === 'landscape',
 			'aspect-[2/3]': orientation === 'portrait',
+			'w-32': size === 'sm' && orientation === 'portrait',
+			'h-32': size === 'sm' && orientation === 'landscape',
 			'w-44': size === 'md' && orientation === 'portrait',
 			'h-44': size === 'md' && orientation === 'landscape',
 			'w-60': size === 'lg' && orientation === 'portrait',

src/routes/library/+page.svelte

@@ -17,6 +17,7 @@
 	import { fade } from 'svelte/transition';
 	import LibraryItems from './LibraryItems.svelte';
 	import { capitalize } from '$lib/utils';
+	import LazyImg from '$lib/components/LazyImg.svelte';
 
 	let openNextUpTab: 'downloading' | 'nextUp' = 'downloading';
 	let noItems = false;
@@ -84,16 +85,29 @@
 		}}
 		out:fade|global={{ duration: $settings.animationDuration }}
 	>
-		{#await showcasePromise then showcase}
-			<div
-				style={"background-image: url('" +
-					((showcase && getJellyfinBackdrop(showcase)) || PLACEHOLDER_BACKDROP) +
-					"');"}
-				class="bg-center bg-cover col-start-1 row-start-1 col-span-2 row-span-3 relative pt-24"
-			>
-				<div class="absolute inset-0 bg-gradient-to-t from-stone-950 to-80% to-darken" />
-				<div class="max-w-screen-2xl mx-auto relative z-[1] px-2 md:px-8 pt-56 pb-12">
-					<div class="flex gap-4 items-end">
+		<div class="relative pt-24">
+			{#await showcasePromise then showcase}
+				<LazyImg
+					src={(showcase && getJellyfinBackdrop(showcase)) || PLACEHOLDER_BACKDROP}
+					class="absolute inset-0"
+				/>
+			{/await}
+			<div class="absolute inset-0 bg-gradient-to-t from-stone-950 to-80% to-darken" />
+			<div class="max-w-screen-2xl mx-auto relative z-[1] px-2 md:px-8 pt-56 pb-12">
+				<div class="flex gap-4 items-end">
+					{#await showcasePromise}
+						<div class="w-32 aspect-[2/3] placeholder rounded-lg shadow-lg" />
+						<div class="flex flex-col gap-2">
+							<div class="placeholder-text w-20">Placeholder</div>
+							<div class="placeholder-text w-[50vw] text-3xl sm:text-4xl md:text-5xl">
+								Placeholder
+							</div>
+							<div class="flex gap-2 mt-2">
+								<div class="placeholder-text w-28 h-10" />
+								<div class="placeholder-text w-28 h-10" />
+							</div>
+						</div>
+					{:then showcase}
 						<div
 							style={"background-image: url('" +
 								(showcase ? getJellyfinPosterUrl(showcase) : '') +
@@ -121,10 +135,10 @@
 								</Button>
 							</div>
 						</div>
-					</div>
+					{/await}
 				</div>
 			</div>
-		{/await}
+		</div>
 	</div>
 
 	<div