feat(manga): instantly reactive increment

2 files changed, 18 insertions, 2 deletions

diff --git a/src/lib/List/CleanMangaList.svelte b/src/lib/List/CleanMangaList.svelte
index 7d44732a..903fed5d 100644
--- a/src/lib/List/CleanMangaList.svelte
+++ b/src/lib/List/CleanMangaList.svelte
@@ -12,6 +12,7 @@
 		media: Media[]
 	) => Promise<void>;
 	export let disableIncrement = false;
+	export let pendingUpdate: boolean;
 </script>
 
 <ListTitle count={media.length} time={endTime / 1000}>
@@ -26,6 +27,8 @@
 
 <ul>
 	{#each media as manga}
+		{@const progress = (manga.mediaListEntry || { progress: 0 }).progress}
+
 		<li>
 			<a href={`https://anilist.co/manga/${manga.id}`} target="_blank">
 				{#if lastUpdatedMedia === manga.id}
@@ -37,7 +40,7 @@
 				{/if}
 			</a>
 			<span style="opacity: 50%;">|</span>
-			{(manga.mediaListEntry || { progress: 0 }).progress}
+			{pendingUpdate ? progress + 1 : progress}
 			<a
 				href={'#'}
 				style={disableIncrement ? 'pointer-events: none; opacity: 50%;' : ''}
diff --git a/src/lib/List/Template/MangaListTemplate.svelte b/src/lib/List/Template/MangaListTemplate.svelte
index 75d12aa5..57f3998d 100644
--- a/src/lib/List/Template/MangaListTemplate.svelte
+++ b/src/lib/List/Template/MangaListTemplate.svelte
@@ -21,6 +21,7 @@
 	let endTime: number;
 	let lastUpdatedMedia = -1;
 	let previousMangaList: Media[];
+	let pendingUpdate = false;
 
 	const keyCacher = setInterval(() => {
 		startTime = performance.now();
@@ -105,6 +106,8 @@
 	};
 
 	const updateMedia = async (id: number, progress: number | undefined, media: Media[]) => {
+		pendingUpdate = true;
+
 		await chapterDatabase.chapters.delete(id);
 		await fetch(`/api/anilist-increment?id=${id}&progress=${(progress || 0) + 1}`).then(() => {
 			previousMangaList = media;
@@ -117,6 +120,7 @@
 				true
 			);
 			lastUpdatedMedia = id;
+			pendingUpdate = false;
 		});
 	};
 
@@ -145,6 +149,7 @@
 			{lastUpdatedMedia}
 			{updateMedia}
 			disableIncrement
+			{pendingUpdate}
 		/>
 	{:else}
 		<ListTitle />
@@ -161,6 +166,7 @@
 				{lastUpdatedMedia}
 				{updateMedia}
 				disableIncrement
+				{pendingUpdate}
 			/>
 		{:else}
 			<ListTitle />
@@ -168,7 +174,14 @@
 			<ul><li>Loading ...</li></ul>
 		{/if}
 	{:then cleanedMedia}
-		<CleanMangaList media={cleanedMedia} {cleanCache} {endTime} {lastUpdatedMedia} {updateMedia} />
+		<CleanMangaList
+			media={cleanedMedia}
+			{cleanCache}
+			{endTime}
+			{lastUpdatedMedia}
+			{updateMedia}
+			{pendingUpdate}
+		/>
 	{:catch}
 		<ListTitle count={-1337} time={0} />