React-starter-kit: Loading bar on route change

[archansel]

Hi, I tried to implement loading bar from #949 and it's working but not exactly what I want. Currently I showed loading bar in componentDidMount before doing long running task and then hide it after all tasks finish. The problem is when I change route, the page didnt load immediately (obviously, or not?) and suddenly jump to the new page after page load finish, for me it isn't good experience for user because they don't get any loading feedback. What I want is when doing history push (go to another route), the loading bar should shows up and hide after the page and its content loaded

so, how do I do this? thanks

[frenzzy]

After src/components/Html.js#L36 add

<div id="spinner" style={{ position: 'fixed', top: 0, right: 0, background: 'gold' }}>
  Loading...
</div>

After src/client.js#L129 add

document.getElementById('spinner').style.display = '';

After src/client.js#L152 add

document.getElementById('spinner').style.display = 'none';

Enable throttling on Network tab in Chrome DevTools and navigate to the main page to see

[archansel]

Nice, I though it doesn't work before but it turns out that my internet is too fast (because it's localhost), after throttling it just works. thanks