Skip to content

Commit

Permalink
[DASH-643] Improve Project overview page load perf (#5774)
Browse files Browse the repository at this point in the history 
## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the `ProjectOverviewPage` component by integrating a loading state with `Suspense`, restructuring the layout, and improving the conditional rendering of analytics components based on project activity.

### Detailed summary
- Added `Suspense` for loading state using `GenericLoadingPage`.
- Refactored layout to use a flexbox structure.
- Enhanced conditional rendering for `ProjectAnalytics` and `EmptyState`.
- Improved user statistics and charts display logic.
- Streamlined the rendering of various analytics cards.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
  • Loading branch information
@MananTank
MananTank committed Dec 17, 2024
1 parent e63e6da commit 123435b
Showing 1 changed file with 94 additions and 71 deletions.
165 changes: 94 additions & 71 deletions apps/dashboard/src/app/team/[team_slug]/[project_slug]/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { type Project, getProject } from "@/api/projects";
import { GenericLoadingPage } from "@/components/blocks/skeletons/GenericLoadingPage";
import { notFound } from "next/navigation";

import { getProject } from "@/api/projects";

import {
type DurationId,
type Range,
Expand All @@ -22,6 +22,7 @@ import {
isProjectActive,
} from "@/api/analytics";
import { EmptyStateCard } from "app/team/components/Analytics/EmptyStateCard";
import { Suspense } from "react";
import {
type ChainMetadata,
defineChain,
Expand Down Expand Up @@ -69,6 +70,43 @@ export default async function ProjectOverviewPage(props: PageProps) {

const isActive = await isProjectActive({ clientId: project.publishableKey });

return (
<div className="flex grow flex-col">
<div className="w-full border-border border-b">
<AnalyticsHeader
title={project.name}
interval={interval}
range={range}
/>
</div>
{!isActive ? (
<div className="container p-6">
<EmptyState />
</div>
) : (
<div className="container flex grow flex-col py-6">
<Suspense fallback={<GenericLoadingPage />}>
<ProjectAnalytics
project={project}
range={range}
interval={interval}
searchParams={searchParams}
/>
</Suspense>
</div>
)}
</div>
);
}

async function ProjectAnalytics(props: {
project: Project;
range: Range;
interval: "day" | "week";
searchParams: PageSearchParams;
}) {
const { project, range, interval, searchParams } = props;

// Fetch all analytics data in parallel
const [
walletConnections,
Expand Down Expand Up @@ -114,79 +152,64 @@ export default async function ProjectOverviewPage(props: PageProps) {
]);

return (
<div className="md:pb-16">
<div className="w-full border-border-800 border-b px-6 dark:bg-muted/50">
<AnalyticsHeader
title={project.name}
interval={interval}
range={range}
/>
</div>
{!isActive ? (
<div className="container p-6">
<EmptyState />
<div className="flex grow flex-col gap-6">
{walletUserStatsTimeSeries.some((w) => w.totalUsers !== 0) ? (
<div className="">
<UsersChartCard
chartKey={
(searchParams.usersChart as
| "totalUsers"
| "activeUsers"
| "newUsers"
| "returningUsers") ?? "activeUsers"
}
userStats={walletUserStatsTimeSeries}
searchParams={searchParams}
/>
</div>
) : (
<div className="space-y-6 md:container md:p-6">
{walletUserStatsTimeSeries.some((w) => w.totalUsers !== 0) ? (
<div className="">
<UsersChartCard
chartKey={
(searchParams.usersChart as
| "totalUsers"
| "activeUsers"
| "newUsers"
| "returningUsers") ?? "activeUsers"
}
userStats={walletUserStatsTimeSeries}
searchParams={searchParams}
/>
</div>
) : (
<EmptyStateCard
metric="Connect"
link="https://portal.thirdweb.com/connect/quickstart"
/>
)}
<RpcMethodBarChartCard
from={range.from}
to={range.to}
period={interval}
clientId={project.publishableKey}
<EmptyStateCard
metric="Connect"
link="https://portal.thirdweb.com/connect/quickstart"
/>
)}
<RpcMethodBarChartCard
from={range.from}
to={range.to}
period={interval}
clientId={project.publishableKey}
/>
<div className="grid gap-6 max-md:px-6 md:grid-cols-2">
{walletConnections.length > 0 ? (
<WalletDistributionCard data={walletConnections} />
) : (
<EmptyStateCard
metric="Connect"
link="https://portal.thirdweb.com/connect/quickstart"
/>
)}
{inAppWalletUsage.length > 0 ? (
<AuthMethodDistributionCard data={inAppWalletUsage} />
) : (
<EmptyStateCard
metric="In-App Wallets"
link="https://portal.thirdweb.com/typescript/v5/inAppWallet"
/>
)}
</div>
{userOpUsage.length > 0 ? (
<div className="">
<TotalSponsoredCard
searchParams={searchParams}
data={userOpUsageTimeSeries}
aggregatedData={userOpUsage}
/>
<div className="grid gap-6 max-md:px-6 md:grid-cols-2">
{walletConnections.length > 0 ? (
<WalletDistributionCard data={walletConnections} />
) : (
<EmptyStateCard
metric="Connect"
link="https://portal.thirdweb.com/connect/quickstart"
/>
)}
{inAppWalletUsage.length > 0 ? (
<AuthMethodDistributionCard data={inAppWalletUsage} />
) : (
<EmptyStateCard
metric="In-App Wallets"
link="https://portal.thirdweb.com/typescript/v5/inAppWallet"
/>
)}
</div>
{userOpUsage.length > 0 ? (
<div className="">
<TotalSponsoredCard
searchParams={searchParams}
data={userOpUsageTimeSeries}
aggregatedData={userOpUsage}
/>
</div>
) : (
<EmptyStateCard
metric="Sponsored Transactions"
link="https://portal.thirdweb.com/typescript/v5/account-abstraction/get-started"
/>
)}
</div>
) : (
<EmptyStateCard
metric="Sponsored Transactions"
link="https://portal.thirdweb.com/typescript/v5/account-abstraction/get-started"
/>
)}
</div>
);
Expand Down

0 comments on commit 123435b

Please sign in to comment.