From 666e087493283b80f53c10a21f94e9400527557a Mon Sep 17 00:00:00 2001
From: Simon Wiles <simonjwiles@gmail.com>
Date: Tue, 18 Jan 2022 11:33:41 -0800
Subject: [PATCH] Avoid destruction/re-mounting of components on roll-change

Destroying and re-mounting the right sidebar (in particular) when the roll is changed can cause problems if child components aren't destroyed properly due to outro transitions (see sveltejs/svelte#5268).  This has caused a number of bugs with the `<RollViewer/>` component not being recreated properly.

One option is to eschew all outro transitions in other parts of the app; but I think a better solution in this specific case is to avoid destroying and recreating this part of the component tree unless absolutely necessary.
---
 src/Pianolatron.svelte | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/Pianolatron.svelte b/src/Pianolatron.svelte
index 36a6fc6a..16881b59 100644
--- a/src/Pianolatron.svelte
+++ b/src/Pianolatron.svelte
@@ -287,8 +287,8 @@
         {/if}
       {/if}
     </FlexCollapsible>
-    {#if appReady}
-      <div id="roll">
+    <div id="roll">
+      {#if appReady}
         <RollViewer
           bind:this={rollViewer}
           imageUrl={currentRoll.image_url}
@@ -296,16 +296,16 @@
           {holesByTickInterval}
           {skipToTick}
         />
-        {#if $userSettings.showKeyboard && $userSettings.overlayKeyboard}
-          <div id="keyboard-overlay" transition:fade>
-            <Keyboard keyCount="88" {startNote} {stopNote} />
-          </div>
-        {/if}
-      </div>
-      <FlexCollapsible id="right-sidebar" width="20vw" position="left">
-        <TabbedPanel {playPauseApp} {stopApp} {skipToPercentage} />
-      </FlexCollapsible>
-    {/if}
+      {/if}
+      {#if $userSettings.showKeyboard && $userSettings.overlayKeyboard}
+        <div id="keyboard-overlay" transition:fade>
+          <Keyboard keyCount="88" {startNote} {stopNote} />
+        </div>
+      {/if}
+    </div>
+    <FlexCollapsible id="right-sidebar" width="20vw" position="left">
+      <TabbedPanel {playPauseApp} {stopApp} {skipToPercentage} />
+    </FlexCollapsible>
   </div>
   {#if $userSettings.showKeyboard && !$userSettings.overlayKeyboard}
     <div id="keyboard-container" transition:slide>