🐛 Setup page transitions

Bugged for some reason, the old page stays before the new page loading at the end

src/routes/[country]/[location]/index.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
     import { page } from '$app/stores'
     import { getAssetUrlKey } from '$utils/helpers'
+    import { fade } from 'svelte/transition'
     import dayjs from 'dayjs'
     import advancedFormat from 'dayjs/plugin/advancedFormat.js'
     import relativeTime from 'dayjs/plugin/relativeTime.js'
+    import { DURATION } from '$utils/contants'
     // Components
     import Metas from '$components/Metas.svelte'
     import Icon from '$components/atoms/Icon.svelte'
@@ -95,14 +97,11 @@
 />
 
 
-<main class="location-page">
-    <section class="location-page__intro grid"
-        style="
-            --illus-desktop: url({getAssetUrlKey(hasIllustration && location.illustration_desktop.id, 'illustration-desktop-1x')});
-            --illus-desktop-2x: url({getAssetUrlKey(hasIllustration && location.illustration_desktop_2x.id, 'illustration-desktop-2x')});
-            --illus-mobile: url({getAssetUrlKey(hasIllustration && location.illustration_mobile.id, 'illustration-mobile')});
-        "
-    >
+
+<main class="location-page"
+    in:fade={{ duration: DURATION.PAGE_IN, delay: DURATION.PAGE_OUT }}
+    out:fade={{ duration: DURATION.PAGE_OUT }}
+>
         <h1 class="title">
             <span class="housesof">
                 <strong>Houses</strong>
@@ -155,7 +154,16 @@
             </div>
         </div>
 
-        <div class="location-page__illustration" />
+        <div class="location-page__illustration"
+            style="
+                --illus-desktop: url({getAssetUrlKey(hasIllustration && location.illustration_desktop.id, 'illustration-desktop-1x')});
+                --illus-desktop-2x: url({getAssetUrlKey(hasIllustration && location.illustration_desktop_2x.id, 'illustration-desktop-2x')});
+                --illus-mobile: url({getAssetUrlKey(hasIllustration && location.illustration_mobile.id, 'illustration-mobile')});
+                --parallax-y: {illustrationOffsetY}px;
+            "
+        >
+            <div />
+        </div>
     </section>
 
     {#if photos.length}
@@ -174,7 +182,7 @@
                         </p>
                     </div>
                     <figure class="house__photo">
-                        <a href="/{params.country}/{params.location}/{slug}">
+                        <a href="/{params.country}/{params.location}/{slug}" sveltekit:prefetch sveltekit:noscroll>
                             <Image
                                 id={id}
                                 sizeKey="photo-list"