Update how grid DND styles are applied to remove flashing

packages/client/manifest.json

@@ -4574,7 +4574,12 @@
       "size"
     ],
     "illegalChildren": ["grid", "section"],
-    "allowedDirectChildren": [""]
+    "allowedDirectChildren": [""],
+    "size": {
+      "width": 800,
+      "height": 400
+    },
+    "showEmptyState": false
   },
   "formblock": {
     "name": "Form Block",

packages/client/src/components/Component.svelte

@@ -91,6 +91,10 @@
   let settingsDefinitionMap
   let missingRequiredSettings = false
 
+  // Temporary styles which can be added in the app preview for things like DND.
+  // We clear these whenever a new instance is received.
+  let ephemeralStyles
+
   // Set up initial state for each new component instance
   $: initialise(instance)
 
@@ -181,6 +185,7 @@
     normal: {
       ...instance._styles?.normal,
       ...additionalStyles,
+      ...ephemeralStyles,
     },
     custom: customCSS,
     id,
@@ -214,6 +219,7 @@
       return
     } else {
       lastInstanceKey = instanceKey
+      ephemeralStyles = null
     }
 
     // Pull definition and constructor
@@ -515,6 +521,7 @@
         getRawSettings: () => ({ ...staticSettings, ...dynamicSettings }),
         getDataContext: () => get(context),
         reload: () => initialise(instance, true),
+        setEphemeralStyles: styles => (ephemeralStyles = styles),
       })
     }
   })

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

@@ -1,14 +1,18 @@
 <script>
   import { onMount, onDestroy } from "svelte"
-  import { builderStore, componentStore, screenStore } from "stores"
+  import { builderStore, componentStore } from "stores"
   import { Utils } from "@budibase/frontend-core"
-  import { findComponentById } from "utils/components.js"
 
   let dragInfo
   let gridStyles
 
-  $: dragNode = getDOMNode(dragInfo?.id)
-  $: applyStyles(dragNode, gridStyles)
+  $: jsonStyles = JSON.stringify(gridStyles)
+  $: id = dragInfo?.id
+  $: instance = componentStore.actions.getComponentInstance(id)
+
+  // We don't clear grid styles because that causes flashing, as the component
+  // will revert to its original position until the save completes.
+  $: gridStyles && instance?.setEphemeralStyles(gridStyles)
 
   const isChildOfGrid = e => {
     return (
@@ -26,15 +30,6 @@
     return [...component.children][0]
   }
 
-  const applyStyles = (dragNode, gridStyles) => {
-    if (!dragNode || !gridStyles) {
-      return
-    }
-    Object.entries(gridStyles).forEach(([style, value]) => {
-      dragNode.style[style] = value
-    })
-  }
-
   const processEvent = Utils.throttle((mouseX, mouseY) => {
     if (!dragInfo?.grid) {
       return
@@ -68,12 +63,15 @@
     if (mode === "move") {
       deltaY = Math.min(Math.max(deltaY, rowDeltaMin), rowDeltaMax)
       deltaX = Math.min(Math.max(deltaX, colDeltaMin), colDeltaMax)
-      gridStyles = {
+      const newStyles = {
         "grid-row-start": rowStart + deltaY,
         "grid-row-end": rowEnd + deltaY,
         "grid-column-start": colStart + deltaX,
         "grid-column-end": colEnd + deltaX,
       }
+      if (JSON.stringify(newStyles) !== jsonStyles) {
+        gridStyles = newStyles
+      }
     } else if (mode === "resize") {
       let newStyles = {}
       if (side === "right") {
@@ -97,7 +95,9 @@
         newStyles["grid-column-start"] = Math.min(colStart + deltaX, colEnd - 1)
         newStyles["grid-row-start"] = Math.min(rowStart + deltaY, rowEnd - 1)
       }
-      gridStyles = newStyles
+      if (JSON.stringify(newStyles) !== jsonStyles) {
+        gridStyles = newStyles
+      }
     }
   }, 100)
 

packages/client/src/stores/components.js

@@ -48,6 +48,9 @@ const createComponentStore = () => {
   )
 
   const registerInstance = (id, instance) => {
+    if (!id) {
+      return
+    }
     store.update(state => {
       // If this is a custom component, flag it so we can reload this component
       // later if required
@@ -67,6 +70,9 @@ const createComponentStore = () => {
   }
 
   const unregisterInstance = id => {
+    if (!id) {
+      return
+    }
     store.update(state => {
       // Remove from custom component map if required
       const component = state.mountedComponents[id]?.instance?.component
@@ -136,6 +142,9 @@ const createComponentStore = () => {
   }
 
   const getComponentInstance = id => {
+    if (!id) {
+      return null
+    }
     return get(store).mountedComponents[id]
   }