Open EyMaddis opened 5 years ago
Router events appear to be how next.js recommends you do it.
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.
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>
}
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?
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.
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.
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.
The user sees the page after 1 second.
This is what I was aiming for:
If getInitialProps resolves within 250ms, the user sees the page after 0.5 seconds instead of 1!
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?
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.
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 whilegetInitialProps
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.