fix: home and history page loading states #797
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThis pull request refactors multiple mobile UI pages to streamline data fetching and loading state management. It replaces local state handling with React Query hooks, consolidates loading flags across components, and introduces a utility to validate JWT tokens. Additionally, import statements are reorganized for clarity and query configurations are enhanced, ensuring a more efficient and robust handling of asynchronous data across the application. Changes
Sequence Diagram(s)sequenceDiagram
participant HP as HistoryPage
participant RQ as useQuery Hook
participant QF as Query Function
HP ->> RQ: Call useQuery with queryKey & queryFn
RQ ->> QF: Execute dashboard data fetch
QF -->> RQ: Return dashboard data
RQ -->> HP: Provide data, loading, and error states
sequenceDiagram
participant L as Layout Component
participant UA as useAuth Hook
participant Auth as Auth Utils (hasValidJwtToken)
participant UI as UI Renderer
L ->> UA: Retrieve username, isFetchingUser, user
L ->> Auth: Validate JWT token
Auth -->> L: Return token validity
alt Data not ready or invalid token
L ->> UI: Render PeanutLoading component
else Data ready and valid token
L ->> UI: Render page content
end
Possibly related PRs
Suggested reviewers
Poem
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (4)
🚧 Files skipped from review as they are similar to previous changes (2)
🧰 Additional context used🧬 Code Graph Analysis (1)src/app/(mobile-ui)/home/page.tsx (2)
⏰ Context from checks skipped due to timeout of 90000ms (1)
🔇 Additional comments (9)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (3)
src/app/(setup)/setup/page.tsx (1)
99-99: Remove outdated TODO commentThe TODO comment about adding loading state is now redundant since you've already implemented it.
- // todo: add loading statesrc/app/(mobile-ui)/layout.tsx (1)
45-50: Better loading state presentation.The loading state now considers both component readiness and user fetching status, displaying a centered loading indicator for a smoother user experience. This aligns perfectly with the PR's goal of improving loading states.
Consider adding a timeout for the loading state to prevent an indefinite loading screen in case of network issues:
useEffect(() => { // check for JWT token setHasToken(hasValidJwtToken()) setIsReady(true) + + // Add a timeout to prevent indefinite loading + const timer = setTimeout(() => { + setIsReady(true); + }, 5000); // 5 seconds timeout + + return () => clearTimeout(timer); }, [])src/app/(mobile-ui)/history/page.tsx (1)
36-99: Consider adding error handling for the dashboard query.While the history query has proper error handling, the dashboard query doesn't explicitly handle errors. Consider adding error handling for the dashboard query to provide a better user experience when dashboard data fails to load.
const { data: dashboardData, isLoading: isLoadingDashboard } = useQuery({ queryKey: ['dashboardData', address], queryFn: () => composeLinkDataArray(address ?? ''), enabled: !!address, staleTime: 5 * 60 * 1000, // 5 minutes gcTime: 10 * 60 * 1000, // 10 minutes placeholderData: keepPreviousData, + onError: (error) => { + console.error('Failed to fetch dashboard data:', error); + Sentry.captureException(error); + }, })
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
src/app/(mobile-ui)/history/page.tsx(4 hunks)src/app/(mobile-ui)/home/page.tsx(2 hunks)src/app/(mobile-ui)/layout.tsx(3 hunks)src/app/(setup)/setup/page.tsx(4 hunks)src/components/Home/HomeWaitlist.tsx(2 hunks)src/components/Setup/components/SetupWrapper.tsx(1 hunks)src/hooks/query/user.ts(2 hunks)src/hooks/wallet/useWallet.ts(2 hunks)src/utils/auth.ts(1 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (5)
src/app/(setup)/setup/page.tsx (1)
src/components/Global/PeanutLoading/index.tsx (1)
PeanutLoading(3-12)
src/components/Home/HomeWaitlist.tsx (1)
src/components/Global/PeanutLoading/index.tsx (1)
PeanutLoading(3-12)
src/app/(mobile-ui)/home/page.tsx (1)
src/context/authContext.tsx (1)
useAuth(317-323)
src/app/(mobile-ui)/layout.tsx (3)
src/context/authContext.tsx (1)
useAuth(317-323)src/utils/auth.ts (1)
hasValidJwtToken(5-36)src/components/Global/PeanutLoading/index.tsx (1)
PeanutLoading(3-12)
src/hooks/wallet/useWallet.ts (1)
src/redux/slices/wallet-slice.ts (1)
walletActions(89-89)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Deploy-Preview
🔇 Additional comments (27)
src/hooks/query/user.ts (2)
7-7: Good addition ofkeepPreviousDataimportThis is a valuable addition to support the enhanced data loading behavior.
48-49: Excellent enhancement of loading state managementAdding
placeholderData: keepPreviousDataensures that previous successful query data is retained while new data is being fetched. This improves the user experience by maintaining UI continuity during refetches, preventing empty or loading states from flashing to users.src/app/(setup)/setup/page.tsx (4)
3-9: Good job organizing importsThe addition of the PeanutLoading component and restructuring of imports improves code organization.
21-21: Proper initialization of loading stateGood addition of the loading state variable initialized to
trueto ensure the loading spinner appears immediately on page load.
25-47: Well-implemented loading state management in async functionThe changes properly manage the loading state during passkey support checking:
- Setting loading to true at the beginning of the function
- Using a
finallyblock to ensure loading state is reset regardless of success or failureThis is excellent error handling practice.
92-97: Clear conditional rendering of loading componentGood implementation of the loading state UI that provides visual feedback to users during the passkey support check.
src/app/(mobile-ui)/home/page.tsx (2)
41-41: Good extraction of the isFetchingUser from auth contextAdding
isFetchingUserto the destructured values fromuseAuth()allows for more comprehensive loading state management.
159-161: Excellent consolidation of loading statesCreating a unified
isLoadingvariable that considers both user and wallet fetching states ensures that the loading spinner is displayed until all necessary data is fully loaded. This prevents showing incomplete or inconsistent UI to users.src/components/Home/HomeWaitlist.tsx (2)
8-8: Good addition of PeanutLoading importAdding the standard loading component improves consistency across the application.
20-22: Great replacement of custom loading UI with standardized componentReplacing the custom loading JSX with the reusable
PeanutLoadingcomponent promotes UI consistency throughout the application and simplifies the code.src/components/Setup/components/SetupWrapper.tsx (2)
5-6: Import organization improvement looks good.The imports for
BeforeInstallPromptEvent,LayoutType,ScreenId, andInstallPWAhave been properly organized into their respective paths, making the code more maintainable.
9-9: Consistent React import organization.The reordering of React imports with
Childrenfirst follows a logical pattern since it's used more prominently in the component.src/hooks/wallet/useWallet.ts (4)
27-27: Addition of keepPreviousData improves UX during loading states.Adding this import from React Query allows previous data to be shown while new data is being fetched, preventing UI flicker.
237-239: Improved query configuration enhances data persistence.The changes to the query configuration improve user experience by:
- Increasing stale time from 30s to 60s reduces unnecessary refetches
- Increasing cache time from 1m to 5m prevents data loss during short navigation
- Using
keepPreviousDatamaintains UI state while loading fresh dataThese optimizations align well with the PR objective to improve loading states.
243-247: Refined loading state management logic.The updated condition now only sets
isFetchingWalletsto true when there are no wallets yet, avoiding unnecessary state updates when subsequent queries are loading but wallets data already exists.
248-248: Proper dependency update in useEffect.Adding
wallets.lengthto the dependency array ensures the effect runs correctly when the wallet count changes, preventing stale loading states.src/utils/auth.ts (1)
1-36: Well-implemented JWT token validation utility.This new utility function is well-structured and thoroughly handles various edge cases:
- Checks for browser environment
- Validates token structure
- Correctly decodes the JWT payload
- Properly handles expiration validation
- Includes robust error handling
The implementation follows security best practices for client-side token validation.
src/app/(mobile-ui)/layout.tsx (3)
5-5: Good additions for loading state management.Importing
PeanutLoadingandhasValidJwtTokenenables better handling of application loading states, supporting the PR's objective to fix loading states.Also applies to: 12-12
23-25: Enhanced auth state tracking.The updated destructuring from
useAuth()provides more comprehensive access to user state data, and the newhasTokenstate effectively tracks JWT validity.
38-43: Improved initialization logic with token validation.The updated effect now properly checks for a valid JWT token before considering the layout ready, which helps prevent invalid authentication states.
src/app/(mobile-ui)/history/page.tsx (7)
15-15: Well-organized import modifications.The imports have been properly updated to support the React Query integration. Adding
formatPaymentStatusto the imported utilities and bringing in the necessary React Query hooks (keepPreviousData,useInfiniteQuery,useQuery) while streamlining the React imports to only what's needed improves code organization.Also applies to: 23-23, 26-26
36-43: Good implementation of React Query for dashboard data.Replacing local state management with React Query is a solid improvement. The configuration is well thought out with:
- Proper query keys that depend on the user's address
- Appropriate staleTime and gcTime for efficient caching
- Use of keepPreviousData to prevent UI flashing during refetches
- Conditional execution based on address availability
This implementation follows React Query best practices and will improve data fetching reliability.
46-47: Early return pattern properly implemented.Adding this null check for dashboardData is a good defensive programming practice, preventing potential errors when data isn't available yet.
86-86: Robust nextPage calculation.The updated logic for determining the next page now safely handles the case where dashboardData might be undefined by using the nullish coalescing operator. This is a good improvement for error prevention.
91-99: Properly configured useInfiniteQuery.The infinite query implementation has been improved with:
- Updated query key that properly depends on dashboardData
- More robust enabled condition
- Appropriate cache configuration with staleTime and gcTime
- Use of keepPreviousData for a better UX during data refetching
These changes will ensure more reliable query behavior and prevent unnecessary loading states.
121-121: Improved loading state condition.This condition now properly checks both loading states and ensures we only show the loading indicator when there's truly no data available to display. This prevents loading flashes when data is already available but being refreshed.
131-131: Simplified empty state logic.The condition for showing the empty state has been simplified and made more direct. This makes the code more readable and maintainable.
contributes to TASK-10053
Summary by CodeRabbit
New Features
Refactor