From 8ccdac64d3701e14f38e6f6ec18b73cc63ba8edd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Thu, 20 Feb 2020 19:01:54 +0100
Subject: [PATCH] Use Lazy Loading for photos

---
 src/molecules/Photo.svelte                    | 56 ++++++++++---------
 .../location/[country]/[location].svelte      |  1 +
 2 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/src/molecules/Photo.svelte b/src/molecules/Photo.svelte
index 5d2e588..19c2d31 100644
--- a/src/molecules/Photo.svelte
+++ b/src/molecules/Photo.svelte
@@ -1,10 +1,11 @@
 <script>
     import { onMount } from 'svelte'
+    import { fly } from 'svelte/transition'
+    import { quartOut } from 'svelte/easing'
     import { site, currentLocation } from '../store'
     import * as fn from '../functions'
 
     // Dependencies
-    import AOS from 'aos'
     import * as basicScroll from 'basicscroll'
     import dayjs from 'dayjs'
     import advancedFormat from 'dayjs/plugin/advancedFormat'
@@ -14,6 +15,10 @@
     export let index
     export let photo
 
+    // Default size for the image
+    const defaultWidth = 900
+    const defaultHeight = Math.ceil(defaultWidth / 1.5)
+
     // Shortcut current location
     let location
     $: location = $currentLocation.location
@@ -23,30 +28,26 @@
 	** Run code on browser only
 	*/
 	onMount(() => {
-		// Scroll apparitions
-		if (process.browser) {
-			AOS.init()
-        }
-
         // Parallax on photos
-		document.querySelectorAll('.photos .photo').forEach(photo => {
-			const parallaxNumber = basicScroll.default.create({
-				elem: photo.querySelector('.photo__image--number'),
-				direct: true,
-				from: photo.getBoundingClientRect().top * 0.25,
-				to: photo.getBoundingClientRect().bottom * 0.92,
-				props: {
-					'--translate': {
-						from: '-75%',
-						to: '-25%'
-					}
-				}
-			}).start()
-		})
+        document.querySelectorAll('.photos .photo').forEach(photo => {
+            const parallaxNumber = basicScroll.default.create({
+                elem: photo.querySelector('.photo__image--number'),
+                direct: true,
+                from: photo.getBoundingClientRect().top * 0.25,
+                to: photo.getBoundingClientRect().bottom * 0.92,
+                props: {
+                    '--translate': {
+                        from: '-75%',
+                        to: '-25%'
+                    }
+                }
+            })
+            parallaxNumber.start()
+        })
     })
 </script>
 
-<div class="photo">
+<div class="photo" transition:fly="{{ y: 40, duration: 1000, easing: quartOut }}">
     <div class="photo__location wrap">
         <div class="wrapper">
             <h2 class="title-location">{photo.name.replace(', ', ',\n')}</h2>
@@ -58,11 +59,14 @@
         <div class="align">
             <a href="/viewer/{location.country.slug}/{location.slug}/{photo.slug}">
                 <picture class="photo__image--img">
-                    <source media="(min-width: 992px)" srcset={fn.getThumbnail(photo.image.private_hash, 1300)}>
-                    <source media="(min-width: 768px)" srcset={fn.getThumbnail(photo.image.private_hash, 992)}>
-                    <source media="(min-width: 500px)" srcset={fn.getThumbnail(photo.image.private_hash, 650)}>
-                    <source media="(min-width: 300px)" srcset={fn.getThumbnail(photo.image.private_hash, 400)}>
-                    <img src="{fn.getThumbnail(photo.image.private_hash, 900)}" alt="{photo.name}, {location.region}, {location.country.name}"
+                    <source media="(min-width: 992px)" data-srcset={fn.getThumbnail(photo.image.private_hash, 1300)}>
+                    <source media="(min-width: 768px)" data-srcset={fn.getThumbnail(photo.image.private_hash, 992)}>
+                    <source media="(min-width: 500px)" data-srcset={fn.getThumbnail(photo.image.private_hash, 650)}>
+                    <source media="(min-width: 300px)" data-srcset={fn.getThumbnail(photo.image.private_hash, 400)}>
+                    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/+HRfwAJmQPS6gISLwAAAABJRU5ErkJggg=="
+                        width={defaultWidth} height={defaultHeight}
+                        data-src="{fn.getThumbnail(photo.image.private_hash, 900)}" alt="{photo.name}, {location.region}, {location.country.name}"
+                        class="lazyload"
                         data-aos="scale-down-fade-in"
                     >
                 </picture>
diff --git a/src/routes/location/[country]/[location].svelte b/src/routes/location/[country]/[location].svelte
index cf6155f..880e946 100644
--- a/src/routes/location/[country]/[location].svelte
+++ b/src/routes/location/[country]/[location].svelte
@@ -19,6 +19,7 @@
 	import { onMount } from 'svelte'
 
 	// Dependencies
+	import 'lazysizes'
 	import dayjs from 'dayjs'
 	import advancedFormat from 'dayjs/plugin/advancedFormat'
 	import relativeTime from 'dayjs/plugin/relativeTime'