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!

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
-    ** Destroy when unmounted
+        return () => {
-    */
+            globe && globe.destroy()
-    onDestroy(() => {
+        }
-        globe && globe.destroy()
     })
 </script>
 

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

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