Hide animation

packages/builder/src/components/common/bindings/BindingSidePanel.svelte

@@ -43,8 +43,8 @@
   let helpers = handlebarsCompletions()
   let selectedCategory: string | null
   let hideTimeout: ReturnType<typeof setTimeout> | null
+  let snippetDrawer: SnippetDrawer
   let editableSnippet: Snippet | null
-  let showSnippetDrawer = false
 
   $: enableSnippets = !$licensing.isFreePlan
   $: bindingIcons = bindings?.reduce<Record<string, string>>((acc, ele) => {
@@ -212,14 +212,14 @@
 
   const createSnippet = () => {
     editableSnippet = null
-    showSnippetDrawer = true
+    snippetDrawer.show()
   }
 
   const editSnippet = (e: Event, snippet: Snippet) => {
     e.preventDefault()
     e.stopPropagation()
     editableSnippet = snippet
-    showSnippetDrawer = true
+    snippetDrawer.show()
   }
 </script>
 
@@ -449,12 +449,7 @@
   </Layout>
 </div>
 
-{#if showSnippetDrawer}
-  <SnippetDrawer
-    snippet={editableSnippet}
-    on:drawerHide={() => (showSnippetDrawer = false)}
-  />
-{/if}
+<SnippetDrawer bind:this={snippetDrawer} snippet={editableSnippet} />
 
 <style>
   .binding-side-panel {

packages/builder/src/components/common/bindings/SnippetDrawer.svelte

@@ -17,6 +17,8 @@
   import { ValidSnippetNameRegex } from "@budibase/shared-core"
   import type { Snippet } from "@budibase/types"
 
+  export const show = () => drawer.show()
+  export const hide = () => drawer.hide()
   export let snippet: Snippet | null
 
   const firstCharNumberRegex = /^[0-9].*$/
@@ -77,13 +79,9 @@
     }
     return null
   }
-
-  onMount(() => {
-    drawer.show()
-  })
 </script>
 
-<Drawer bind:this={drawer} on:drawerHide>
+<Drawer bind:this={drawer}>
   <svelte:fragment slot="title">
     {#if snippet}
       {snippet.name}