loading doesn't work

[sxcooler]

import { h, Component } from 'preact';
import { Router } from 'preact-router';
import AsyncRoute from 'preact-async-route';
import Header from './header';
import Home from './home';

export default class App extends Component {
	/** Gets fired when the route changes.
	 *	@param {Object} event		"change" event from [preact-router](http://git.io/preact-router)
	 *	@param {string} event.url	The newly routed URL
	 */
	handleRoute = e => {
		this.currentUrl = e.url;
	};

	getProfile(){
		return new Promise(resolve=>{
			setTimeout(()=>{
				System.import('./profile').then(module => {resolve(module.default);});
			},2000);
		});
	}

	render() {
		return (
			<div id="app">
				<Header />
				<Router onChange={this.handleRoute}>
					<Home path="/" />
					<AsyncRoute path="/profile" component={this.getProfile} />
					<AsyncRoute path="/profile/:user" component={this.getProfile}
								loading={()=>{return <span>loading...</span>}} />
				</Router>
			</div>
		);
	}
}

my code is based on https://github.com/developit/preact-boilerplate & this project's example, the async-route works well, but the loading does not show up.
after 2 sec the real content just come out.

[prateekbh]

@sxcooler can you re-produce this in an isolated repo/branch?

[sxcooler]

@prateekbh ok, maybe later.

[prateekbh]

@sxcooler i tried running here
https://github.com/prateekbh/preact-async-route/tree/master/example

seems to be working

[prateekbh]

@sxcooler checked with preact-boilerplate
it is indeed showing up, just hidden under the fixed header 😛
give your span a padding-top of 56px and you shall see it 😆

[prateekbh]

@sxcooler feel free to re-open if i am wrong

[sxcooler]

@prateekbh I didn't test correctly, sorry for the trouble.

[prateekbh]

no problem 😄
happy to help