diff --git a/src/runtime/index.ts b/src/runtime/index.ts index 7dcc036..9575b74 100644 --- a/src/runtime/index.ts +++ b/src/runtime/index.ts @@ -49,13 +49,20 @@ function select_route(url: URL): Target { } } -let first_load = true; let current_token: {}; function render(Page: ComponentConstructor, props: any, scroll: ScrollPosition, token: {}) { if (current_token !== token) return; - if (first_load) { + const data = { + Page, + props, + preloading: false + }; + + if (component) { + component.set(data); + } else { // first load — remove SSR'd contents const start = document.querySelector('#sapper-head-start'); const end = document.querySelector('#sapper-head-end'); @@ -68,20 +75,10 @@ function render(Page: ComponentConstructor, props: any, scroll: ScrollPosition, component = new App({ target, - data: { - Page, - props - }, + data, store, hydrate: true }); - - first_load = false; - } else { - component.set({ - Page, - props - }); } if (scroll) { @@ -101,6 +98,12 @@ function prepare_route(Page: ComponentConstructor, props: RouteData) { return { Page, props: Object.assign(props, manifest.preloaded), redirect, error }; } + if (component) { + component.set({ + preloading: true + }); + } + return Promise.resolve(Page.preload.call({ store, fetch: (url: string, opts?: any) => window.fetch(url, opts), diff --git a/test/app/app/App.html b/test/app/app/App.html index 759f7ba..a7bf15f 100644 --- a/test/app/app/App.html +++ b/test/app/app/App.html @@ -1 +1,6 @@ - \ No newline at end of file +{#if preloading} + +{/if} + + + diff --git a/test/common/test.js b/test/common/test.js index 5e667dd..2ed5311 100644 --- a/test/common/test.js +++ b/test/common/test.js @@ -574,6 +574,29 @@ function run({ mode, basepath = '' }) { assert.ok(html.indexOf('service-worker.js') !== -1); }); }); + + it('sets preloading true when appropriate', () => { + return nightmare + .goto(base) + .init() + .click('a[href="slow-preload"]') + .wait(100) + .evaluate(() => { + const progress = document.querySelector('progress'); + return !!progress; + }) + .then(hasProgressIndicator => { + assert.ok(hasProgressIndicator); + }) + .then(() => nightmare.evaluate(() => window.fulfil())) + .then(() => nightmare.evaluate(() => { + const progress = document.querySelector('progress'); + return !!progress; + })) + .then(hasProgressIndicator => { + assert.ok(!hasProgressIndicator); + }); + }); }); describe('headers', () => {