From afed5ce889928ccbff797c9a8c4adc3f808e5262 Mon Sep 17 00:00:00 2001
From: Alexis <35.alexis.pele@gmail.com>
Date: Wed, 7 Aug 2024 14:33:43 +0200
Subject: [PATCH] Added throttle for performance issue

---
 src/pages/index.astro | 55 ++++++++++++++++++++++++++++---------------
 1 file changed, 36 insertions(+), 19 deletions(-)

diff --git a/src/pages/index.astro b/src/pages/index.astro
index 03e0175..3690b40 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -52,28 +52,45 @@ import Layout from '../layouts/Layout.astro';
 </Layout>
 
 <script>
-const shape = document.getElementById('shape')
-const spotlight = document.getElementById('spotlight')
+const shape = document.getElementById('shape');
+const spotlight = document.getElementById('spotlight');
 
-if (shape || spotlight) {
-  document.addEventListener('pointermove', (event) => {
-    const { clientX, clientY } = event;
+/**
+ * 
+ * @param {PointerEvent} event - The event to pass the function
+ */
+function updateSpotlights(event) {
+  const { clientX, clientY } = event;
 
-    if (shape) {
-      shape.animate({
-        left: `${clientX}px`,
-        top: `${clientY}px`
-      }, { duration: 2500, fill: "forwards" })
-    }
+  if (shape) {
+    shape.animate({
+      left: `${clientX}px`,
+      top: `${clientY}px`
+    }, { duration: 2500, fill: "forwards" });
+  }
 
-    if (spotlight) {
-      spotlight.animate({
-        left: `calc(33% + ${clientX / 3}px)`,
-        top: `calc(33% + ${clientY / 3}px)`
-      }, { duration: 2500, fill: "forwards" })
-    }
-  }, { passive: true })
+  if (spotlight) {
+    spotlight.animate({
+      left: `calc(33% + ${clientX / 3}px)`,
+      top: `calc(33% + ${clientY / 3}px)`
+    }, { duration: 2500, fill: "forwards", easing: "ease-in-out" });
+  }
 }
+
+// Throttles the animation to avoid performance issues
+function throttle(cb, wait = 100) {
+  let timeout
+  return function(e) {
+    if (timeout) return;
+    timeout = setTimeout(() => (cb(e), timeout=undefined), wait)
+  }
+}
+
+document.addEventListener('pointermove', throttle((event) => {
+  console.log("proced")
+  requestAnimationFrame(updateSpotlights.bind(updateSpotlights, event))
+}));
+
 </script>
 
 <style lang="scss">
@@ -112,4 +129,4 @@ if (shape || spotlight) {
   aspect-ratio: 1;
   animation: shape-spin 13s infinite;
 }
-</style>
\ No newline at end of file
+</style>