totole/sapper
1
0
Fork 0
mirror of https://github.com/kevin-DL/sapper.git synced 2026-01-22 07:05:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

set preloading: true when appropriate

Browse Source
This commit is contained in:
Rich Harris
2018-05-04 23:23:41 -04:00
parent 3becc1cbe2
commit 971342ac7a
3 changed files with 45 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/runtime/index.ts
View File

@@ -49,13 +49,20 @@ function select_route(url: URL): Target {
} }
} }
let first_load = true;
let current_token: {}; let current_token: {};
function render(Page: ComponentConstructor, props: any, scroll: ScrollPosition, token: {}) { function render(Page: ComponentConstructor, props: any, scroll: ScrollPosition, token: {}) {
if (current_token !== token) return; 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 <head> contents // first load — remove SSR'd <head> contents
const start = document.querySelector('#sapper-head-start'); const start = document.querySelector('#sapper-head-start');
const end = document.querySelector('#sapper-head-end'); const end = document.querySelector('#sapper-head-end');
@@ -68,20 +75,10 @@ function render(Page: ComponentConstructor, props: any, scroll: ScrollPosition,
component = new App({ component = new App({
target, target,
data: { data,
Page,
props
},
store, store,
hydrate: true hydrate: true
}); });
first_load = false;
} else {
component.set({
Page,
props
});
} }
if (scroll) { if (scroll) {
@@ -101,6 +98,12 @@ function prepare_route(Page: ComponentConstructor, props: RouteData) {
return { Page, props: Object.assign(props, manifest.preloaded), redirect, error }; return { Page, props: Object.assign(props, manifest.preloaded), redirect, error };
} }
if (component) {
component.set({
preloading: true
});
}
return Promise.resolve(Page.preload.call({ return Promise.resolve(Page.preload.call({
store, store,
fetch: (url: string, opts?: any) => window.fetch(url, opts), fetch: (url: string, opts?: any) => window.fetch(url, opts),

7
test/app/app/App.html
View File

@@ -1 +1,6 @@
<svelte:component this={Page} {...props}/> {#if preloading}
<progress class='preloading-progress' value=0.5/>
{/if}
<svelte:component this={Page} {...props}/>

23
test/common/test.js
View File

@@ -574,6 +574,29 @@ function run({ mode, basepath = '' }) {
assert.ok(html.indexOf('service-worker.js') !== -1); 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', () => { describe('headers', () => {