From f2ccb6b840d18152e0a73ef39e85fe1c61739fba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Henrik=20T=C3=B8n=20L=C3=B8vhaug?=
 <henrik.lovhaug@gmail.com>
Date: Thu, 9 Jan 2025 20:43:05 +0100
Subject: [PATCH] Add resize reset

---
 frontend/src/components/Container.svelte | 31 ++++++++++++++++++------
 1 file changed, 23 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/Container.svelte b/frontend/src/components/Container.svelte
index 8d5f4c0..5efd5f1 100644
--- a/frontend/src/components/Container.svelte
+++ b/frontend/src/components/Container.svelte
@@ -14,21 +14,36 @@
   let width = $state(0);
   let height = $state(0);
 
-  const resize = () => {
-    width = image?.getBoundingClientRect().width ?? 0;
-    height = image?.getBoundingClientRect().height ?? 0;
-  };
+  let debounce: number | null = $state(null);
 
-  onMount(() => {
+  const connect = () => {
     ws = new WebSocket("/ws");
+
     ws.onmessage = (event) => {
       const data = JSON.parse(event.data);
       for (const tracker of data) {
-        tracker.x *= width
-        tracker.y *= height
-        }
+        tracker.x *= width;
+        tracker.y *= height;
+      }
       trackers = data;
     };
+  };
+
+  const resize = () => {
+    width = image?.getBoundingClientRect().width ?? 0;
+    height = image?.getBoundingClientRect().height ?? 0;
+
+    if (debounce) {
+      clearTimeout(debounce);
+    }
+
+    debounce = setTimeout(() => {
+      connect();
+    }, 200);
+  };
+
+  onMount(() => {
+    connect();
 
     width = image?.getBoundingClientRect().width ?? 0;
     height = image?.getBoundingClientRect().height ?? 0;