diff --git a/packages/builder/src/stores/builder/hover.js b/packages/builder/src/stores/builder/hover.js
index f0444a7da5..98cdc9e416 100644
--- a/packages/builder/src/stores/builder/hover.js
+++ b/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
}
diff --git a/packages/client/src/components/preview/HoverIndicator.svelte b/packages/client/src/components/preview/HoverIndicator.svelte
index 164ec32ab4..69e13e4219 100644
--- a/packages/client/src/components/preview/HoverIndicator.svelte
+++ b/packages/client/src/components/preview/HoverIndicator.svelte
@@ -1,10 +1,9 @@
x.visible)
$: offset = $builderStore.inBuilder ? 0 : 2
+ $: componentId, debouncedUpdate()
let updating = false
let observers = []
diff --git a/packages/client/src/index.js b/packages/client/src/index.js
index 9c249dd5b3..de6d1bdc12 100644
--- a/packages/client/src/index.js
+++ b/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)
}
diff --git a/packages/client/src/stores/hover.js b/packages/client/src/stores/hover.js
index 24f315a126..014a9f1aa0 100644
--- a/packages/client/src/stores/hover.js
+++ b/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 {