Improve performance

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

@@ -1,21 +1,20 @@
 <script>
   import { onMount, onDestroy } from "svelte"
   import { builderStore, componentStore } from "stores"
-  import { Utils } from "@budibase/frontend-core"
+  import { Utils, memo } from "@budibase/frontend-core"
 
   let dragInfo
-  let gridStyles
+  let gridStyles = memo()
   let id
 
   // Some memoisation of primitive types for performance
-  $: jsonStyles = JSON.stringify(gridStyles)
   $: id = dragInfo?.id || id
 
   // Set ephemeral grid styles on the dragged component
   $: instance = componentStore.actions.getComponentInstance(id)
   $: $instance?.setEphemeralStyles({
-    ...gridStyles,
+    ...$gridStyles,
-    ...(gridStyles ? { "z-index": 999 } : null),
+    ...($gridStyles ? { "z-index": 999 } : null),
   })
 
   // Util to check if a DND event originates from a grid (or inside a grid).
@@ -33,7 +32,7 @@
   // Util to get the inner DOM node by a component ID
   const getDOMNode = id => {
     const component = document.getElementsByClassName(id)[0]
-    return [...component.children][0]
+    return [...component?.children][0]
   }
 
   const processEvent = Utils.throttle((mouseX, mouseY) => {
@@ -76,9 +75,7 @@
         "grid-column-start": colStart + deltaX,
         "grid-column-end": colEnd + deltaX,
       }
-      if (JSON.stringify(newStyles) !== jsonStyles) {
+      gridStyles.set(newStyles)
-        gridStyles = newStyles
-      }
     } else if (mode === "resize") {
       let newStyles = {}
       if (side === "right") {
@@ -102,9 +99,7 @@
         newStyles["grid-column-start"] = Math.min(colStart + deltaX, colEnd - 1)
         newStyles["grid-row-start"] = Math.min(rowStart + deltaY, rowEnd - 1)
       }
-      if (JSON.stringify(newStyles) !== jsonStyles) {
+      gridStyles.set(newStyles)
-        gridStyles = newStyles
-      }
     }
   }, 100)
 
@@ -200,8 +195,8 @@
   // Callback when drag stops (whether dropped or not)
   const stopDragging = async () => {
     // Save changes
-    if (gridStyles) {
+    if ($gridStyles) {
-      await builderStore.actions.updateStyles(gridStyles, dragInfo.id)
+      await builderStore.actions.updateStyles($gridStyles, dragInfo.id)
     }
 
     // Reset listener
@@ -211,7 +206,7 @@
 
     // Reset state
     dragInfo = null
-    gridStyles = null
+    gridStyles.set(null)
   }
 
   onMount(() => {

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

@@ -2,6 +2,7 @@
   import { onMount, onDestroy } from "svelte"
   import Indicator from "./Indicator.svelte"
   import { builderStore } from "stores"
+  import { memo } from "@budibase/frontend-core"
 
   export let componentId = null
   export let color = null
@@ -25,6 +26,7 @@
     insideGrid: false,
     error: false,
   })
+  const config = memo($$props)
 
   let interval
   let state = defaultState()
@@ -35,7 +37,13 @@
 
   $: visibleIndicators = state.indicators.filter(x => x.visible)
   $: offset = $builderStore.inBuilder ? 0 : 2
-  // $: $$props, updatePosition()
+  $: config.set({
+    componentId,
+    color,
+    zIndex,
+    prefix,
+    allowResizeAnchors,
+  })
 
   const checkInsideGrid = id => {
     const component = document.getElementsByClassName(id)[0]
@@ -147,6 +155,7 @@
 
   onMount(() => {
     updatePosition()
+    config.subscribe(updatePosition)
     interval = setInterval(updatePosition, 100)
     document.addEventListener("scroll", updatePosition, true)
   })