White flash in the UI when using redirect in server component
Unanswered
Transvaal lion posted this in #help-forum
Transvaal lionOP
I'm trying to use redirect in an asynchronous server component, however, in the transition between the loading page (loading.tsx) and the redirect, a white flash occurs. The page that uses loading.tsx is dynamic.
Does anyone know the reason?
Does anyone know the reason?
6 Replies
@Transvaal lion I'm trying to use redirect in an asynchronous server component, however, in the transition between the loading page (loading.tsx) and the redirect, a white flash occurs. The page that uses loading.tsx is dynamic.
Does anyone know the reason?
something must be delaying page to be loaded. This "something" could be inside your page file above the return expression
Transvaal lionOP
yes, but I'm using next loading, which works similar to an API suspense. The expected behavior is that when the promise finishes, this loading screen disappears and goes straight to the right page, however this flash occurs...
Navigation is interuptable according to the documentation https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming
Transvaal lionOP
Do you recommend any way to get this same result without this white flash?
@Transvaal lion Do you recommend any way to get this same result without this white flash?
flash occurs because something is interrulting it, find the reason and resolve or, or you could use Suspense fallbacks as a loading logic
Transvaal lionOP
thanks Coffe!