Performances optimizations WIP

src/routes/index.svelte

@@ -29,32 +29,29 @@
         site,
         currentLocation,
         currentPhotos,
-        pageReady
+        pageReady,
+        pageAnimation
     } from 'utils/store'
     import { charsToSpan, smoothScroll } from 'utils/functions'
     // Dependencies
-    import ScrollOut from 'scroll-out'
+    import Lazy from 'svelte-lazy'
     // Components
     import Button from 'atoms/Button'
     import IconGlobeSmall from 'atoms/IconGlobeSmall'
     import IconGlobe from 'atoms/IconGlobe'
-    // import InteractiveGlobe from 'molecules/InteractiveGlobe'
-    // import Carousel from 'organisms/Carousel'
-    // import Fullscreen from 'organisms/Fullscreen'
-    // import Locations from 'organisms/Locations'
+    import InteractiveGlobe from 'molecules/InteractiveGlobe'
+    import Carousel from 'organisms/Carousel'
+    import Fullscreen from 'organisms/Fullscreen'
+    import Locations from 'organisms/Locations'
     import Footer from 'organisms/Footer'
     import SocialMetas from 'utils/SocialMetas'
-    import Transition from 'utils/Transition'
     // Animations
     import { animateIn } from 'animations/index'
+    pageAnimation.set(animateIn)
 
     // Props and Variables
     export let photos = ''
     const { page } = stores()
-    let Carousel
-    let Fullscreen
-    let InteractiveGlobe
-    let Locations
 
     // Reset current location if existing
     currentLocation.set()
@@ -64,13 +61,7 @@
     /*
     ** Run code when mounted
     */
-    onMount(async () => {
-        // Load components
-        await import('organisms/Carousel').then(module => Carousel = module.default)
-        await import('organisms/Fullscreen').then(module => Fullscreen = module.default)
-        await import('molecules/InteractiveGlobe').then(module => InteractiveGlobe = module.default)
-        await import('organisms/Locations').then(module => Locations = module.default)
-
+    onMount(() => {
         // Page is loaded
         pageReady.set(true)
     })
@@ -87,7 +78,7 @@
     />
 </svelte:head>
 
-<Transition animateIn={animateIn}>
+<main class="housesof" class:is-transitioning={!$pageReady}>
     <section class="intro">
         <div class="anim-mask">
             <div class="anim title-parallax" id="title-houses">
@@ -108,10 +99,8 @@
         </div>
 
         <div id="intro-carousel">
-            <!-- <Carousel {photos} locationUrl={true} /> -->
-            <svelte:component this={Carousel} {photos} locationUrl={true} />
-            <!-- <Fullscreen /> -->
-            <svelte:component this={Fullscreen} />
+            <Carousel {photos} locationUrl={true} />
+            <Fullscreen />
         </div>
     </section>
 
@@ -126,8 +115,11 @@
             <p>{$site.explore_globe}</p>
         </div>
 
-        <!-- <InteractiveGlobe /> -->
-        <!-- <svelte:component this={InteractiveGlobe} /> -->
+        {#if process.browser}
+        <Lazy offset={window.innerHeight}>
+            <InteractiveGlobe />
+        </Lazy>
+        {/if}
 
         <div class="anim-mask anim-title">
             <h1 class="title-massive title-parallax" id="title-world" aria-label="World">
@@ -135,9 +127,8 @@
             </h1>
         </div>
 
-        <!-- <Locations /> -->
-        <svelte:component this={Locations} />
+        <Locations />
     </section>
 
     <Footer />
-</Transition>
+</main>