Prevent Route Flickers

src/components/async.js

@@ -1,16 +1,25 @@
 import { h, Component } from 'preact';
 
-export default function(load) {
+function emit(name) {
+	window.dispatchEvent( new Event(name) );
+}
+
+export default function (load) {
 	function Async() {
 		Component.call(this);
+		emit('async-loading');
 		let done = child => {
-			this.setState({ child: child && child.default || child });
+			child = child && child.default;
+			this.setState({ child, ready:!!child });
 		};
 		let r = load(done);
 		if (r && r.then) r.then(done);
 	}
 	Async.prototype = new Component;
 	Async.prototype.constructor = Async;
-	Async.prototype.render = (props, state) => h(state.child, props);
+	Async.prototype.componentDidUpdate = function (_, state) {
+		this.state.ready && !state.ready && emit('async-loaded');
+	};
+	Async.prototype.render = (props, state) => state.child && h(state.child, props);
 	return Async;
 }

src/lib/entry.js

@@ -8,20 +8,38 @@ else if (process.env.ADD_SW && 'serviceWorker' in navigator && location.protocol
 	navigator.serviceWorker.register('/sw.js');
 }
 
+function getApp() {
+	let x = require('preact-cli-entrypoint');
+	return h(x && x.default || x);
+}
+
+let inProgress = false;
+let body = document.body;
+let root = body.firstElementChild;
 
-const interopDefault = m => m && m.default ? m.default : m;
+function init(first) {
+	if (inProgress) return;
 
-let app = interopDefault(require('preact-cli-entrypoint'));
+	let app = getApp();
 
-if (typeof app==='function') {
-	let root = document.body.firstElementChild;
+	if (first) {
+		render(app, body.cloneNode(true));
+	} else {
+		root = render(app, body, root);
+	}
+}
 
-	let init = () => {
-		let app = interopDefault(require('preact-cli-entrypoint'));
-		root = render(h(app), document.body, root);
-	};
+if (module.hot) {
+	module.hot.accept('preact-cli-entrypoint', init);
+}
 
-	if (module.hot) module.hot.accept('preact-cli-entrypoint', init);
+addEventListener('async-loading', () => {
+	inProgress = true;
+});
 
+addEventListener('async-loaded', () => {
+	inProgress = false;
 	init();
-}
+});
+
+init(true);

src/lib/webpack/async-component-loader.js

@@ -15,14 +15,14 @@ module.exports.pitch = function(remainingRequest) {
 	}
 
 	return `
-		import async from 'preact-cli/async-component';
+		import Async from 'preact-cli/async-component';
 
 		function load(cb) {
-			require.ensure([], function(require) {
-				cb(require(${ loaderUtils.stringifyRequest(this, "!!" + remainingRequest) }));
-			}${name ? (', '+JSON.stringify(name)) : ''});
+			require.ensure([], function () {
+				cb( require(${loaderUtils.stringifyRequest(this, '!!' + remainingRequest)}) );
+			}, ${JSON.stringify(name || '')});
 		}
 
-		export default async(load);
+		export default Async(load);
 	`;
 };