From f8fe14150584f611c11655a50d77efca08c6dafb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Tue, 30 Nov 2021 00:23:36 +0100
Subject: [PATCH] Use page transition component to avoid repetition on main

---
 src/components/PageTransition.svelte         | 14 ++++++++++++++
 src/routes/[country]/[location]/index.svelte |  6 +-----
 src/routes/__layout.svelte                   |  7 +++++--
 src/routes/credits.svelte                    |  7 +------
 src/routes/index.svelte                      |  7 +------
 src/routes/locations.svelte                  |  7 +------
 src/routes/photos.svelte                     |  8 ++------
 src/routes/shop/__layout.svelte              |  7 +------
 src/routes/subscribe.svelte                  |  9 ++-------
 9 files changed, 28 insertions(+), 44 deletions(-)
 create mode 100644 src/components/PageTransition.svelte

diff --git a/src/components/PageTransition.svelte b/src/components/PageTransition.svelte
new file mode 100644
index 0000000..8f86f23
--- /dev/null
+++ b/src/components/PageTransition.svelte
@@ -0,0 +1,14 @@
+<script lang="ts">
+    import { fade } from 'svelte/transition'
+
+    export let refresh = ''
+</script>
+
+{#key refresh}
+<div
+    in:fade={{ duration: 400, delay: 500 }}
+    out:fade={{ duration: 400 }}
+>
+    <slot />
+</div>
+{/key}
\ No newline at end of file
diff --git a/src/routes/[country]/[location]/index.svelte b/src/routes/[country]/[location]/index.svelte
index 2372b89..8de723c 100644
--- a/src/routes/[country]/[location]/index.svelte
+++ b/src/routes/[country]/[location]/index.svelte
@@ -1,7 +1,6 @@
 <script lang="ts">
     import { navigating, page } from '$app/stores'
     import { onMount } from 'svelte'
-    import { fade } from 'svelte/transition'
     import anime from 'animejs'
     import dayjs from 'dayjs'
     import advancedFormat from 'dayjs/plugin/advancedFormat.js'
@@ -192,10 +191,7 @@
 <svelte:window bind:scrollY />
 
 
-<main class="location-page"
-    in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_OUT }}
-    out:fade={{ duration: DURATION.PAGE_OUT }}
->
+<main class="location-page">
     <section class="location-page__intro grid" bind:this={introEl}>
         <h1 class="title" class:is-short={location.name.length <= 4}>
             <span class="housesof mask">
diff --git a/src/routes/__layout.svelte b/src/routes/__layout.svelte
index 630e5f1..02b4e8a 100644
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@@ -8,6 +8,7 @@
     import '$utils/polyfills'
     // Components
     import SVGSprite from '$components/SVGSprite.svelte'
+    import PageTransition from '$components/PageTransition.svelte'
     import Switcher from '$components/molecules/Switcher.svelte'
     import Footer from '$components/organisms/Footer.svelte'
 
@@ -47,7 +48,7 @@
                 if (!$page.query.get('country') && !$page.path.includes('/shop/poster')) {
                     scrollToTop()
                 }
-            }, DURATION.PAGE_OUT * 1.5)
+            }, DURATION.PAGE_OUT + 1)
         }
     })
 
@@ -59,7 +60,9 @@
 
 <Switcher isOver={!!$page.params.location && !!$page.params.photo} />
 
-<slot />
+<PageTransition refresh={$page.path}>
+    <slot />
+</PageTransition>
 
 {#if !$page.params.photo}
     <Footer />
diff --git a/src/routes/credits.svelte b/src/routes/credits.svelte
index e8a8dd7..7c95b9c 100644
--- a/src/routes/credits.svelte
+++ b/src/routes/credits.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-    import { fade } from 'svelte/transition'
-    import { DURATION } from '$utils/contants'
     // Components
     import Metas from '$components/Metas.svelte'
     import SiteTitle from '$components/atoms/SiteTitle.svelte'
@@ -16,10 +14,7 @@
 />
 
 
-<main class="credits"
-    in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_OUT }}
-    out:fade={{ duration: DURATION.PAGE_OUT }}
->
+<main class="credits">
     <section class="credits__heading">
         <SiteTitle variant="inline" />
         <p class="text-medium">{data.credits.text}</p>
diff --git a/src/routes/index.svelte b/src/routes/index.svelte
index 7babe23..2d5b49d 100644
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@@ -1,9 +1,7 @@
 <script lang="ts">
     import { getContext, onMount } from 'svelte'
