[TOOL-4645] Dashboard: Improve Project overview page loading performance #7261
Conversation
|
WalkthroughThe changes refactor analytics-related dashboard components to improve loading behavior. Data fetching for analytics cards is now handled by individual async components within Suspense boundaries, each with its own loading and error state. The Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Page
participant AsyncCard
participant DataSource
User->>Page: Loads analytics page
Page->>AsyncCard: Render Suspense boundary for each card
AsyncCard->>DataSource: Fetch data asynchronously
DataSource-->>AsyncCard: Return data or error
AsyncCard-->>Page: Render card or error state
Page-->>User: Display analytics cards (loading states shown until data arrives)
Assessment against linked issues
Suggested reviewers
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (5)
🚧 Files skipped from review as they are similar to previous changes (5)
⏰ Context from checks skipped due to timeout of 90000ms (7)
✨ Finishing Touches
🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. 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 (
|
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
MananTank
changed the base branch from
06-03-_tool-4651_dashboard_show_error_on_invalid_token_distribution_in_erc20_asset_creation_form
to
graphite-base/7261
MananTank
force-pushed
the
06-03-_tool-4645_dashboard_improve_project_overview_page_loading_performance
branch
from
a819375 to
7573dd6
Compare
MananTank
force-pushed
the
graphite-base/7261
branch
from
31fbde3 to
6cce31d
Compare
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #7261 +/- ##
=======================================
Coverage 55.57% 55.57%
=======================================
Files 909 909
Lines 58680 58680
Branches 4157 4157
=======================================
Hits 32610 32610
Misses 25963 25963
Partials 107 107
🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (5)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/RpcMethodBarChartCard/index.tsx (1)
9-10: Consistent refactoring with TODO to address.The change correctly follows the same pattern as other chart components. However, the TODO comment suggests this loading state implementation may need further improvements.
Consider tracking the TODO comment in a separate issue to ensure the loading state improvements are not forgotten.
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/Transactions/index.tsx (1)
16-16: Good refactoring, but consider height consistency.The change correctly applies the new LoadingChartState pattern. However, this component uses
h-[458px]while other similar components useh-[377px]. Consider whether this height difference is intentional or if standardization would be beneficial.If the height difference isn't content-specific, consider standardizing the loading state heights across all chart components for better visual consistency.
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx (3)
252-291: Improve error handling consistency and add return type annotation.The async component implementation is good, but consider these improvements:
- The error handling pattern with Promise.allSettled is appropriate for resilience
- Missing TypeScript return type annotation
- Consider extracting to a separate file for better organization
-async function AsyncTotalSponsoredCard(props: { +async function AsyncTotalSponsoredCard(props: { project: Project; range: Range; interval: "day" | "week"; searchParams: PageSearchParams; -}) { +}): Promise<JSX.Element> {Consider moving this and other async components to a separate
components/directory for better file organization.
315-376: Add return type annotation for consistency.The async component logic is well-implemented with proper error handling using Promise.allSettled. However, it's missing a return type annotation like the other async components should have.
-async function AsyncAppHighlightsCard(props: { +async function AsyncAppHighlightsCard(props: { project: Project; range: Range; interval: "day" | "week"; searchParams: PageSearchParams; client: ThirdwebClient; params: PageParams; -}) { +}): Promise<JSX.Element> {
166-173: Consider adding error boundaries around Suspense components.While the Suspense fallbacks handle loading states well, consider wrapping these components in error boundaries to gracefully handle any runtime errors in the async components.
Example implementation:
<ErrorBoundary fallback={<ErrorStateCard />}> <Suspense fallback={<LoadingChartState className="h-[431px] border" />}> <AsyncWalletDistributionCard project={project} range={range} /> </Suspense> </ErrorBoundary>This ensures that if an async component throws an error, it doesn't crash the entire page.
Also applies to: 184-192
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/EngineCloudChartCard/index.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/RpcMethodBarChartCard/index.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/Transactions/index.tsx(1 hunks)apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx(4 hunks)apps/dashboard/src/components/analytics/empty-chart-state.tsx(2 hunks)
🧰 Additional context used
🧬 Code Graph Analysis (3)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/EngineCloudChartCard/index.tsx (1)
apps/dashboard/src/components/analytics/empty-chart-state.tsx (1)
LoadingChartState(41-52)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/RpcMethodBarChartCard/index.tsx (1)
apps/dashboard/src/components/analytics/empty-chart-state.tsx (1)
LoadingChartState(41-52)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/Transactions/index.tsx (1)
apps/dashboard/src/components/analytics/empty-chart-state.tsx (1)
LoadingChartState(41-52)
⏰ Context from checks skipped due to timeout of 90000ms (8)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Lint Packages
- GitHub Check: Graphite / mergeability_check
- GitHub Check: Graphite / mergeability_check
- GitHub Check: Graphite / mergeability_check
- GitHub Check: Graphite / mergeability_check
🔇 Additional comments (4)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/EngineCloudChartCard/index.tsx (1)
9-9: LGTM! Clean refactoring to use the enhanced LoadingChartState.The change effectively removes the wrapper div and directly applies styling through the new
classNameprop, simplifying the component structure while maintaining the same visual appearance.apps/dashboard/src/components/analytics/empty-chart-state.tsx (1)
41-52: Excellent enhancement to support flexible styling.The
LoadingChartStatecomponent now properly accepts an optionalclassNameprop and uses thecnutility to merge default styling with custom classes. This enables the consistent styling approach used across the dashboard components.The implementation correctly:
- Maintains backward compatibility with optional className
- Uses proper TypeScript typing
- Leverages the cn utility for class merging
- Preserves the existing loading behavior while adding flexibility
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx (2)
154-163: Good async component pattern with proper error boundaries.The Suspense wrapper with LoadingChartState fallback provides a consistent loading experience. The async component pattern improves performance by allowing independent loading.
40-40:✅ Verification successful
Verify LoadingChartState className prop support.
The LoadingChartState component is now being used with a
classNameprop throughout the Suspense fallbacks. Ensure this prop is properly implemented in the component definition.
🏁 Script executed:
#!/bin/bash # Description: Verify LoadingChartState component supports className prop # Expected: Component should accept and apply className prop # Search for LoadingChartState component definition ast-grep --pattern 'function LoadingChartState($$$) { $$$ }' ast-grep --pattern 'const LoadingChartState = ($$$) => { $$$ }'Length of output: 1203
LoadingChartState supports
classNamepropVerified that
LoadingChartStateis defined here:
- apps/dashboard/src/components/analytics/empty-chart-state.tsx:41–52
It accepts an optionalclassName?: stringand correctly merges it viacn(...). No changes needed.
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
Show resolved
Hide resolved
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/page.tsx
Show resolved
Hide resolved
Merge activity
|
…nce (#7261) <!-- ## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes" If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000): ## Notes for the reviewer Anything important to call out? Be sure to also clarify these in your comments. ## How to test Unit tests, playground, etc. --> <!-- start pr-codex --> --- ## PR-Codex overview This PR focuses on improving the loading state of various chart components in the dashboard by enhancing the `LoadingChartState` component with additional styling and refactoring the code to utilize asynchronous components for better performance and user experience. ### Detailed summary - Updated `LoadingChartState` to accept a `className` prop for custom styling. - Modified `Suspense` components in `Transactions`, `RpcMethodBarChartCard`, and `EngineCloudChartCard` to use improved `LoadingChartState`. - Introduced new async components: `AsyncTotalSponsoredCard`, `AsyncAuthMethodDistributionCard`, and `AsyncAppHighlightsCard`. - Refactored fetching logic for analytics data to use async/await pattern, improving readability and maintainability. > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}` <!-- end pr-codex --> <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit - **Refactor** - Improved loading placeholders across analytics cards by simplifying their appearance and updating styling for a more consistent look. - Modularized data fetching for analytics cards, allowing each card to load and handle errors independently for a smoother user experience. - **New Features** - Loading states for analytics cards now display updated visual styles with borders and adjusted heights. - **Style** - Unified and customizable loading chart styles for better visual consistency. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
06-03-_tool-4645_dashboard_improve_project_overview_page_loading_performance
branch
from
7573dd6 to
dfe4cf0
Compare
size-limit report 📦
|
graphite-app
bot
deleted the
06-03-_tool-4645_dashboard_improve_project_overview_page_loading_performance
branch
PR-Codex overview
This PR primarily focuses on improving the
LoadingChartStatecomponent and its usage across various chart components in the dashboard. It enhances the visual presentation by adding CSS classes and refactoring the loading state handling.Detailed summary
LoadingChartStateto accept aclassNameprop for styling.SuspenseinTransactions,RpcMethodBarChartCard, andEngineCloudChartCardto useLoadingChartStatewith custom heights and borders.AsyncTotalSponsoredCard,AsyncAuthMethodDistributionCard,AsyncAppHighlightsCard,AsyncWalletDistributionCard) for loading data and rendering respective cards.ProjectAnalyticsfunction to utilize the new async components for better data handling and rendering.Summary by CodeRabbit
Refactor
New Features
Style