fix(lists): tick count down when media leaves a listHEADmain

On revalidation the {#await} branch swaps and remounts CleanAnimeList,
resetting NumberTicker's tween to 0 so it always counted up. Persist the
last displayed count in AnimeListTemplate (which survives the remount) and
feed it as the ticker's start, so the count animates in the real
direction: down when an item leaves due/upcoming, up when one arrives.

3 files changed, 22 insertions, 4 deletions

diff --git a/src/lib/List/Anime/AnimeListTemplate.svelte b/src/lib/List/Anime/AnimeListTemplate.svelte
index ae7ee1f1..5d769640 100644
--- a/src/lib/List/Anime/AnimeListTemplate.svelte
+++ b/src/lib/List/Anime/AnimeListTemplate.svelte
@@ -34,6 +34,7 @@ export let limit: number | undefined = undefined;
 
 let lastUpdatedMedia = -1;
 let previousAnimeList: Media[];
+let previousCount: number | undefined;
 let pendingUpdate: number | null = null;
 let lastListSize = 8;
 
@@ -74,6 +75,7 @@ onMount(async () => {
         {notYetReleased}
         {upcoming}
         bind:previousAnimeList
+        bind:previousCount
         bind:pendingUpdate
         {dummy}
         {disableFilter}
@@ -97,6 +99,7 @@ onMount(async () => {
         {notYetReleased}
         {upcoming}
         bind:previousAnimeList
+        bind:previousCount
         bind:pendingUpdate
         {dummy}
         {disableFilter}
diff --git a/src/lib/List/Anime/CleanAnimeList.svelte b/src/lib/List/Anime/CleanAnimeList.svelte
index 0bc88489..f2077d20 100644
--- a/src/lib/List/Anime/CleanAnimeList.svelte
+++ b/src/lib/List/Anime/CleanAnimeList.svelte
@@ -30,6 +30,7 @@ export let endTime: number;
 export let lastUpdatedMedia: number;
 export let completed = false;
 export let previousAnimeList: Media[];
+export let previousCount: number | undefined = undefined;
 export let pendingUpdate: number | null;
 export let upcoming = false;
 export let notYetReleased = false;
@@ -37,6 +38,12 @@ export let dummy = false;
 export let disableFilter = false;
 export let limit: number | undefined = undefined;
 
+// This list remounts on every revalidation (the {#await} branch swaps),
+// which resets the count ticker's tween. Snapshot the count the user last
+// saw so the ticker animates from it — ticking down when an item leaves,
+// up when one arrives — instead of always counting up from zero.
+const startCount = previousCount;
+
 let showRoulette = false;
 let airingRefreshTimeout: ReturnType<typeof setTimeout> | undefined;
 let scheduledAiringAt: number | null = null;
@@ -111,6 +118,13 @@ $: filteredMedia =
 		? media
 		: media.filter((m) => m.mediaListEntry?.customLists?.[selectedList]);
 
+$: displayedCount =
+	$settings.displayTotalDueEpisodes || $settings.displayTotalEpisodes
+		? totalEpisodeDueCount
+		: filteredMedia.length;
+
+$: previousCount = displayedCount;
+
 $: if (browser && !dummy && media && previousAnimeList !== media)
 	previousAnimeList = media;
 
@@ -241,9 +255,8 @@ const increment = (anime: Media, progress: number) => {
 
 <ListTitle
   time={endTime / 1000}
-  count={$settings.displayTotalDueEpisodes || $settings.displayTotalEpisodes
-    ? totalEpisodeDueCount
-    : filteredMedia.length}
+  count={displayedCount}
+  start={startCount ?? 0}
   {title}
   hideTime={dummy}
   hideCount={dummy || media.length === 0}
diff --git a/src/lib/List/ListTitle.svelte b/src/lib/List/ListTitle.svelte
index f24476fe..2ccb591d 100644
--- a/src/lib/List/ListTitle.svelte
+++ b/src/lib/List/ListTitle.svelte
@@ -6,6 +6,7 @@ import type { Title } from "./mediaTitle";
 
 export let time: number | undefined = undefined;
 export let count = -1337;
+export let start = 0;
 export let title: Title = {
 	title: "Media List",
 	hint: "This is a media list.",
@@ -20,8 +21,9 @@ export let hideCount = false;
   {#if !hideCount}
     <span class="opaque list-title-count">
       {#if count === -1337}...{:else}<NumberTicker
+          {start}
           end={count}
-          duration={Math.min(2500, Math.max(500, Math.abs(count) * 10))}
+          duration={Math.min(2500, Math.max(500, Math.abs(count - start) * 10))}
         />{/if}
     </span>
   {/if}