pinafore/src/routes/_components/LazyPage.html
Nolan Lawson 4bd181d3cc
fix: update Sapper to latest (#775)
* fix: update to latest sapper

fixes #416

* fix error and debug pages

* requestIdleCallback makes column switching feel way nicer than double rAF

* add export feature

* add better csp info

* workaround for sapper sub-page issue

* clarify in readme about exporting

* fix now config

* switch from rIC to triple raf

* style-loader is no longer used

* update theming guide
2018-12-11 07:31:48 -08:00

26 lines
843 B
HTML

{#if revealed}
<svelte:component this={pageComponent} {params} />
{/if}
<script>
import { doubleRAF } from '../_utils/doubleRAF'
// On the very first page load, avoid doing a "reveal" because
// it leads to a flash between when the SSR is shown, the two frame we hide it,
// and then when we show it again.
//
// We only really need LazyPage behavior when the user is clicking around
// after the page has loaded, to improve input responsiveness.
let firstTime = true
export default {
oncreate () {
firstTime = false
// Yes, triple raf. This is to ensure the NavItem animation plays before we
// start rendering the new page.
doubleRAF(() => requestAnimationFrame(() => this.set({ revealed: true })))
},
data: () => ({
revealed: !process.browser || firstTime
})
}
</script>