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

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.

[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!

[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.