From 8c1c84e9aa9990ca657a1f8257c1f030c852d1d3 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 17 Oct 2022 08:48:32 +0100
Subject: [PATCH] Use requestAnimationFrame for DND overlay placeholder updates
 to further improve performance

---
 .../preview/DNDPlaceholderOverlay.svelte      | 31 ++++++++++---------
 1 file changed, 17 insertions(+), 14 deletions(-)

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)
     }