feat(list): list style skeleton loading

4 files changed, 23 insertions, 1 deletions

diff --git a/src/lib/List/Anime/AnimeListTemplate.svelte b/src/lib/List/Anime/AnimeListTemplate.svelte
index f2630853..4cfd03fd 100644
--- a/src/lib/List/Anime/AnimeListTemplate.svelte
+++ b/src/lib/List/Anime/AnimeListTemplate.svelte
@@ -9,6 +9,7 @@
 	import ListTitle from '../ListTitle.svelte';
 	import type { SubsPlease } from '$lib/Media/Anime/Airing/Subtitled/subsPlease';
 	import root from '$lib/Utility/root';
+	import Skeleton from '$lib/Skeleton.svelte';
 
 	export let endTime: number;
 	export let cleanMedia: (
@@ -32,7 +33,9 @@
 {#await fetch(root(`/api/subsplease?tz=${Intl.DateTimeFormat().resolvedOptions().timeZone}`)).then( (r) => r.json() )}
 	<ListTitle custom={title} />
 
-	<ul><li>Subtitle release data ... 33%</li></ul>
+	<ul><li>Loading subtitle release data ... 33%</li></ul>
+
+	<Skeleton card={false} count={5} height="0.9rem" list />
 {:then subsPlease}
 	{#await animeLists}
 		{#if previousAnimeList}
@@ -52,6 +55,8 @@
 			<ListTitle custom={title} />
 
 			<ul><li>Loading anime lists ... 66%</li></ul>
+
+			<Skeleton card={false} count={5} height="0.9rem" list />
 		{/if}
 	{:then media}
 		<CleanAnimeList
diff --git a/src/lib/List/Manga/MangaListTemplate.svelte b/src/lib/List/Manga/MangaListTemplate.svelte
index b7dd1f6f..1fa85a5c 100644
--- a/src/lib/List/Manga/MangaListTemplate.svelte
+++ b/src/lib/List/Manga/MangaListTemplate.svelte
@@ -15,6 +15,7 @@
 	import { incrementMediaProgress } from '$lib/Media/Anime/cache';
 	import { getNotificationsContext } from 'svelte-notifications';
 	import { options } from '$lib/Notification/options';
+	import Skeleton from '$lib/Skeleton.svelte';
 
 	export let user: AniListAuthorisation;
 	export let identity: UserIdentity;
@@ -230,6 +231,8 @@
 		{/if}
 
 		<ul><li>Loading {progress.toFixed(0)}% ...</li></ul>
+
+		<Skeleton card={false} count={5} height="0.9rem" list />
 	{/if}
 {:then media}
 	{#await cleanMedia(media, displayUnresolved, forceFlag)}
@@ -265,6 +268,8 @@
 			{/if}
 
 			<ul><li>Loading {progress.toFixed(0)}% ...</li></ul>
+
+			<Skeleton card={false} count={5} height="0.9rem" list />
 		{/if}
 	{:then cleanedMedia}
 		{#if !authorised}
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}