diff --git a/packages/client/src/components/preview/DNDPlaceholderOverlay.svelte b/packages/client/src/components/preview/DNDPlaceholderOverlay.svelte
index 12103e3904..6ed2df6a87 100644
--- a/packages/client/src/components/preview/DNDPlaceholderOverlay.svelte
+++ b/packages/client/src/components/preview/DNDPlaceholderOverlay.svelte
@@ -1,24 +1,27 @@
 <script>
   import { onMount } from "svelte"
   import { DNDPlaceholderID } from "constants"
+  import { domDebounce } from "utils/domDebounce.js"
 
   let left, top, height, width
 
-  onMount(() => {
-    const interval = setInterval(() => {
-      const node = document.getElementById(DNDPlaceholderID)
-      if (!node) {
-        height = 0
-        width = 0
-      } else {
-        const bounds = node.getBoundingClientRect()
-        left = bounds.left
-        top = bounds.top
-        height = bounds.height
-        width = bounds.width
-      }
-    }, 100)
+  const updatePosition = () => {
+    const node = document.getElementById(DNDPlaceholderID)
+    if (!node) {
+      height = 0
+      width = 0
+    } else {
+      const bounds = node.getBoundingClientRect()
+      left = bounds.left
+      top = bounds.top
+      height = bounds.height
+      width = bounds.width
+    }
+  }
+  const debouncedUpdate = domDebounce(updatePosition)
 
+  onMount(() => {
+    const interval = setInterval(debouncedUpdate, 100)
     return () => {
       clearInterval(interval)
     }