From bc5b9ccd1646128759bfd198574e04a4a10e2b24 Mon Sep 17 00:00:00 2001
From: Gnathonic <gnathonic@gmail.com>
Date: Fri, 24 Jan 2025 18:19:35 -0700
Subject: [PATCH] Add keyed blocks to enhance MangaPage reactivity

Keyed blocks improve DOM update handling. This improves compatibility with some language learning extensions. For example, this prevents Migaku from persisting textboxes from previous pages as one pages through their comics.
---
 src/lib/components/Reader/Reader.svelte | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/Reader/Reader.svelte b/src/lib/components/Reader/Reader.svelte
index feec332..70f5b7c 100644
--- a/src/lib/components/Reader/Reader.svelte
+++ b/src/lib/components/Reader/Reader.svelte
@@ -345,10 +345,12 @@
         role="none"
         id="manga-panel"
       >
-        {#if showSecondPage()}
-          <MangaPage page={pages[index + 1]} src={Object.values(volume?.files)[index + 1]} />
-        {/if}
-        <MangaPage page={pages[index]} src={Object.values(volume?.files)[index]} />
+        {#key page}
+          {#if showSecondPage()}
+            <MangaPage page={pages[index + 1]} src={Object.values(volume?.files)[index + 1]} />
+          {/if}
+          <MangaPage page={pages[index]} src={Object.values(volume?.files)[index]} />
+        {/key}
       </div>
     </Panzoom>
   </div>
@@ -370,4 +372,4 @@
   <div class="fixed z-50 left-1/2 top-1/2">
     <Spinner />
   </div>
-{/if}
+{/if}
\ No newline at end of file