refactor(anime): use placeholder list on load

4 files changed, 29 insertions, 28 deletions

diff --git a/src/lib/List/Anime/AnimeListTemplate.svelte b/src/lib/List/Anime/AnimeListTemplate.svelte
index 9e95267b..c0314727 100644
--- a/src/lib/List/Anime/AnimeListTemplate.svelte
+++ b/src/lib/List/Anime/AnimeListTemplate.svelte
@@ -9,7 +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';
+	import PlaceholderList from './PlaceholderList.svelte';
 
 	export let endTime: number;
 	export let cleanMedia: (
@@ -33,17 +33,7 @@
 </script>
 
 {#await fetch(root(`/api/subsplease?tz=${Intl.DateTimeFormat().resolvedOptions().timeZone}`)).then( (r) => r.json() )}
-	<ListTitle {title} />
-
-	<Skeleton
-		card={false}
-		count={8}
-		pad={$settings.displayCoverMode}
-		height={$settings.displayCoverMode ? '8rem' : '0.9rem'}
-		width={$settings.displayCoverMode ? `${$settings.displayCoverWidth / 1.05}px` : '100%'}
-		list={!$settings.displayCoverMode}
-		grid={$settings.displayCoverMode}
-	/>
+	<PlaceholderList {title} />
 {:then subsPlease}
 	{#await animeLists}
 		{#if previousAnimeList}
@@ -62,17 +52,7 @@
 				bind:pendingUpdate
 			/>
 		{:else}
-			<ListTitle {title} />
-
-			<Skeleton
-				card={false}
-				count={8}
-				pad={$settings.displayCoverMode}
-				height={$settings.displayCoverMode ? '8rem' : '0.9rem'}
-				width={$settings.displayCoverMode ? `${$settings.displayCoverWidth / 1.05}px` : '100%'}
-				list={!$settings.displayCoverMode}
-				grid={$settings.displayCoverMode}
-			/>
+			<PlaceholderList {title} />
 		{/if}
 	{:then media}
 		<CleanAnimeList
diff --git a/src/lib/List/Anime/PlaceholderList.svelte b/src/lib/List/Anime/PlaceholderList.svelte
new file mode 100644
index 00000000..3567ce62
--- /dev/null
+++ b/src/lib/List/Anime/PlaceholderList.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+	import Skeleton from '$lib/Skeleton.svelte';
+	import settings from '$stores/settings';
+	import ListTitle from '../ListTitle.svelte';
+	import type { Title } from '../mediaTitle';
+
+	export let title: Title;
+</script>
+
+<ListTitle {title} />
+
+<Skeleton
+	card={false}
+	count={8}
+	pad={$settings.displayCoverMode}
+	height={$settings.displayCoverMode ? '8rem' : '0.9rem'}
+	width={$settings.displayCoverMode ? `${$settings.displayCoverWidth / 1.05}px` : '100%'}
+	list={!$settings.displayCoverMode}
+	grid={$settings.displayCoverMode}
+/>
diff --git a/src/lib/List/ListTitle.svelte b/src/lib/List/ListTitle.svelte
index 63551608..59f52ea7 100644
--- a/src/lib/List/ListTitle.svelte
+++ b/src/lib/List/ListTitle.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import tooltip from '$lib/Tooltip/tooltip';
+	import type { Title } from './mediaTitle';
 
 	export let time: number | undefined = undefined;
 	export let count = -1337;
@@ -9,11 +10,6 @@
 	};
 	export let progress: undefined | number = undefined;
 	export let hideTime = false;
-
-	interface Title {
-		title: string;
-		hint: string;
-	}
 </script>
 
 <summary>
diff --git a/src/lib/List/mediaTitle.ts b/src/lib/List/mediaTitle.ts
index 87e1aa56..2d14ca4c 100644
--- a/src/lib/List/mediaTitle.ts
+++ b/src/lib/List/mediaTitle.ts
@@ -2,6 +2,11 @@ import type { Media } from '$lib/AniList/media';
 import settings from '$stores/settings';
 import { get } from 'svelte/store';
 
+export interface Title {
+	title: string;
+	hint: string;
+}
+
 export const mediaTitle = (media: Media) => {
 	if (!media) return 'Loading ...';