From e56b5cde90392526bb655387025d62d1560fbb1f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 6 Dec 2022 09:55:25 +0000
Subject: [PATCH 1/3] Hide content when side panel is hidden to avoid stale
 data being shown when re-revealing side panel

---
 packages/client/src/components/app/SidePanel.svelte | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/client/src/components/app/SidePanel.svelte b/packages/client/src/components/app/SidePanel.svelte
index ed4216fa93..8731c7191e 100644
--- a/packages/client/src/components/app/SidePanel.svelte
+++ b/packages/client/src/components/app/SidePanel.svelte
@@ -57,7 +57,9 @@
   class="side-panel"
   class:open
 >
-  <slot />
+  {#if $sidePanelStore.open}
+    <slot />
+  {/if}
 </div>
 
 <style>

From bcc0fe71dafc827fcc6679b7879abd4fdbf7eddb Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 6 Dec 2022 09:55:42 +0000
Subject: [PATCH 2/3] Debounce hiding side panel to avoid toggling visibility
 when cycling through records

---
 packages/client/src/stores/sidePanel.js | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/client/src/stores/sidePanel.js b/packages/client/src/stores/sidePanel.js
index 327fcfae82..3b3b9f5f4d 100644
--- a/packages/client/src/stores/sidePanel.js
+++ b/packages/client/src/stores/sidePanel.js
@@ -11,18 +11,25 @@ export const createSidePanelStore = () => {
       open: $store.contentId != null,
     }
   })
+  let timeout
 
   const open = id => {
+    clearTimeout(timeout)
     store.update(state => {
       state.contentId = id
       return state
     })
   }
+
+  // Delay closing by 50ms to avoid toggling visibility when cycling though
+  // records
   const close = () => {
-    store.update(state => {
-      state.contentId = null
-      return state
-    })
+    timeout = setTimeout(() => {
+      store.update(state => {
+        state.contentId = null
+        return state
+      })
+    }, 50)
   }
 
   return {

From e02c8cd466021b184c76cf783dc297f7481b258f Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Tue, 6 Dec 2022 11:18:26 +0000
Subject: [PATCH 3/3] Tweak skeleton colours to make slightly less pronounced

---
 packages/bbui/src/Skeleton/Skeleton.svelte | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/bbui/src/Skeleton/Skeleton.svelte b/packages/bbui/src/Skeleton/Skeleton.svelte
index e12d37b057..92357a8c75 100644
--- a/packages/bbui/src/Skeleton/Skeleton.svelte
+++ b/packages/bbui/src/Skeleton/Skeleton.svelte
@@ -9,7 +9,7 @@
     height: 100%;
     width: 100%;
     opacity: 0;
-    background-color: var(--spectrum-global-color-gray-300) !important;
+    background-color: var(--spectrum-global-color-gray-200) !important;
     border-radius: 7px;
     overflow: hidden;
     position: relative;
@@ -31,8 +31,8 @@
     background-image: linear-gradient(
       90deg,
       rgba(255, 255, 255, 0) 0,
-      rgba(255, 255, 255, 0.2) 20%,
-      rgba(255, 255, 255, 0.5) 60%,
+      rgba(255, 255, 255, 0.15) 20%,
+      rgba(255, 255, 255, 0.3) 60%,
       rgba(255, 255, 255, 0)
     );
     animation: shimmer 2s infinite;
@@ -44,7 +44,7 @@
       opacity: 0;
     }
     100% {
-      opacity: 1;
+      opacity: 0.75;
     }
   }