loading doesn't work - Githubissues

sxcooler commented 7 years ago

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.