From 41b85c8758237c468f439a5191470bb0cd4dc9d4 Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Wed, 4 Oct 2023 18:59:18 -0700
Subject: feat(anime): instantly reactive increment

---
 src/lib/List/Anime/CleanAnimeList.svelte       | 30 ++++++++++++++++++--------
 src/lib/List/Template/AnimeListTemplate.svelte |  3 +++
 2 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index 398ed541..7232ee54 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -17,6 +17,7 @@
 	export let completed = false;
 	export let previousAnimeList: Media[];
 	export let disableIncrement = false;
+	export let pendingUpdate: number | null;
 </script>
 
 <ListTitle time={endTime / 1000} count={media.length} custom={title} />
@@ -33,6 +34,7 @@
 
 <ul>
 	{#each media as anime}
+		{@const progress = (anime.mediaListEntry || { progress: 0 }).progress}
 		<li>
 			<a
 				href={$settings.linkToAniList
@@ -53,18 +55,28 @@
 			<span style="opacity: 50%;">|</span>
 			{#if title !== 'Upcoming Episodes'}
 				<!-- {anime.mediaListEntry?.progress || 0}{@html totalEpisodes(anime)} -->
-				{(anime.mediaListEntry || { progress: 0 }).progress}{@html totalEpisodes(anime)}
+				{pendingUpdate === anime.id ? progress + 1 : progress}{@html totalEpisodes(anime)}
 				<a
 					href={'#'}
 					style={disableIncrement ? 'pointer-events: none; opacity: 50%;' : ''}
-					on:click={() =>
-						disableIncrement
-							? null
-							: updateMedia(anime.id, anime.mediaListEntry?.progress, () => {
-									previousAnimeList = media;
-									animeLists = cleanCache(user, identity);
-									lastUpdatedMedia = anime.id;
-							  })}>+</a
+					on:click={() => {
+						if (!disableIncrement) {
+							pendingUpdate = anime.id;
+
+							updateMedia(anime.id, anime.mediaListEntry?.progress, () => {
+								const mediaListEntry = media.find((m) => m.id === anime.id)?.mediaListEntry;
+
+								if (mediaListEntry) {
+									mediaListEntry.progress = progress + 1;
+								}
+
+								previousAnimeList = media;
+								animeLists = cleanCache(user, identity);
+								lastUpdatedMedia = anime.id;
+								pendingUpdate = null;
+							});
+						}
+					}}>+</a
 				>
 				{#if !completed}
 					[{anime.nextAiringEpisode?.episode === -1
diff --git a/src/lib/List/Template/AnimeListTemplate.svelte b/src/lib/List/Template/AnimeListTemplate.svelte
index 85e4f1dc..2a8bbdba 100644
--- a/src/lib/List/Template/AnimeListTemplate.svelte
+++ b/src/lib/List/Template/AnimeListTemplate.svelte
@@ -18,6 +18,7 @@
 
 	let lastUpdatedMedia = -1;
 	let previousAnimeList: Media[];
+	let pendingUpdate: number | null = null;
 </script>
 
 {#await animeLists}
@@ -33,6 +34,7 @@
 			{completed}
 			bind:previousAnimeList
 			disableIncrement
+			bind:pendingUpdate
 		/>
 	{:else}
 		<ListTitle custom={title} />
@@ -52,6 +54,7 @@
 		bind:lastUpdatedMedia
 		{completed}
 		bind:previousAnimeList
+		bind:pendingUpdate
 	/>
 {:catch}
 	<ListTitle time={0} count={-1337} custom={title} />
-- 
cgit v1.2.3