feat(manga): no load on increment

2 files changed, 73 insertions, 36 deletions

diff --git a/src/lib/List/CleanMangaList.svelte b/src/lib/List/CleanMangaList.svelte
new file mode 100644
index 00000000..7d44732a
--- /dev/null
+++ b/src/lib/List/CleanMangaList.svelte
@@ -0,0 +1,52 @@
+<script lang="ts">
+	import type { Media } from '$lib/AniList/media';
+	import ListTitle from './ListTitle.svelte';
+
+	export let media: Media[];
+	export let cleanCache: () => Promise<void>;
+	export let endTime: number;
+	export let lastUpdatedMedia: number;
+	export let updateMedia: (
+		id: number,
+		progress: number | undefined,
+		media: Media[]
+	) => Promise<void>;
+	export let disableIncrement = false;
+</script>
+
+<ListTitle count={media.length} time={endTime / 1000}>
+	<a href={'#'} title="Force a refresh" on:click={cleanCache}>Force</a>
+</ListTitle>
+
+{#if media.length === 0}
+	<ul>
+		<li>No manga to display. <a href={'#'} on:click={cleanCache}>Force refresh</a></li>
+	</ul>
+{/if}
+
+<ul>
+	{#each media as manga}
+		<li>
+			<a href={`https://anilist.co/manga/${manga.id}`} target="_blank">
+				{#if lastUpdatedMedia === manga.id}
+					<span style="color: lightcoral">
+						{manga.title.english || manga.title.romaji || manga.title.native}
+					</span>
+				{:else}
+					{manga.title.english || manga.title.romaji || manga.title.native}
+				{/if}
+			</a>
+			<span style="opacity: 50%;">|</span>
+			{(manga.mediaListEntry || { progress: 0 }).progress}
+			<a
+				href={'#'}
+				style={disableIncrement ? 'pointer-events: none; opacity: 50%;' : ''}
+				on:click={() =>
+					disableIncrement ? null : updateMedia(manga.id, manga.mediaListEntry?.progress, media)}
+			>
+				+
+			</a>
+			[{manga.episodes || '?'}]
+		</li>
+	{/each}
+</ul>
diff --git a/src/lib/List/Template/MangaListTemplate.svelte b/src/lib/List/Template/MangaListTemplate.svelte
index 9bbfec49..904d14cf 100644
--- a/src/lib/List/Template/MangaListTemplate.svelte
+++ b/src/lib/List/Template/MangaListTemplate.svelte
@@ -9,6 +9,7 @@
 	import lastPruneTimes from '../../../stores/lastPruneTimes';
 	import ListTitle from '../ListTitle.svelte';
 	import Error from '$lib/Error.svelte';
+	import CleanMangaList from '../CleanMangaList.svelte';
 
 	export let user: AniListAuthorisation;
 	export let identity: UserIdentity;
@@ -19,6 +20,7 @@
 	let startTime: number;
 	let endTime: number;
 	let lastUpdatedMedia = -1;
+	let previousMangaList: Media[] = [];
 
 	const keyCacher = setInterval(() => {
 		startTime = performance.now();
@@ -102,9 +104,10 @@
 		return finalMedia;
 	};
 
-	const updateMedia = async (id: number, progress: number | undefined) => {
+	const updateMedia = async (id: number, progress: number | undefined, media: Media[]) => {
 		await chapterDatabase.chapters.delete(id);
 		await fetch(`/api/anilist-increment?id=${id}&progress=${(progress || 0) + 1}`).then(() => {
+			previousMangaList = media;
 			mangaLists = mediaListCollection(
 				user,
 				identity,
@@ -134,44 +137,26 @@
 </script>
 
 {#await mangaLists}
-	<ListTitle />
-
-	<ul><li>Loading ...</li></ul>
+	<CleanMangaList
+		media={previousMangaList}
+		{cleanCache}
+		{endTime}
+		{lastUpdatedMedia}
+		{updateMedia}
+		disableIncrement
+	/>
 {:then media}
 	{#await cleanMedia(media, displayUnresolved)}
-		<ListTitle />
-
-		<ul><li>Loading ...</li></ul>
+		<CleanMangaList
+			media={previousMangaList}
+			{cleanCache}
+			{endTime}
+			{lastUpdatedMedia}
+			{updateMedia}
+			disableIncrement
+		/>
 	{:then cleanedMedia}
-		<ListTitle count={cleanedMedia.length} time={endTime / 1000}>
-			<a href={'#'} title="Force a refresh" on:click={cleanCache}>Force</a>
-		</ListTitle>
-
-		{#if cleanedMedia.length === 0}
-			<ul>
-				<li>No manga to display. <a href={'#'} on:click={cleanCache}>Force refresh</a></li>
-			</ul>
-		{/if}
-
-		<ul>
-			{#each cleanedMedia as manga}
-				<li>
-					<a href={`https://anilist.co/manga/${manga.id}`} target="_blank">
-						{#if lastUpdatedMedia === manga.id}
-							<span style="color: lightcoral">
-								{manga.title.english || manga.title.romaji || manga.title.native}
-							</span>
-						{:else}
-							{manga.title.english || manga.title.romaji || manga.title.native}
-						{/if}
-					</a>
-					<span style="opacity: 50%;">|</span>
-					{(manga.mediaListEntry || { progress: 0 }).progress}
-					<a href={'#'} on:click={() => updateMedia(manga.id, manga.mediaListEntry?.progress)}>+</a>
-					[{manga.episodes || '?'}]
-				</li>
-			{/each}
-		</ul>
+		<CleanMangaList media={cleanedMedia} {cleanCache} {endTime} {lastUpdatedMedia} {updateMedia} />
 	{:catch}
 		<ListTitle count={-1337} time={0} />