Placeholder loading app while fetching data

[dcatanzaro]

Hi.

Im using NextJS for a big project and I want to add a placeholder loading while fetching data.

Example:

Currently NextJS use fetch in getInitialProps and wait to fetch all data to show de render.

Is there a way to show the basic render with placeholder loading and in the background do the fetch?

Thanks!

[ragingwind]

How about https://github.com/zeit/next.js#router-events

[markozxuu]

@dcatanzaro If the doubt was resolved, I suggest closing the subject 😸

[azza85]

@dcatanzaro I have it working in this issue, #2981 I am having a few issues on a dynamic level page but may work for what you are looking for.

[dcatanzaro]

Thanks! I will see both.

[JustasPolis]

If you want to show some loading/placeholders just dont fetch on SSR, use componentDidMount and fetch when client kicks in and while fetching show your placeholder :)

[dcatanzaro]

I'm trying to continue using SSR, and when it comes from de client-side use componentDidMount!

Thanks!.

[timneutkens]

Like @JustasPolis said when you use componentDidMount to fetch you can render the placeholder server side 👍

[yann-yinn]

Hello ! Can someone provide an example of this ? I want my page to display "loading ..." until getInitialProps() Promise is resolved; so it is basically the same need than the one described in this issue.

Should I use router events ? is there an example somewhere on how this has to be done ? Should i use a store to update a "pageLoading" variable ?

Should I use componentDidMount ? I dont understand this suggestion, as i guess i will loose SSR if i use this method...

Any help appreciated :)

[timneutkens]

@nyl-auster https://github.com/zeit/next.js/tree/master/examples/with-loading might help

[yann-yinn]

@timneutkens definitely does, thanks !
So the answer is : use Router events. The above example is using nprogress to display a progress bar at the top of the page and that works great, but we can do anything we want this way...

Router.onRouteChangeStart = (url) => NProgress.start()
Router.onRouteChangeComplete = () => NProgress.done()
Router.onRouteChangeError = () => NProgress.done()

[timneutkens]

👌 Happy it helped 😄

There's an example for that! - Tim Neutkens

[lock]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.