feat(list): list style skeleton loading

2 files changed, 11 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}