Broke out the hover tracking into its own store. Value check on the button group to mitigate excessive rendering. Fix for relationship field

packages/builder/src/builderStore/index.js

@@ -9,6 +9,7 @@ import { findComponent, findComponentPath } from "./componentUtils"
 import { RoleUtils } from "@budibase/frontend-core"
 import { createHistoryStore } from "builderStore/store/history"
 import { cloneDeep } from "lodash/fp"
+import { getHoverStore } from "./store/hover"
 
 export const store = getFrontendStore()
 export const automationStore = getAutomationStore()
@@ -16,6 +17,7 @@ export const themeStore = getThemeStore()
 export const temporalStore = getTemporalStore()
 export const userStore = getUserStore()
 export const deploymentStore = getDeploymentStore()
+export const hoverStore = getHoverStore()
 
 // Setup history for screens
 export const screenHistoryStore = createHistoryStore({

packages/builder/src/builderStore/store/frontend.js

@@ -92,9 +92,6 @@ const INITIAL_FRONTEND_STATE = {
   // Onboarding
   onboarding: false,
   tourNodes: null,
-
-  // UI state
-  hoveredComponentId: null,
 }
 
 export const getFrontendStore = () => {
@@ -1415,18 +1412,6 @@ export const getFrontendStore = () => {
           return state
         })
       },
-      hover: (componentId, notifyClient = true) => {
-        if (componentId === get(store).hoveredComponentId) {
-          return
-        }
-        store.update(state => {
-          state.hoveredComponentId = componentId
-          return state
-        })
-        if (notifyClient) {
-          store.actions.preview.sendEvent("hover-component", componentId)
-        }
-      },
     },
     links: {
       save: async (url, title) => {

packages/builder/src/builderStore/store/hover.js

@@ -0,0 +1,27 @@
+import { get, writable } from "svelte/store"
+import { store as builder } from "builderStore"
+
+export const getHoverStore = () => {
+  const initialValue = {
+    componentId: null,
+  }
+
+  const store = writable(initialValue)
+
+  const update = (componentId, notifyClient = true) => {
+    if (componentId === get(store).componentId) {
+      return
+    }
+    store.update(state => {
+      state.componentId = componentId
+      return state
+    })
+    if (notifyClient) {
+      builder.actions.preview.sendEvent("hover-component", componentId)
+    }
+  }
+  return {
+    subscribe: store.subscribe,
+    actions: { update },
+  }
+}

packages/builder/src/components/design/settings/controls/ButtonConfiguration/ButtonConfiguration.svelte

@@ -5,6 +5,7 @@
   import { store } from "builderStore"
   import { Helpers } from "@budibase/bbui"
   import { getEventContextBindings } from "builderStore/dataBinding"
+  import { cloneDeep, isEqual } from "lodash/fp"
 
   export let componentInstance
   export let componentBindings
@@ -17,8 +18,13 @@
   const dispatch = createEventDispatcher()
 
   let focusItem
+  let cachedValue
 
-  $: buttonList = sanitizeValue(value) || []
+  $: if (!isEqual(value, cachedValue)) {
+    cachedValue = cloneDeep(value)
+  }
+
+  $: buttonList = sanitizeValue(cachedValue) || []
   $: buttonCount = buttonList.length
   $: eventContextBindings = getEventContextBindings({
     componentInstance,

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte

@@ -1,7 +1,7 @@
 <script>
   import { get } from "svelte/store"
   import { onMount, onDestroy } from "svelte"
-  import { store, selectedScreen, currentAsset } from "builderStore"
+  import { store, selectedScreen, currentAsset, hoverStore } from "builderStore"
   import ConfirmDialog from "components/common/ConfirmDialog.svelte"
   import {
     ProgressCircle,
@@ -118,7 +118,7 @@
     } else if (type === "select-component" && data.id) {
       $store.selectedComponentId = data.id
     } else if (type === "hover-component") {
-      store.actions.components.hover(data.id, false)
+      hoverStore.actions.update(data.id, false)
     } else if (type === "update-prop") {
       await store.actions.components.updateSetting(data.prop, data.value)
     } else if (type === "update-styles") {

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/ComponentTree.svelte

@@ -5,6 +5,7 @@
     selectedComponentPath,
     selectedComponent,
     selectedScreen,
+    hoverStore,
   } from "builderStore"
   import ComponentDropdownMenu from "./ComponentDropdownMenu.svelte"
   import NavItem from "components/common/NavItem.svelte"
@@ -90,7 +91,7 @@
     return findComponentPath($selectedComponent, component._id)?.length > 0
   }
 
-  const hover = store.actions.components.hover
+  const hover = hoverStore.actions.update
 </script>
 
 <ul>
@@ -111,7 +112,7 @@
         on:dragover={dragover(component, index)}
         on:iconClick={() => toggleNodeOpen(component._id)}
         on:drop={onDrop}
-        hovering={$store.hoveredComponentId === component._id}
+        hovering={$hoverStore.componentId === component._id}
         on:mouseenter={() => hover(component._id)}
         on:mouseleave={() => hover(null)}
         text={getComponentText(component)}

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/ComponentList/index.svelte

@@ -1,7 +1,12 @@
 <script>
   import { notifications, Icon, Body } from "@budibase/bbui"
   import { isActive, goto } from "@roxi/routify"
-  import { store, selectedScreen, userSelectedResourceMap } from "builderStore"
+  import {
+    store,
+    selectedScreen,
+    userSelectedResourceMap,
+    hoverStore,
+  } from "builderStore"
   import NavItem from "components/common/NavItem.svelte"
   import ComponentTree from "./ComponentTree.svelte"
   import { dndStore, DropPosition } from "./dndStore.js"
@@ -36,7 +41,7 @@
     scrolling = e.target.scrollTop !== 0
   }
 
-  const hover = store.actions.components.hover
+  const hover = hoverStore.actions.update
 </script>
 
 <div class="components">
@@ -60,7 +65,7 @@
             icon="WebPage"
             on:drop={onDrop}
             on:click={() => ($store.selectedComponentId = screenComponentId)}
-            hovering={$store.hoveredComponentId === screenComponentId}
+            hovering={$hoverStore.componentId === screenComponentId}
             on:mouseenter={() => hover(screenComponentId)}
             on:mouseleave={() => hover(null)}
             id="component-screen"
@@ -79,7 +84,7 @@
               : "VisibilityOff"}
             on:drop={onDrop}
             on:click={() => ($store.selectedComponentId = navComponentId)}
-            hovering={$store.hoveredComponentId === navComponentId}
+            hovering={$hoverStore.componentId === navComponentId}
             on:mouseenter={() => hover(navComponentId)}
             on:mouseleave={() => hover(null)}
             id="component-nav"

packages/client/src/components/app/forms/RelationshipField.svelte

@@ -108,10 +108,13 @@
     }
   }
 
-  $: forceFetchRows(filter)
+  $: forceFetchRows(filter, fieldApi)
   $: debouncedFetchRows(searchTerm, primaryDisplay, defaultValue)
 
   const forceFetchRows = async () => {
+    if (!fieldApi) {
+      return
+    }
     // if the filter has changed, then we need to reset the options, clear the selection, and re-fetch
     optionsObj = {}
     fieldApi.setValue([])