Fix issues with not resetting side panel content

packages/client/src/components/app/Layout.svelte

@@ -356,7 +356,7 @@
     flex-direction: column;
     gap: 30px;
     overflow-y: auto;
-    transition: margin-right 260ms ease-out;
+    transition: margin-right 130ms ease-out;
     position: absolute;
     width: 400px;
     right: 0;

packages/client/src/components/app/SidePanel.svelte

@@ -1,10 +1,13 @@
 <script>
-  import { getContext } from "svelte"
+  import { getContext, onDestroy } from "svelte"
 
   const component = getContext("component")
   const { styleable, sidePanelStore, builderStore, dndIsDragging } =
     getContext("sdk")
 
+  let renderContent = false
+  let contentTimeout
+
   // Automatically show and hide the side panel when inside the builder.
   // For some unknown reason, svelte reactivity breaks if we reference the
   // reactive variable "open" inside the following expression, or if we define
@@ -25,8 +28,22 @@
       }
     }
   }
+
+  // Derive visibility
   $: open = $sidePanelStore.contentId === $component.id
 
+  // When we hide the side panel we want to kick off a short timeout which will
+  // eventually hide the content. We don't do this immediately as this causes
+  // things like cycling through a table to constantly remount the side panel
+  // contents.
+  $: updateContentVisibility(open)
+  const updateContentVisibility = open => {
+    clearTimeout(contentTimeout)
+    contentTimeout = setTimeout(() => {
+      renderContent = open
+    }, 130)
+  }
+
   const showInSidePanel = (el, visible) => {
     const update = visible => {
       const target = document.getElementById("side-panel-container")
@@ -47,6 +64,10 @@
 
     return { update }
   }
+
+  onDestroy(() => {
+    clearTimeout(contentTimeout)
+  })
 </script>
 
 <div
@@ -55,7 +76,9 @@
   class="side-panel"
   class:open
 >
-  <slot />
+  {#if renderContent}
+    <slot />
+  {/if}
 </div>
 
 <style>