feat(template): loading for initial load

2 files changed, 42 insertions, 24 deletions

diff --git a/src/lib/List/Template/AnimeListTemplate.svelte b/src/lib/List/Template/AnimeListTemplate.svelte
index 3b70b06a..85e4f1dc 100644
--- a/src/lib/List/Template/AnimeListTemplate.svelte
+++ b/src/lib/List/Template/AnimeListTemplate.svelte
@@ -17,22 +17,28 @@
 	export let completed = false;
 
 	let lastUpdatedMedia = -1;
-	let previousAnimeList: Media[] = [];
+	let previousAnimeList: Media[];
 </script>
 
 {#await animeLists}
-	<CleanAnimeList
-		media={previousAnimeList}
-		{title}
-		bind:animeLists
-		{user}
-		{identity}
-		{endTime}
-		bind:lastUpdatedMedia
-		{completed}
-		bind:previousAnimeList
-		disableIncrement
-	/>
+	{#if previousAnimeList}
+		<CleanAnimeList
+			media={previousAnimeList}
+			{title}
+			bind:animeLists
+			{user}
+			{identity}
+			{endTime}
+			bind:lastUpdatedMedia
+			{completed}
+			bind:previousAnimeList
+			disableIncrement
+		/>
+	{:else}
+		<ListTitle custom={title} />
+
+		<ul><li>Loading ...</li></ul>
+	{/if}
 {:then media}
 	{@const cleanedMedia = cleanMedia(media, $settings.displayUnresolved)}
 
diff --git a/src/lib/List/Template/MangaListTemplate.svelte b/src/lib/List/Template/MangaListTemplate.svelte
index 904d14cf..75d12aa5 100644
--- a/src/lib/List/Template/MangaListTemplate.svelte
+++ b/src/lib/List/Template/MangaListTemplate.svelte
@@ -20,7 +20,7 @@
 	let startTime: number;
 	let endTime: number;
 	let lastUpdatedMedia = -1;
-	let previousMangaList: Media[] = [];
+	let previousMangaList: Media[];
 
 	const keyCacher = setInterval(() => {
 		startTime = performance.now();
@@ -137,16 +137,7 @@
 </script>
 
 {#await mangaLists}
-	<CleanMangaList
-		media={previousMangaList}
-		{cleanCache}
-		{endTime}
-		{lastUpdatedMedia}
-		{updateMedia}
-		disableIncrement
-	/>
-{:then media}
-	{#await cleanMedia(media, displayUnresolved)}
+	{#if previousMangaList}
 		<CleanMangaList
 			media={previousMangaList}
 			{cleanCache}
@@ -155,6 +146,27 @@
 			{updateMedia}
 			disableIncrement
 		/>
+	{:else}
+		<ListTitle />
+
+		<ul><li>Loading ...</li></ul>
+	{/if}
+{:then media}
+	{#await cleanMedia(media, displayUnresolved)}
+		{#if previousMangaList}
+			<CleanMangaList
+				media={previousMangaList}
+				{cleanCache}
+				{endTime}
+				{lastUpdatedMedia}
+				{updateMedia}
+				disableIncrement
+			/>
+		{:else}
+			<ListTitle />
+
+			<ul><li>Loading ...</li></ul>
+		{/if}
 	{:then cleanedMedia}
 		<CleanMangaList media={cleanedMedia} {cleanCache} {endTime} {lastUpdatedMedia} {updateMedia} />
 	{:catch}