Next.js: How do I get the cool loader bar like in the Zeit blog?

[cia48621793]

It looks like Pace (or NProgress) ! So cool man!
But there isn't any isomorphic loading bar component out in the React ecosystem. Yes, I tried to make one, but it just feels un-natural, and I couldn't figure out how to place loading bar during AJAX/REST request...😂

[timneutkens]

@rauchg has mentioned he is going to do a write-up of how this was achieved soon. Closing this as duplicate of #88

[sedubois]

Isn't this answered by https://github.com/zeit/next.js/tree/master/examples/with-loading ?

[cia48621793]

＠sedubois Oh yeah!😂 I'm too lazy to find it out.

But I couldn't make it shared across all pages. I've tried putting the router code on the pages/_document.js, but it didn't do anything.

Because that thing was rendered in server

I mean, sure I can import them all in each page individually, but then, it wasn't automated.

[sedubois]

You need to use a HOC. Can check my example app: https://github.com/relatenow/relate

[shelldandy]

@sedubois where should i look in your app for the proper example 😄 ?

[sedubois]

See withLayout HOC: https://github.com/relatenow/relate/blob/master/hocs/withLayout.js#L25

Wrapped this way:
https://github.com/relatenow/relate/blob/master/pages/index.js#L6