From 26de12b070a55ac60c897e1d0b385a8aa621362c Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Wed, 24 Jan 2024 21:29:56 -0800
Subject: feat(user): skeleton loading

---
 src/lib/Skeleton.svelte             | 3 ++-
 src/routes/user/[user]/+page.svelte | 5 ++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/lib/Skeleton.svelte b/src/lib/Skeleton.svelte
index 32182657..839d7985 100644
--- a/src/lib/Skeleton.svelte
+++ b/src/lib/Skeleton.svelte
@@ -2,10 +2,11 @@
 	export let count = 3;
 	export let width = '100%';
 	export let height = '100px';
+	export let card = true;
 </script>
 
 {#each Array(count) as _, i}
-	<div class="card card-small" style={`width: ${width};`}>
+	<div class={card ? 'card card-small' : ''} style={`width: ${width};`}>
 		<div class="skeleton-container">
 			<div class="skeleton" style={`width: ${width}; height: ${height};`} />
 		</div>
diff --git a/src/routes/user/[user]/+page.svelte b/src/routes/user/[user]/+page.svelte
index 4637234a..d6248a3b 100644
--- a/src/routes/user/[user]/+page.svelte
+++ b/src/routes/user/[user]/+page.svelte
@@ -2,6 +2,7 @@
 	import { user, type User } from '$lib/AniList/user';
 	import HeadTitle from '$lib/Home/HeadTitle.svelte';
 	import { estimatedDayReading } from '$lib/Media/Manga/time';
+	import Skeleton from '$lib/Skeleton.svelte';
 	import root from '$lib/Utility/root.js';
 	import { onMount } from 'svelte';
 
@@ -31,7 +32,9 @@
 
 		Does this user exist?
 	{:else if userData === undefined}
-		Loading user ... 50%
+		<p>Loading user ... 50%</p>
+
+		<Skeleton card={false} count={1} />
 	{:else}
 		<div
 			class="card"
-- 
cgit v1.2.3