From 28c5430dc6700a201f198b2a8be882b5e9d9b926 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Wed, 24 Jan 2024 23:58:17 -0800
Subject: feat(list): list style skeleton loading

---
 src/routes/+page.svelte           | 7 +++++++
 src/routes/completed/+page.svelte | 5 +++++
 2 files changed, 12 insertions(+)

(limited to 'src/routes')

diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index d3f7d5f9..bebeeb70 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -9,6 +9,7 @@
 	import HeadTitle from '$lib/Home/HeadTitle.svelte';
 	import LastActivity from '$lib/Home/LastActivity.svelte';
 	import { createHeightObserver } from '$lib/Utility/html.js';
+	import Skeleton from '$lib/Skeleton.svelte';
 
 	export let data;
 
@@ -39,6 +40,8 @@
 					<ListTitle custom="Upcoming Episodes" />
 
 					<ul><li>Loading user identity ... 50%</li></ul>
+
+					<Skeleton card={false} count={5} height="0.9rem" list />
 				{/if}
 			</details>
 
@@ -55,6 +58,8 @@
 					<ListTitle anime />
 
 					<ul><li>Loading user identity ... 50%</li></ul>
+
+					<Skeleton card={false} count={5} height="0.9rem" list />
 				{/if}
 			</details>
 
@@ -76,6 +81,8 @@
 					<ListTitle />
 
 					<ul><li>Loading 0% ...</li></ul>
+
+					<Skeleton card={false} count={5} height="0.9rem" list />
 				{/if}
 			</details>
 		{/if}
diff --git a/src/routes/completed/+page.svelte b/src/routes/completed/+page.svelte
index d1e0172f..43648e01 100644
--- a/src/routes/completed/+page.svelte
+++ b/src/routes/completed/+page.svelte
@@ -8,6 +8,7 @@
 	import HeadTitle from '$lib/Home/HeadTitle.svelte';
 	import LastActivity from '$lib/Home/LastActivity.svelte';
 	import { createHeightObserver } from '$lib/Utility/html.js';
+	import Skeleton from '$lib/Skeleton.svelte';
 
 	export let data;
 
@@ -29,6 +30,8 @@
 				<ListTitle custom="Anime" />
 
 				<ul><li>Loading user identity ... 50%</li></ul>
+
+				<Skeleton card={false} count={5} height="0.9rem" list />
 			{/if}
 		</details>
 
@@ -44,6 +47,8 @@
 				<ListTitle custom="Manga & Light Novels" />
 
 				<ul><li>Loading user identity ... 50%</li></ul>
+
+				<Skeleton card={false} count={5} height="0.9rem" list />
 			{/if}
 		</details>
 	{/if}
-- 
cgit v1.2.3