Feature Request: Show loading indicator while getInitialProps() is running

[EyMaddis]

The way I understand the loadingComponent prop, it is only shown if the target screen is configured to return null.
Is is possible to show the loading indicator while getInitialProps of the loading screen is executing? This would allow to use the indicator without specifically handling serverside and clientside handling.

I would assume that it is possible by hooking into next.js router events. However, I think that the problem might be with triggering the transition before the new component exists.

[cdow]

Router events appear to be how next.js recommends you do it.

[nwalters512]

Can you clarify what you mean by "it is only shown if the target screen is configured to return null"? As always, a concrete example (https://codesandbox.io is great for this) is helpful to illustrate exactly what you're talking about.

[EyMaddis]

it is only shown if the target screen is configured to return null

I meant just the example here:
https://github.com/illinois/next-page-transitions#support-for-delayed-enters

In order for the loading indicator to work, the page has to look like this:

  render() {
    if (!this.state.loaded) return null // no loading indicator without this.
    return <div>Hello, world!</div>
  }

[nwalters512]

Ah, I see what you mean. This is by design - if your page can render immediately, you shouldn't need a loading indicator. Do you have a specific use case where you want both the page and a loading indicator to render at the same time?

[EyMaddis]

I just assumed that the loading indicator would show like the next page is getting loaded (specifically while next.js resolves the getInitialProps()).

I solved this in my project by adapting:
https://github.com/zeit/next.js/tree/canary/examples/with-loading

For me it was a clash of assumptions.

[nwalters512]

Ah! Apologies - I didn't use this package with getInitialProps anywhere, so I never saw this particular problem manifest. It does seem like router events would be the right way to solve this.

[EyMaddis]

I was basically aiming for something else while investigating this: Hiding my loading times.

Currently the flow is like this with a simple fade animation between screens which takes 500ms.

• user presses on button
• getInitialProps() is loading the content for the next page, this might take 500ms
• next page renders (lets say that this is instantly)
• fade out begins +250ms
• fade in begins +250ms

The user sees the page after 1 second.

This is what I was aiming for:

• user presses on button
• fade out begins AND getInitialProps() is loading the content for the next page, this might take up 500ms, but at least the 250ms of the transition
• next page renders (lets say that this is instantly)
• fade in begins +250

If getInitialProps resolves within 250ms, the user sees the page after 0.5 seconds instead of 1!

[jmikrut]

I am also struggling with this exact issue. The Main reason we use NextJS is due to getInitialProps being helpful and I think it should be more natively supported within this package.

I have followed along with the with-loading example but am not quite sure how to combine the ideas. Is this ever a function that will be natively implemented within this package? Or, @EyMaddis — maybe you can provide a little more information regarding how you got it working in your case?

[EyMaddis]

With the "withLoading" example I actually just mean exactly that functionality. I added a global loading indicator to the page, a little bar at the top of the page that grows in a known interval.
I did not adapt the transitions.