Skip to content

Commit 5006115

Browse files
MananTankMananTank
committed
Improve team overview page load perf + UI adjustments
1 parent 4c8333d commit 5006115

File tree

4 files changed

+101
-72
lines changed

4 files changed

+101
-72
lines changed

‎apps/dashboard/src/app/team/[team_slug]/(team)/page.tsx‎

Lines changed: 95 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,25 @@ import { EmptyState } from "../../components/Analytics/EmptyState";
2525
import { PieChartCard } from "../../components/Analytics/PieChartCard";
2626

2727
import { getTeamBySlug } from "@/api/team";
28+
import { GenericLoadingPage } from "@/components/blocks/skeletons/GenericLoadingPage";
29+
import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
2830
import { getAccount } from "app/account/settings/getAccount";
2931
import { EmptyStateCard } from "app/team/components/Analytics/EmptyStateCard";
3032
import { Changelog, type ChangelogItem } from "components/dashboard/Changelog";
33+
import { Suspense } from "react";
3134
import { TotalSponsoredChartCardUI } from "./_components/TotalSponsoredCard";
3235

3336
// revalidate every 5 minutes
3437
export const revalidate = 300;
3538

39+
type SearchParams = {
40+
usersChart?: string;
41+
from?: string;
42+
to?: string;
43+
type?: string;
44+
interval?: string;
45+
};
46+
3647
export default async function TeamOverviewPage(props: {
3748
params: { team_slug: string };
3849
searchParams: {
@@ -67,6 +78,43 @@ export default async function TeamOverviewPage(props: {
6778
redirect("/login");
6879
}
6980

81+
return (
82+
<div className="flex grow flex-col">
83+
<div className="border-b">
84+
<AnalyticsHeader
85+
title="Team Overview"
86+
interval={interval}
87+
range={range}
88+
/>
89+
</div>
90+
<div className="flex grow flex-col justify-between gap-10 md:container md:pt-8 md:pb-16 xl:flex-row">
91+
<Suspense fallback={<GenericLoadingPage />}>
92+
<OverviewPageContent
93+
account={account}
94+
range={range}
95+
interval={interval}
96+
searchParams={searchParams}
97+
/>
98+
</Suspense>
99+
<div className="shrink-0 max-md:container max-xl:hidden lg:w-[320px]">
100+
<h2 className="mb-4 font-semibold text-lg tracking-tight">
101+
Latest changes
102+
</h2>
103+
<Changelog changelog={changelog} />
104+
</div>
105+
</div>
106+
</div>
107+
);
108+
}
109+
110+
async function OverviewPageContent(props: {
111+
account: Account;
112+
range: Range;
113+
interval: "day" | "week";
114+
searchParams: SearchParams;
115+
}) {
116+
const { account, range, interval, searchParams } = props;
117+
70118
const [
71119
walletConnections,
72120
walletUserStatsTimeSeries,
@@ -116,77 +164,56 @@ export default async function TeamOverviewPage(props: {
116164
inAppWalletUsage.length === 0 &&
117165
userOpUsage.length === 0;
118166

167+
if (isEmpty) {
168+
return <EmptyState />;
169+
}
170+
119171
return (
120-
<div>
121-
<div className="w-full border-border-800 border-b px-6 dark:bg-muted/50">
122-
<AnalyticsHeader
123-
title="Team Overview"
124-
interval={interval}
125-
range={range}
126-
/>
127-
</div>
128-
<div className="flex flex-col justify-between gap-16 md:container md:pt-8 md:pb-16 xl:flex-row">
129-
<div className="grow">
130-
{isEmpty ? (
131-
<div className="container p-6">
132-
<EmptyState />
133-
</div>
134-
) : (
135-
<div className="space-y-6">
136-
{walletUserStatsTimeSeries.some((w) => w.totalUsers !== 0) ? (
137-
<div className="">
138-
<UsersChartCard
139-
userStats={walletUserStatsTimeSeries}
140-
searchParams={searchParams}
141-
/>
142-
</div>
143-
) : (
144-
<EmptyStateCard
145-
metric="Connect"
146-
link="https://portal.thirdweb.com/connect/quickstart"
147-
/>
148-
)}
149-
<div className="grid gap-6 max-md:px-6 md:grid-cols-2">
150-
{walletConnections.length > 0 ? (
151-
<WalletDistributionCard data={walletConnections} />
152-
) : (
153-
<EmptyStateCard
154-
metric="Connect"
155-
link="https://portal.thirdweb.com/connect/quickstart"
156-
/>
157-
)}
158-
{inAppWalletUsage.length > 0 ? (
159-
<AuthMethodDistributionCard data={inAppWalletUsage} />
160-
) : (
161-
<EmptyStateCard
162-
metric="In-App Wallets"
163-
link="https://portal.thirdweb.com/typescript/v5/inAppWallet"
164-
/>
165-
)}
166-
</div>
167-
{userOpUsage.length > 0 ? (
168-
<TotalSponsoredChartCardUI
169-
searchParams={searchParams}
170-
data={userOpUsageTimeSeries}
171-
aggregatedData={userOpUsage}
172-
className="max-md:rounded-none max-md:border-r-0 max-md:border-l-0"
173-
/>
174-
) : (
175-
<EmptyStateCard
176-
metric="Sponsored Transactions"
177-
link="https://portal.thirdweb.com/typescript/v5/account-abstraction/get-started"
178-
/>
179-
)}
180-
</div>
181-
)}
182-
</div>
183-
<div className="shrink-0 max-md:container max-xl:hidden lg:w-[320px]">
184-
<h2 className="mb-4 font-semibold text-lg tracking-tight">
185-
Latest changes
186-
</h2>
187-
<Changelog changelog={changelog} />
172+
<div className="flex grow flex-col gap-6">
173+
{walletUserStatsTimeSeries.some((w) => w.totalUsers !== 0) ? (
174+
<div className="">
175+
<UsersChartCard
176+
userStats={walletUserStatsTimeSeries}
177+
searchParams={searchParams}
178+
/>
188179
</div>
180+
) : (
181+
<EmptyStateCard
182+
metric="Connect"
183+
link="https://portal.thirdweb.com/connect/quickstart"
184+
/>
185+
)}
186+
<div className="grid gap-6 max-md:px-6 md:grid-cols-2">
187+
{walletConnections.length > 0 ? (
188+
<WalletDistributionCard data={walletConnections} />
189+
) : (
190+
<EmptyStateCard
191+
metric="Connect"
192+
link="https://portal.thirdweb.com/connect/quickstart"
193+
/>
194+
)}
195+
{inAppWalletUsage.length > 0 ? (
196+
<AuthMethodDistributionCard data={inAppWalletUsage} />
197+
) : (
198+
<EmptyStateCard
199+
metric="In-App Wallets"
200+
link="https://portal.thirdweb.com/typescript/v5/inAppWallet"
201+
/>
202+
)}
189203
</div>
204+
{userOpUsage.length > 0 ? (
205+
<TotalSponsoredChartCardUI
206+
searchParams={searchParams}
207+
data={userOpUsageTimeSeries}
208+
aggregatedData={userOpUsage}
209+
className="max-md:rounded-none max-md:border-r-0 max-md:border-l-0"
210+
/>
211+
) : (
212+
<EmptyStateCard
213+
metric="Sponsored Transactions"
214+
link="https://portal.thirdweb.com/typescript/v5/account-abstraction/get-started"
215+
/>
216+
)}
190217
</div>
191218
);
192219
}

‎apps/dashboard/src/app/team/components/Analytics/AnalyticsHeader.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,11 @@ export function AnalyticsHeader(props: {
99
const { title, interval, range } = props;
1010

1111
return (
12-
<div className="container flex flex-col items-start gap-6 px-2 py-6 md:h-[120px] md:flex-row md:items-center md:p-6 md:py-0">
12+
<div className="container flex flex-col items-start gap-3 py-10 md:flex-row md:items-center">
1313
<div className="flex-1">
14-
<h1 className="font-semibold text-3xl text-foreground">{title}</h1>
14+
<h1 className="font-semibold text-2xl tracking-tight md:text-3xl">
15+
{title}
16+
</h1>
1517
</div>
1618
<RangeSelector interval={interval} range={range} />
1719
</div>

‎apps/dashboard/src/app/team/components/Analytics/EmptyState.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import walletsIcon from "../../../../../public/assets/tw-icons/wallets.svg";
1717

1818
export function EmptyState() {
1919
return (
20-
<section className="flex items-start justify-center md:min-h-[500px]">
20+
<section className="flex w-full items-start justify-center md:min-h-[500px]">
2121
<div className="group container flex flex-col items-center justify-center gap-8 rounded-lg border bg-card p-6 py-24">
2222
<div className="flex max-w-[500px] flex-col items-center justify-center gap-6">
2323
<AnimatedIcons />

‎apps/dashboard/src/components/analytics/range-selector.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ export function RangeSelector({
7373
});
7474

7575
return (
76-
<div className="flex flex-col justify-end gap-3 sm:flex-row">
76+
<div className="flex justify-end gap-4">
7777
<DateRangeSelector
7878
range={localRange}
7979
setRange={(newRange) => {

0 commit comments

Comments
 (0)