fix(discover-homepage): Fix flicker when loading homepage#39905
Merged
narsaynorath merged 6 commits intoOct 12, 2022
Conversation
The homepage relies on a fetch request to complete and a redirect to occur before getting events data. There is a gap by implementing a redirect in the child of AsyncComponent where the discover charts load up with the default event view. If projects need to be loaded, this redirect occurs and then triggers another series of fetches. If the first series completes then there will be a flicker when the final state loads.
github-actions
Bot
added
the
Scope: Frontend
Contributor
size-limit report 📦
|
edwardgou-sentry
approved these changes
Oct 12, 2022
narsaynorath
deleted the
nar/fix/discover-homepage-flicker-on-redirect
branch
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The homepage relies on a fetch request to complete and a redirect to occur before getting events data (events-stats, events, events-meta). There is a gap by implementing a redirect in the child of AsyncComponent where the discover charts load up with the event view, but the page filters aren't set. If projects need to be loaded, this redirect occurs and then triggers another series of fetches. If the first series completes then there will be a flicker when the final state loads.
My fix here essentially treats the first render of the homepage view as an invalid event view. That way we can wait until the
checkEventViewfunction handles the redirecting and sets the page filters and gives us a valid event view. This reduces how many places we're handling redirect logic because I was able to move it out of theHomepageQueryAPIcomponent.Flickers are hard to test for, so I'm relying on the existing tests to check for functionality.