From 3c4ebcda30d807c05238d89ef498fe89e4f443b5 Mon Sep 17 00:00:00 2001
From: Rich Harris <richard.a.harris@gmail.com>
Date: Sun, 24 Dec 2017 20:37:00 -0500
Subject: [PATCH] cancel navigation if overtaken by a second navigation - fixes
 #48

---
 runtime/app.js                       |  8 +++++--
 test/app/routes/_components/Nav.html |  8 +++----
 test/app/routes/slow-preload.html    | 11 +++++++++
 test/common/test.js                  | 34 ++++++++++++++++++++++++++++
 4 files changed, 54 insertions(+), 7 deletions(-)
 create mode 100644 test/app/routes/slow-preload.html

diff --git a/runtime/app.js b/runtime/app.js
index 0d89421d4..1654bca79 100644
--- a/runtime/app.js
+++ b/runtime/app.js
@@ -35,10 +35,14 @@ function select_route(url) {
 	}
 }
 
-function render(Component, data, scroll) {
+let current_token;
+
+function render(Component, data, scroll, token) {
 	Promise.resolve(
 		Component.preload ? Component.preload(data) : {}
 	).then(preloaded => {
+		if (current_token !== token) return;
+
 		if (component) {
 			component.destroy();
 		} else {
@@ -83,7 +87,7 @@ function navigate(url, id) {
 		}
 
 		selected.route.load().then(mod => {
-			render(mod.default, selected.data, scroll_history[id]);
+			render(mod.default, selected.data, scroll_history[id], current_token = {});
 		});
 
 		cid = id;
diff --git a/test/app/routes/_components/Nav.html b/test/app/routes/_components/Nav.html
index 48d894554..d17c64687 100644
--- a/test/app/routes/_components/Nav.html
+++ b/test/app/routes/_components/Nav.html
@@ -1,10 +1,8 @@
 <nav>
 	<ul>
-		<li><a class='{{page === "home"  ? "selected" : ""}}' href='/'>home</a></li>
-		<li><a class='{{page === "about"  ? "selected" : ""}}' href='/about'>about</a></li>
-
-		<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches
-		     the blog data when we hover over the link or tap it on a touchscreen -->
+		<li><a href='/'>home</a></li>
+		<li><a href='/about'>about</a></li>
+		<li><a href='/slow-preload'>slow preload</a></li>
 		<li><a rel=prefetch class='{{page === "blog"  ? "selected" : ""}}' href='/blog'>blog</a></li>
 	</ul>
 </nav>
diff --git a/test/app/routes/slow-preload.html b/test/app/routes/slow-preload.html
new file mode 100644
index 000000000..f445da618
--- /dev/null
+++ b/test/app/routes/slow-preload.html
@@ -0,0 +1,11 @@
+<h1>This page should never render</h1>
+
+<script>
+	export default {
+		preload() {
+			return new Promise(fulfil => {
+				window.fulfil = fulfil;
+			});
+		}
+	};
+</script>
\ No newline at end of file
diff --git a/test/common/test.js b/test/common/test.js
index c8a0cfa03..b945d7625 100644
--- a/test/common/test.js
+++ b/test/common/test.js
@@ -208,6 +208,40 @@ function run(env) {
 
 				assert.ok(scrollY > 0, scrollY);
 			});
+
+			it('cancels navigation if subsequent navigation occurs during preload', async () => {
+				await nightmare
+					.goto(base)
+					.wait(() => window.READY)
+					.click('a[href="/slow-preload"]')
+					.wait(100)
+					.click('a[href="/about"]')
+					.wait(100);
+
+				assert.equal(
+					await nightmare.path(),
+					'/about'
+				);
+
+				assert.equal(
+					await nightmare.evaluate(() => document.querySelector('h1').textContent),
+					'About this site'
+				);
+
+				await nightmare
+					.evaluate(() => window.fulfil({}))
+					.wait(100);
+
+				assert.equal(
+					await nightmare.path(),
+					'/about'
+				);
+
+				assert.equal(
+					await nightmare.evaluate(() => document.querySelector('h1').textContent),
+					'About this site'
+				);
+			});
 		});
 
 		describe('headers', () => {