react.js

// This is how the world looks at the moment

import {render} from 'react-dom';

render(
  <Router>
    <Route path="/" component={HomeScreen} />
  </Router>,
  document.getElementById('root')
);

// So the router exists within the render call, it doesn't control render, it itself is being rendered.
// This means it can't control *when* render happens.

// What if we switched this around?

function run (router, element) {
  const route = getActiveRoute(router);
  const promise = extractPromise(route);
  if (promise) {
    promise.then(data => render(React.cloneElement(route, {data}), element));
  }
  else {
    render(route, element);
  }
}

const router = (
  <Router>
    <Route path="/" component={HomeScreen} async={() => Promise.resolve(true)}/>
  </Router>
);
    
run(router, document.getElementById('root'));

// In this model the router is in charge of calling render() when it
// has loaded the data it needs. There's no flash of loading screen
// etc because render doesn't happen until the promise has been resolved.