From 18c2b1b16d28597e52a1f41935425c8a0a0bd28f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sun, 10 Jul 2022 12:51:19 +0200
Subject: [PATCH] Fix Globe appearing when changing page?!

Apparently the globe was running too early and would not show up from a page to another
Waiting for the page transition is helping
Thanks Baptiste!
---
 .../organisms/InteractiveGlobe.svelte         | 38 +++++++++++--------
 src/modules/globe/index.js                    |  1 +
 src/style/modules/_globe.scss                 | 10 +++++
 3 files changed, 33 insertions(+), 16 deletions(-)

diff --git a/src/components/organisms/InteractiveGlobe.svelte b/src/components/organisms/InteractiveGlobe.svelte
index e69c045..bc017f1 100644
--- a/src/components/organisms/InteractiveGlobe.svelte
+++ b/src/components/organisms/InteractiveGlobe.svelte
@@ -3,7 +3,7 @@
 </style>
 
 <script lang="ts">
-    import { onMount, onDestroy, getContext } from 'svelte'
+    import { onMount, getContext } from 'svelte'
     import { getPosition, getRandomItem } from '$utils/functions'
 
     export let type: string = undefined
@@ -11,6 +11,7 @@
     export let scrollSmooth: number = 0.5
     export let opacity: number = 1
 
+    let InteractiveGlobe: any
     let globeEl: HTMLElement
     let observer: IntersectionObserver
     let globe: any
@@ -54,15 +55,16 @@
 
     // On resize
     const handleResize = () => {
-        if (globeEl) {
+        if (globeEl && globe) {
             containerTop = getPosition(globeEl).top
             containerHeight = globeEl.clientHeight
+
+            requestAnimationFrame(() => {
+                globe.resize()
+                globe.update()
+                handleScroll()
+            })
         }
-        if (globe) {
-            globe.resize()
-            globe.update()
-        }
-        handleScroll()
     }
 
 
@@ -88,17 +90,23 @@
 
         // Run the globe
         update()
-        handleResize()
+        setTimeout(() => {
+            handleResize()
+            handleScroll()
+        }, 1000)
+
 
         // Enable/Disable the globe when shown/hidden
+        const globeCanvas = document.querySelector('.globe-canvas')
+
         observer = new IntersectionObserver(entries => {
             entries.forEach(({ isIntersecting }: IntersectionObserverEntry) => {
                 if (isIntersecting) {
                     globe.enable()
-                    console.log('globe: IO enable')
+                    globeCanvas.classList.remove('is-hidden')
                 } else {
                     globe.disable()
-                    console.log('globe: IO disable')
+                    globeCanvas.classList.add('is-hidden')
                 }
             })
         }, {
@@ -106,14 +114,12 @@
             rootMargin: '0px 0px 0px'
         })
         observer.observe(globeEl)
-    })
 
 
-    /*
-    ** Destroy when unmounted
-    */
-    onDestroy(() => {
-        globe && globe.destroy()
+        // Destroy
+        return () => {
+            globe && globe.destroy()
+        }
     })
 </script>
 
diff --git a/src/modules/globe/index.js b/src/modules/globe/index.js
index 39dac6f..c76527e 100644
--- a/src/modules/globe/index.js
+++ b/src/modules/globe/index.js
@@ -81,6 +81,7 @@ class WebglGlobe {
         // we put the canvas at the end of body tag as 'position:fixed'
         // this is to avoid having a too big canvas if the globe needs to be very large:
         // so instead we move the globe as we scroll
+        this.renderer.canvas.classList.add('globe-canvas')
         this.renderer.canvas.style.position = 'fixed'
         this.renderer.canvas.style.top  = 0
         this.renderer.canvas.style.left = 0
diff --git a/src/style/modules/_globe.scss b/src/style/modules/_globe.scss
index 74553c8..2b80636 100644
--- a/src/style/modules/_globe.scss
+++ b/src/style/modules/_globe.scss
@@ -51,6 +51,16 @@
     }
 }
 
+// Canvas
+:global(.globe-canvas) {
+    transition: opacity 0.2s var(--ease-quart);
+
+    // Hidden state
+    &:global(.is-hidden) {
+        opacity: 0;
+        transform: translate3d(0, 24px, 0);
+    }
+}
 
 /*
 ** Markers