feat(list): use last size as skeleton size

3 files changed, 30 insertions, 4 deletions

diff --git a/src/lib/List/Anime/AnimeListTemplate.svelte b/src/lib/List/Anime/AnimeListTemplate.svelte
index c0314727..8b52e324 100644
--- a/src/lib/List/Anime/AnimeListTemplate.svelte
+++ b/src/lib/List/Anime/AnimeListTemplate.svelte
@@ -10,6 +10,8 @@
 	import type { SubsPlease } from '$lib/Media/Anime/Airing/Subtitled/subsPlease';
 	import root from '$lib/Utility/root';
 	import PlaceholderList from './PlaceholderList.svelte';
+	import { browser } from '$app/environment';
+	import { onMount } from 'svelte';
 
 	export let endTime: number;
 	export let cleanMedia: (
@@ -30,10 +32,22 @@
 	let lastUpdatedMedia = -1;
 	let previousAnimeList: Media[];
 	let pendingUpdate: number | null = null;
+	let lastListSize = 8;
+
+	onMount(() => {
+		if (browser) {
+			const lastStoredList = localStorage.getItem(
+				`last${
+					notYetReleased ? 'NotYetReleased' : upcoming ? 'Upcoming' : completed ? 'Completed' : ''
+				}AnimeListLength`
+			);
+			if (lastStoredList) lastListSize = parseInt(lastStoredList);
+		}
+	});
 </script>
 
 {#await fetch(root(`/api/subsplease?tz=${Intl.DateTimeFormat().resolvedOptions().timeZone}`)).then( (r) => r.json() )}
-	<PlaceholderList {title} />
+	<PlaceholderList count={lastListSize} {title} />
 {:then subsPlease}
 	{#await animeLists}
 		{#if previousAnimeList}
@@ -52,7 +66,7 @@
 				bind:pendingUpdate
 			/>
 		{:else}
-			<PlaceholderList {title} />
+			<PlaceholderList count={lastListSize} {title} />
 		{/if}
 	{:then media}
 		<CleanAnimeList
diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index de33178a..9808b54e 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -9,7 +9,7 @@
 	import ListTitle from '../ListTitle.svelte';
 	import MediaTitle from '../MediaTitleDisplay.svelte';
 	import { outboundLink } from '$lib/Media/links';
-	import { onDestroy } from 'svelte';
+	import { onDestroy, onMount } from 'svelte';
 	import type { SubsPlease } from '$lib/Media/Anime/Airing/Subtitled/subsPlease';
 	import HoverCover from '$lib/Media/Cover/HoverCover.svelte';
 	import {
@@ -21,6 +21,7 @@
 	import { mediaTitle } from '../mediaTitle';
 	import tooltip from '$lib/Tooltip/tooltip';
 	import AiringTime from '$lib/Media/Anime/Airing/AiringTime.svelte';
+	import { browser } from '$app/environment';
 
 	export let media: Media[];
 	export let title: any;
@@ -53,6 +54,16 @@
 		})()
 	);
 
+	onMount(() => {
+		if (browser)
+			localStorage.setItem(
+				`last${
+					notYetReleased ? 'NotYetReleased' : upcoming ? 'Upcoming' : completed ? 'Completed' : ''
+				}AnimeListLength`,
+				media.length.toString()
+			);
+	});
+
 	onDestroy(() => clearInterval(keyCacher));
 </script>
 
diff --git a/src/lib/List/Anime/PlaceholderList.svelte b/src/lib/List/Anime/PlaceholderList.svelte
index 3567ce62..7d25ed7c 100644
--- a/src/lib/List/Anime/PlaceholderList.svelte
+++ b/src/lib/List/Anime/PlaceholderList.svelte
@@ -5,13 +5,14 @@
 	import type { Title } from '../mediaTitle';
 
 	export let title: Title;
+	export let count = 8;
 </script>
 
 <ListTitle {title} />
 
 <Skeleton
 	card={false}
-	count={8}
+	{count}
 	pad={$settings.displayCoverMode}
 	height={$settings.displayCoverMode ? '8rem' : '0.9rem'}
 	width={$settings.displayCoverMode ? `${$settings.displayCoverWidth / 1.05}px` : '100%'}