-    import { fade } from 'svelte/transition'
     import { page } from '$app/stores'
     import anime from 'animejs'
-    import { DURATION } from '$utils/contants'
     // Components
     import Metas from '$components/Metas.svelte'
     import SplitText from '$components/SplitText.svelte'
@@ -64,10 +62,7 @@
     image=""
 />
 
-<main class="homepage"
-    in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_OUT }}
-    out:fade={{ duration: DURATION.PAGE_OUT }}
->
+<main class="homepage">
     <section class="homepage__intro">
         <ScrollingTitle
             tag="h1"
diff --git a/src/routes/locations.svelte b/src/routes/locations.svelte
index 77f769c..a0d76d4 100644
--- a/src/routes/locations.svelte
+++ b/src/routes/locations.svelte
@@ -1,7 +1,5 @@
 <script lang="ts">
     import { getContext } from 'svelte'
-    import { fade } from 'svelte/transition'
-    import { DURATION } from '$utils/contants'
     // Components
     import Metas from '$components/Metas.svelte'
     import InteractiveGlobe from '$components/organisms/InteractiveGlobe.svelte'
@@ -19,10 +17,7 @@
     image=""
 />
 
-<main class="explore"
-    in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_OUT }}
-    out:fade={{ duration: DURATION.PAGE_OUT }}
->
+<main class="explore">
     <Heading
         text="Explore the globe to discover unique locations across the world"
     />
diff --git a/src/routes/photos.svelte b/src/routes/photos.svelte
index ebad34d..08a5ab0 100644
--- a/src/routes/photos.svelte
+++ b/src/routes/photos.svelte
@@ -2,13 +2,12 @@
     import { page } from '$app/stores'
     import { goto } from '$app/navigation'
     import { getContext, onMount } from 'svelte'
-    import { fade, fly } from 'svelte/transition'
+    import { fly } from 'svelte/transition'
     import { quartOut } from 'svelte/easing'
     import dayjs from 'dayjs'
     import relativeTime from 'dayjs/plugin/relativeTime.js'
     import anime from 'animejs'
     import { map, lerp, throttle } from '$utils/functions'
-    import { DURATION } from '$utils/contants'
     // Components
     import Metas from '$components/Metas.svelte'
     import SplitText from '$components/SplitText.svelte'
@@ -325,10 +324,7 @@
 />
 
 
-<main class="photos"
-    in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_OUT }}
-    out:fade={{ duration: DURATION.PAGE_OUT }}
->
+<main class="photos">
     <section class="photos__intro"
         class:is-passed={scrolledPastIntro}
     >
diff --git a/src/routes/shop/__layout.svelte b/src/routes/shop/__layout.svelte
index a32dd8a..26eafa3 100644
--- a/src/routes/shop/__layout.svelte
+++ b/src/routes/shop/__layout.svelte
@@ -1,8 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte'
-    import { fade } from 'svelte/transition'
     import { shopLocations, cartOpen, cartNotifications } from '$utils/stores/shop'
-    import { DURATION } from '$utils/contants'
     // Components
     import Metas from '$components/Metas.svelte'
     import SiteTitle from '$components/atoms/SiteTitle.svelte'
@@ -59,10 +57,7 @@
     image=""
 />
 
-<main class="shop-page"
-    in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_OUT }}
-    out:fade={{ duration: DURATION.PAGE_OUT }}
->
+<main class="shop-page">
     <Cart />
 
     <section class="shop-page__intro" bind:this={introEl}>
diff --git a/src/routes/subscribe.svelte b/src/routes/subscribe.svelte
index 512562a..2d33a8c 100644
--- a/src/routes/subscribe.svelte
+++ b/src/routes/subscribe.svelte
@@ -1,7 +1,5 @@
-<script lang="ts">
-    import { fade } from 'svelte/transition'
+<script lang="ts">    import { fade } from 'svelte/transition'
     import dayjs from 'dayjs'
-    import { DURATION } from '$utils/contants'
     // Components
     import Metas from '$components/Metas.svelte'
     import Image from '$components/atoms/Image.svelte'
@@ -18,10 +16,7 @@
     image=""
 />
 
-<main class="subscribe"
-    in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_OUT }}
-    out:fade={{ duration: DURATION.PAGE_OUT }}
->
+<main class="subscribe">
     <Heading
         text="If you wish to be pinged when new photos are added to and limited prints become available on our shop, sign up below."
     />