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.
sul-cidr · Jan 18, 2022 · 666e087 · 666e087
1 parent 92ad48c
commit 666e087
Showing 1 changed file with 12 additions and 12 deletions.
diff --git a/src/Pianolatron.svelte b/src/Pianolatron.svelte
@@ -287,25 +287,25 @@
         {/if}
       {/if}
     </FlexCollapsible>
-    {#if appReady}
-      <div id="roll">
+    <div id="roll">
+      {#if appReady}
         <RollViewer
           bind:this={rollViewer}
           imageUrl={currentRoll.image_url}
           {holeData}
           {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>