Globe: Add more props settings, Randomly position globe to a continent

- Add a little delay before restarting the rotation when hovering a marker

src/molecules/InteractiveGlobe.svelte

@@ -1,7 +1,7 @@
 <script>
     import { onMount, onDestroy } from 'svelte'
     import { continents, locations } from 'utils/store'
-    import { getPosition } from 'utils/functions'
+    import { getPosition, getRandomArrayItem } from 'utils/functions'
     // Dependencies
     import ScrollOut from 'scroll-out'
     import Lazy from 'svelte-lazy'
@@ -9,10 +9,12 @@
     // Props
     export let type = ''
     export let size = 0.575
+    export let autoRotate = true
     let scope
     let globe
     let containerTop = 0
     let containerHeight = 0
+    $: randomRotationPosition = getRandomArrayItem($continents.filter(continent => continent.countries)).rotation_position
 
 
     /*
@@ -42,23 +44,20 @@
     }
 
 
-    onDestroy(async ()=>{
-        globe && globe.destroy()
-    })
-
     /*
     ** Run code when mounted
     */
     onMount(async () => {
-        let InteractiveGlobe
         // Import libraries and code
+        let InteractiveGlobe
         await import('globe/index').then(module => InteractiveGlobe = module.default)
+
         // Init the globe from library
         globe = new InteractiveGlobe({
             el: scope,
             cameraDistance: size, // Smaller number == larger globe
-            autoRotationSpeed: -0.0025,
-            rotationStart: 90, //in degrees
+            autoRotationSpeed: autoRotate ? -0.0025 : 0,
+            rotationStart: randomRotationPosition, // In degrees
             scrollSmoothing: 0.5,
             texture: `/img/globe/map-${window.innerWidth > 1440 && window.devicePixelRatio > 1  ? '4k' : '2k'}.png`,
             markers: [ ...$locations.map(location => {
@@ -72,25 +71,29 @@
                     className: location.close ? 'is-close' : '',
                 }
             }) ],
-            centerPositions: [ ...$continents.map(continent => continent.countries) ],
             onLinkClicked: () => {  }
         })
 
         // Run the globe
         onResize()
         update()
+        onScroll()
 
-        // Enable the globe only when shown
+        // Enable/Disable the globe when shown/hidden
         const globeScroll = ScrollOut({
-            once: false,
             targets: scope,
-            onShown: () => {
-                globe.enable()
-                onScroll()
-            },
+            onShown: () => globe.enable(),
             onHidden: () => globe.disable()
         })
     })
+
+
+    /*
+    ** Destroy when unmounted
+    */
+    onDestroy(() => {
+        globe && globe.destroy()
+    })
 </script>
 
 <svelte:window on:resize={onResize} on:scroll={onScroll} />