@gleb Thanks for this suggestion, it's behaving like you described "loading happens too fast and spinner changes immediately to the route content"
I tried your solution, and it added a delay to the load, where the white screen was extended by 3 seconds, then went to the component. Did you get this solution from here? stackoverflow.com/questions/541589...
I'm still don't understand the difference between the first and second solutions listed there in that SO post. Tried both to no avail.
I'll try to create something reproducible in typescript create-react-app.
I think something is wrong with the HOC. Because if you look at my implementation, valid Route can only accept HOC like a that: <Route path="/changePassword" exact={true} component={() => withHOC(LazyContent)} />
Regarding the solution on SO.
First one adds time on top of the time required for import. So if import takes 2 sec and delay is 3 sec, totally it will take 5 sec.
The second approach uses Promise.all, which makes the same work "in parallel". So if import takes 2 sec and delay is 3 sec, totally it will take 3 sec. So the operation will take AT LEAST the time specified in the delay.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
@gleb Thanks for this suggestion, it's behaving like you described "loading happens too fast and spinner changes immediately to the route content"
I tried your solution, and it added a delay to the load, where the white screen was extended by 3 seconds, then went to the component. Did you get this solution from here? stackoverflow.com/questions/541589...
I'm still don't understand the difference between the first and second solutions listed there in that SO post. Tried both to no avail.
I'll try to create something reproducible in typescript create-react-app.
I would suspect then that your HOC not returning properly. Could you validate if spinner is shown without using hoc?
Here is a short working demo:
github.com/GlebIrovich/suspense-demo
I think something is wrong with the HOC. Because if you look at my implementation, valid Route can only accept HOC like a that:
<Route path="/changePassword" exact={true} component={() => withHOC(LazyContent)} />
Hope it helps
Regarding the solution on SO.
First one adds time on top of the time required for import. So if import takes 2 sec and delay is 3 sec, totally it will take 5 sec.
The second approach uses Promise.all, which makes the same work "in parallel". So if import takes 2 sec and delay is 3 sec, totally it will take 3 sec. So the operation will take AT LEAST the time specified in the delay.