From fa056d09330227117a8bb36c42e87586139179a6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Tue, 19 Jul 2022 12:36:51 +0200
Subject: [PATCH] Update resize method and debounce it on component

---
 src/components/organisms/InteractiveGlobe2.svelte | 6 +++---
 src/modules/globe2/index.ts                       | 2 ++
 2 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/organisms/InteractiveGlobe2.svelte b/src/components/organisms/InteractiveGlobe2.svelte
index 6ec8dc2..a25bbd5 100644
--- a/src/components/organisms/InteractiveGlobe2.svelte
+++ b/src/components/organisms/InteractiveGlobe2.svelte
@@ -7,7 +7,7 @@
     import { fly } from 'svelte/transition'
     import { quartOut } from 'svelte/easing'
     import { Globe, type Marker } from '$modules/globe2'
-    import { getRandomItem } from '$utils/functions'
+    import { getRandomItem, debounce } from '$utils/functions'
     // Components
     import Image from '$components/atoms/Image.svelte'
 
@@ -90,9 +90,9 @@
     }
 
     // Resize
-    const resize = () => {
+    const resize = debounce(() => {
         globe.resize()
-    }
+    }, 100)
 
     // Destroy
     const destroy = () => {
diff --git a/src/modules/globe2/index.ts b/src/modules/globe2/index.ts
index 662d58d..fc2c87b 100644
--- a/src/modules/globe2/index.ts
+++ b/src/modules/globe2/index.ts
@@ -210,6 +210,8 @@ export class Globe {
      */
     resize () {
         // this.renderer.setSize(window.innerWidth, window.innerHeight)
+        this.width = this.el.offsetWidth
+        this.height = this.el.offsetHeight
         this.renderer.setSize(this.width, this.height)
         this.camera.perspective({
             aspect: this.gl.canvas.width / this.gl.canvas.height