Fix billing status flashing #176
Conversation
Don't check team status API for non-team products (free, starter, pro, max). Now properly checks billing status first to determine if user has team plan before fetching team status, matching the pattern used in other components. Fixes #169 🤖 Generated with [Claude Code](https://claude.ai/code) Co-authored-by: Anthony <AnthonyRonning@users.noreply.github.com>
- Keep only the valid fixes from PR #170: check team plan before fetching team status - Apply boolean coercion fix to prevent undefined values in React Query conditions - Revert problematic changes that made components fetch billing independently - Maintain original pattern where BillingStatus component populates shared state This fixes the model dropdown 'Upgrade?' issue and ChatBox flashing that occurred when components couldn't access billing status from shared state.
WalkthroughThis change updates the logic for determining if a user is on a "team" plan by adding nullish coalescing ( Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant UI
participant Auth
participant BillingAPI
participant TeamAPI
User->>UI: Load main route
UI->>Auth: Check if authenticated
Auth-->>UI: Return authentication status
alt User is authenticated
UI->>BillingAPI: Fetch billing status
BillingAPI-->>UI: Return billing status
alt Billing status indicates team plan
UI->>TeamAPI: Fetch team status
TeamAPI-->>UI: Return team status
else Not a team plan
UI-->>User: Skip team status query
end
else Not authenticated
UI-->>User: Do not query billing or team status
end
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Possibly related PRs
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (3)
🧰 Additional context used📓 Path-based instructions (2)**/*.{ts,tsx,js,jsx}📄 CodeRabbit Inference Engine (CLAUDE.md)
Files:
**/*.{ts,tsx}📄 CodeRabbit Inference Engine (CLAUDE.md)
Files:
🧬 Code Graph Analysis (1)frontend/src/routes/index.tsx (2)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
🔇 Additional comments (6)
✨ Finishing Touches
🧪 Generate unit tests
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
There was a problem hiding this comment.
Greptile Summary
This PR addresses billing status flashing issues by implementing more defensive boolean type handling and optimizing query execution patterns. The changes span three key files that handle billing and team status management throughout the application.
The core problem being solved is UI flickering that occurs when billing status and team status queries execute at different times during component initialization. The solution involves two main strategies:
-
Defensive Boolean Handling: In
AccountMenu.tsxandBillingStatus.tsx, the code now uses nullish coalescing operators (?? false) when determiningisTeamPlanvalues. This ensures that even whenbillingStatus?.product_nameis undefined during loading states, the boolean variables maintain consistentfalsevalues rather thanundefined. This prevents React Query'senabledconditions from behaving unpredictably. -
Conditional Query Optimization: In
routes/index.tsx, the team status query has been restructured to only execute when the user actually has a team plan. The billing status query runs first, and only after confirming the user has a team plan (detected by checking if the product name includes "team") does the team status query execute. This prevents unnecessary API calls for non-team users and creates more predictable rendering behavior.
The changes integrate well with the existing React Query pattern used throughout the codebase. The enabled option in useQuery hooks is a standard React Query feature for conditional query execution, and the nullish coalescing operators align with modern TypeScript best practices for handling potentially undefined values. These modifications maintain the same functional behavior while eliminating the timing-related UI inconsistencies that were causing the flashing effect.
Confidence score: 4/5
- This PR is safe to merge with minimal risk of breaking existing functionality
- Score reflects solid defensive programming practices and proper React Query usage, though the change in AccountMenu.tsx is technically redundant
- Pay attention to frontend/src/components/AccountMenu.tsx where the nullish coalescing operator is unnecessary since
.includes()always returns a boolean
3 files reviewed, 2 comments
| const isMax = productName.toLowerCase().includes("max"); | ||
| const isStarter = productName.toLowerCase().includes("starter"); | ||
| const isTeamPlan = productName.toLowerCase().includes("team"); | ||
| const isTeamPlan = productName.toLowerCase().includes("team") ?? false; |
There was a problem hiding this comment.
style: The ?? false is redundant here since String.prototype.includes() always returns a boolean value, never null or undefined
| const isTeamPlan = productName.toLowerCase().includes("team") ?? false; | |
| const isTeamPlan = productName.toLowerCase().includes("team"); |
| }); | ||
|
|
||
| // Check if user has team plan | ||
| const isTeamPlan = billingStatus?.product_name?.toLowerCase().includes("team") ?? false; |
There was a problem hiding this comment.
style: The string matching approach for detecting team plans is fragile - consider using a more explicit field if available in the API response
Summary by CodeRabbit