fix(frontend): stop empty-state splash from flashing after login#12966
Conversation
Two bugs caused EmptyPageCommunity and EmptyFolder to render for one frame between login success and the flows query resolving. 1. flowsManagerStore.resetStore() set flows: [] on logout. After logout/login the truthy gate in main-page.tsx (flows && examples && folders) passed immediately with stale empty values, and shouldShowMainContent returned false, so EmptyPageCommunity rendered until the new flows query resolved. Reset to undefined instead so the gate correctly waits for the next fetch. 2. homePage initialized isEmptyFolder = true and only flipped it inside a useEffect, so the first render of HomePage always rendered EmptyFolder regardless of state. Use null as the resolving sentinel, skip the effect until both the global flows store and the folder query are populated, and render the existing list skeleton while resolving. Verified with a MutationObserver in the post-login transition: prior to this change three empty-state components were inserted into the DOM in the same paint window; after the change none are.
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Codecov Report❌ Patch coverage is
❌ Your patch check has failed because the patch coverage (28.57%) is below the target coverage (40.00%). You can increase the patch coverage or adjust the target coverage. Additional details and impacted files@@ Coverage Diff @@
## release-1.10.0 #12966 +/- ##
==================================================
+ Coverage 53.90% 54.31% +0.41%
==================================================
Files 2051 2091 +40
Lines 187497 191732 +4235
Branches 26653 27452 +799
==================================================
+ Hits 101072 104147 +3075
- Misses 85306 86430 +1124
- Partials 1119 1155 +36
Flags with carried forward coverage won't be shown. Click here to find out more.
🚀 New features to boost your workflow:
|
Frontend Unit Test Coverage ReportCoverage Summary
Unit Test Results
|
The post-login flash guard waited for folderData to be defined, but folderData stays undefined when the folder query errors out (e.g. when myCollectionId is undefined after the user deletes all folders). isEmptyFolder then stuck at null and the page rendered ListSkeleton forever instead of EmptyFolder. Gate on isLoading from useGetFolderQuery instead. isLoading is true only on the first fetch with no data and flips to false on success or error, so the effect still waits past the post-login stale-store window but resolves correctly when the query settles either way.
github-actions
Bot
added
bug
github-merge-queue
Bot
removed this pull request from the merge queue due to failed status checks
2 participants
Summary
After signing in, the empty-state splash ("create your first flow") rendered for one frame even when the user already had flows. Two stacked bugs:
Changes
Verification
Captured with a `MutationObserver` watching the empty-state `data-testid`s during a real post-login transition.
Before the fix, four insertions in the same paint window:
```
EmptyFolder splash (data-testid="new_project_btn_empty_page")
EmptyPageCommunity (data-testid="empty_page_github_button")
EmptyPage logo light (data-testid="empty_page_logo_light")
EmptyPage logo dark (data-testid="empty_page_logo_dark")
```
After the fix: zero insertions.