totole/sapper
1
0
Fork 0
mirror of https://github.com/kevin-DL/sapper.git synced 2026-01-14 03:54:46 +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: {};
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 <head> 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),

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);
});
});
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', () => {