Multiple performance improvements to component selection and hovering

packages/builder/src/stores/builder/hover.js

@@ -7,12 +7,25 @@ export const INITIAL_HOVER_STATE = {
 }
 
 export class HoverStore extends BudiStore {
+  hoverTimeout
+
   constructor() {
     super({ ...INITIAL_HOVER_STATE })
     this.hover = this.hover.bind(this)
   }
 
   hover(componentId, notifyClient = true) {
+    clearTimeout(this.hoverTimeout)
+    if (componentId) {
+      this.processHover(componentId, notifyClient)
+    } else {
+      this.hoverTimeout = setTimeout(() => {
+        this.processHover(componentId, notifyClient)
+      }, 10)
+    }
+  }
+
+  processHover(componentId, notifyClient) {
     if (componentId === get(this.store).componentId) {
       return
     }

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

@@ -1,10 +1,9 @@
 <script>
   import { onMount, onDestroy } from "svelte"
   import IndicatorSet from "./IndicatorSet.svelte"
-  import { builderStore, dndIsDragging, hoverStore } from "stores"
+  import { dndIsDragging, hoverStore } from "stores"
 
   $: componentId = $hoverStore.hoveredComponentId
-  $: zIndex = componentId === $builderStore.selectedComponentId ? 900 : 920
 
   const onMouseOver = e => {
     // Ignore if dragging
@@ -46,6 +45,6 @@
   componentId={$dndIsDragging ? null : componentId}
   color="var(--spectrum-global-color-static-blue-200)"
   transition
-  {zIndex}
+  zIndex="890"
   allowResizeAnchors
 />

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

@@ -31,7 +31,7 @@
 </script>
 
 <div
-  in:fade={{
+  transition:fade|local={{
     delay: transition ? 100 : 0,
     duration: transition ? 100 : 0,
   }}
@@ -127,10 +127,6 @@
     font-weight: 600;
   }
 
-  /* Icon styles */
-  .label :global(.spectrum-Icon + .text) {
-  }
-
   /* Anchor */
   .anchor {
     --size: 24px;

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

@@ -20,6 +20,7 @@
 
   $: visibleIndicators = indicators.filter(x => x.visible)
   $: offset = $builderStore.inBuilder ? 0 : 2
+  $: componentId, debouncedUpdate()
 
   let updating = false
   let observers = []

packages/client/src/index.js

@@ -98,7 +98,7 @@ const loadBudibase = async () => {
         context: stringifiedContext,
       })
     } else if (type === "hover-component") {
-      hoverStore.actions.hoverComponent(data)
+      hoverStore.actions.hoverComponent(data, false)
     } else if (type === "builder-meta") {
       builderStore.actions.setMetadata(data)
     }

packages/client/src/stores/hover.js

@@ -5,13 +5,27 @@ const createHoverStore = () => {
   const store = writable({
     hoveredComponentId: null,
   })
+  let hoverTimeout
 
-  const hoverComponent = id => {
+  const hoverComponent = (id, notifyBuilder = true) => {
+    clearTimeout(hoverTimeout)
+    if (id) {
+      processHover(id, notifyBuilder)
+    } else {
+      hoverTimeout = setTimeout(() => {
+        processHover(id, notifyBuilder)
+      }, 10)
+    }
+  }
+
+  const processHover = (id, notifyBuilder = true) => {
     if (id === get(store).hoveredComponentId) {
       return
     }
     store.set({ hoveredComponentId: id })
-    eventStore.actions.dispatchEvent("hover-component", { id })
+    if (notifyBuilder) {
+      eventStore.actions.dispatchEvent("hover-component", { id })
+    }
   }
 
   return {