Don't reset component padded state for DND until dragging stops, to prevent jankiness due to losing space

packages/client/src/components/Component.svelte

@@ -16,7 +16,13 @@
     propsAreSame,
     getSettingsDefinition,
   } from "utils/componentProps"
-  import { builderStore, devToolsStore, componentStore, appStore } from "stores"
+  import {
+    builderStore,
+    devToolsStore,
+    componentStore,
+    appStore,
+    isDragging,
+  } from "stores"
   import { Helpers } from "@budibase/bbui"
   import { getActiveConditions, reduceConditionActions } from "utils/conditions"
   import Placeholder from "components/app/Placeholder.svelte"
@@ -152,6 +158,12 @@
   // Scroll the selected element into view
   $: selected && scrollIntoView()
 
+  // When dragging and dropping, pad components to allow dropping between
+  // nested layers. Only reset this when dragging stops.
+  let pad = false
+  $: pad = pad || (interactive && hasChildren && inDndPath)
+  $: $isDragging, (pad = false)
+
   // Update component context
   $: store.set({
     id,
@@ -454,11 +466,11 @@
     class:draggable
     class:droppable
     class:empty
-    class:parent={hasChildren}
     class:interactive
     class:editing
+    class:pad
+    class:parent={hasChildren}
     class:block={isBlock}
-    class:explode={interactive && hasChildren && inDndPath}
     class:placeholder={id === DNDPlaceholderID}
     data-id={id}
     data-name={name}
@@ -490,9 +502,9 @@
     display: contents;
   }
   .component :global(> *) {
-    transition: padding 260ms ease, border 260ms ease;
+    transition: padding 260ms ease-in, border 260ms ease-in;
   }
-  .component.explode :global(> *) {
+  .component.pad :global(> *) {
     padding: 12px !important;
     gap: 12px !important;
     border: 2px dotted var(--spectrum-global-color-gray-400) !important;

packages/client/src/components/preview/DNDHandler.svelte

@@ -13,6 +13,8 @@
   import { Utils } from "@budibase/frontend-core"
   import { findComponentById } from "utils/components.js"
 
+  const ThrottleRate = 130
+
   // Cache some dnd store state as local variables as it massively helps
   // performance. It lets us avoid calling svelte getters on every DOM action.
   $: source = $dndStore.source
@@ -191,7 +193,7 @@
       index: idx,
     })
   }
-  const throttledProcessEvent = Utils.throttle(processEvent, 130)
+  const throttledProcessEvent = Utils.throttle(processEvent, ThrottleRate)
 
   const handleEvent = e => {
     e.preventDefault()

packages/client/src/index.js

@@ -69,7 +69,7 @@ const loadBudibase = async () => {
           parent: null,
           bounds: {
             height: 64,
-            width: 64,
+            width: 128,
           },
           index: null,
           newComponentType: component,

packages/client/src/stores/components.js

@@ -53,6 +53,7 @@ const createComponentStore = () => {
         mountedComponentCount: Object.keys($store.mountedComponents).length,
         currentAsset: asset,
         dndPath: dndPath?.map(component => component._id),
+        dndDepth: dndPath?.length || 0,
       }
     }
   )