next/dynamic renders loading state when React re-renders quickly client-side
Unanswered
sneha_veera posted this in #help-forum
I am working on migrating our heavy-trafficed and impact driving production application to NextJS. As we migrated initial set of URLs, we noticed that a dynamically imported code split component flashes loading state adversely affecting the CLS for our pages. I have filed a Next/issue as well: https://github.com/vercel/next.js/issues/64687
Here is the sandbox link for a quick example to recreate this error: https://codesandbox.io/p/devbox/jolly-fog-h86q9z
My hypothesis why this is happening there is a race condition where the react is rendering and mounting before the code split chunks are loaded. Adding a setTimeout with an arbitrary delay to the react rendering effectively resolves the bug. But this is not a solution we can go ahead with.
Would appreciate any thoughts and help on how to solve this.
Here is the sandbox link for a quick example to recreate this error: https://codesandbox.io/p/devbox/jolly-fog-h86q9z
My hypothesis why this is happening there is a race condition where the react is rendering and mounting before the code split chunks are loaded. Adding a setTimeout with an arbitrary delay to the react rendering effectively resolves the bug. But this is not a solution we can go ahead with.
Would appreciate any thoughts and help on how to solve this.