web: prevent layout flash for logged-in user
Created by: valerybugakov
Context
Layout flashes on page load from non-logged-in variant to logged-in variant.
https://user-images.githubusercontent.com/3846380/134764071-ce9498b4-c93b-4bf4-85c9-f80f8fee6493.mov
The root cause of the issue
After enabling persistent cache for the viewerSettings
query, it's loaded faster than the CurrentAuthState
query. This causes the update of the authenticatedUser
state to null
which enables content rendering despite the fact that the CurrentAuthState
request is not completed. The correct value for authenticatedUser
is undefined
till the CurrentAuthState
query completion. It prevents the render function from going past the condition:
if (authenticatedUser === undefined || graphqlClient === undefined) {
return null
}