Félix Péault
dd57ea968e
Might fix all the issues so far! - start page loading on entering page transition start - scroll back to top on leaving page transition end
33 lines
1.0 KiB
Svelte
33 lines
1.0 KiB
Svelte
<script lang="ts">
|
|
import { page } from '$app/stores'
|
|
import { afterUpdate } from 'svelte'
|
|
import { fade } from 'svelte/transition'
|
|
import { scrollToTop } from '$utils/functions'
|
|
import { pageLoading } from '$utils/stores'
|
|
import { DELAY, DURATION } from '$utils/constants'
|
|
|
|
let loadingTimeout: ReturnType<typeof setTimeout> | number = null
|
|
|
|
$: doNotScroll = !$page.url.searchParams.get('country') && !$page.url.pathname.includes('/shop/')
|
|
|
|
// Hide page loading indicator on page update
|
|
afterUpdate(() => {
|
|
clearTimeout(loadingTimeout)
|
|
loadingTimeout = setTimeout(() => $pageLoading = false, DURATION.PAGE_IN)
|
|
})
|
|
</script>
|
|
|
|
<div class="page"
|
|
in:fade={{ duration: DURATION.PAGE_IN, delay: DELAY.PAGE_LOADING }}
|
|
out:fade={{ duration: DURATION.PAGE_OUT }}
|
|
on:outrostart={() => {
|
|
// Show page loading indicator
|
|
$pageLoading = true
|
|
}}
|
|
on:outroend={() => {
|
|
// Scroll back to top
|
|
doNotScroll && requestAnimationFrame(() => scrollToTop())
|
|
}}
|
|
>
|
|
<slot />
|
|
</div> |