feat(list): use last size as skeleton size

5 files changed, 47 insertions, 7 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%'}
diff --git a/src/lib/List/Manga/CleanMangaList.svelte b/src/lib/List/Manga/CleanMangaList.svelte
index 2c98a040..56a0498a 100644
--- a/src/lib/List/Manga/CleanMangaList.svelte
+++ b/src/lib/List/Manga/CleanMangaList.svelte
@@ -18,6 +18,7 @@
 	import root from '$lib/Utility/root';
 	import locale from '$stores/locale';
 	import Skeleton from '$lib/Skeleton.svelte';
+	import { browser } from '$app/environment';
 
 	export let media: Media[];
 	export let cleanCache: () => void;
@@ -36,7 +37,12 @@
 	let hoverCoverState: HoverCoverResponse = {};
 	let serviceStatusResponse: Promise<Response>;
 
-	onMount(() => (serviceStatusResponse = fetch(proxy('https://mangadex.org'))));
+	onMount(() => {
+		serviceStatusResponse = fetch(proxy('https://mangadex.org'));
+
+		if (browser)
+			localStorage.setItem(`last${due ? '' : 'Completed'}MangaListLength`, media.length.toString());
+	});
 </script>
 
 {#if authorised}
diff --git a/src/lib/List/Manga/MangaListTemplate.svelte b/src/lib/List/Manga/MangaListTemplate.svelte
index e91c809d..f9cd6124 100644
--- a/src/lib/List/Manga/MangaListTemplate.svelte
+++ b/src/lib/List/Manga/MangaListTemplate.svelte
@@ -17,6 +17,7 @@
 	import { options } from '$lib/Notification/options';
 	import Skeleton from '$lib/Skeleton.svelte';
 	import locale from '$stores/locale';
+	import { browser } from '$app/environment';
 
 	export let user: AniListAuthorisation;
 	export let identity: UserIdentity;
@@ -34,6 +35,7 @@
 	let progress = 0;
 	let rateLimited = false;
 	let forceFlag = false;
+	let lastListSize = 5;
 
 	const keyCacher = setInterval(() => {
 		startTime = performance.now();
@@ -44,6 +46,12 @@
 	}, $settings.cacheMinutes * 1000 * 60);
 
 	onMount(async () => {
+		if (browser) {
+			const lastStoredList = localStorage.getItem(`last${due ? '' : 'Completed'}MangaListLength`);
+
+			if (lastStoredList) lastListSize = parseInt(lastStoredList);
+		}
+
 		startTime = performance.now();
 		mangaLists = mediaListCollection(user, identity, Type.Manga, $manga, $lastPruneTimes.manga, {
 			addNotification
@@ -229,7 +237,7 @@
 			<ListTitle {progress} title={$locale().lists.due.mangaAndLightNovels} />
 		{/if}
 
-		<Skeleton card={false} count={5} height="0.9rem" list />
+		<Skeleton card={false} count={lastListSize} height="0.9rem" list />
 	{/if}
 {:then media}
 	{#await cleanMedia(media, displayUnresolved, forceFlag)}
@@ -262,7 +270,7 @@
 				<ListTitle {progress} title={$locale().lists.due.mangaAndLightNovels} />
 			{/if}
 
-			<Skeleton card={false} count={5} height="0.9rem" list />
+			<Skeleton card={false} count={lastListSize} height="0.9rem" list />
 		{/if}
 	{:then cleanedMedia}
 		{#if !authorised}