set preloading: true when appropriate

Rich-Harris · Rich-Harris · commit 971342ac7a22 · 2018-05-04T23:23:41.000-04:00
diff --git 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 <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),
diff --git a/test/app/app/App.html b/test/app/app/App.html
@@ -1 +1,6 @@
-<svelte:component this={Page} {...props}/>
+{#if preloading}
+	<progress class='preloading-progress' value=0.5/>
+{/if}
+
+<svelte:component this={Page} {...props}/>
+
diff --git 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', () => {
