Skip to content

Commit 8bb4d4b

Browse files
MananTankMananTank
committed
Dashboard: remove date selector from UB FTUX, improved skeletons (#7435)
<!-- ## 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 refactoring the `Page` component in the `loading.tsx` file and the `PayAnalytics` component in the `PayAnalytics.tsx` file, enhancing the structure and user experience by modifying the rendering of analytics and loading states. ### Detailed summary - Removed `ResponsiveSuspense` and `PayAnalyticsFilter` from `loading.tsx`. - Integrated `PayAnalytics` directly into the `Page` component. - Added `ResponsiveSuspense` with a skeleton loader in `PayAnalytics`. - Reorganized analytics display in `PayAnalytics`, including filtering and layout adjustments. > ✨ 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 the loading experience in the PayAnalytics section with responsive skeleton placeholders during data loading. - Updated the layout to display analytics filters above the loading state for better usability. - **Chores** - Removed unused loading and suspense logic from related pages to streamline the user interface. <!-- end of auto-generated comment: release notes by coderabbit.ai -->
1 parent 3c6668b commit 8bb4d4b

File tree

3 files changed

+73
-64
lines changed

3 files changed

+73
-64
lines changed

‎apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/universal-bridge/components/PayAnalytics.tsx

Lines changed: 64 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
1+
import { ResponsiveSuspense } from "responsive-rsc";
12
import type { ThirdwebClient } from "thirdweb";
23
import {
34
getUniversalBridgeUsage,
45
getUniversalBridgeWalletUsage,
56
} from "@/api/analytics";
67
import type { Range } from "@/components/analytics/date-range-selector";
78
import { CodeServer } from "@/components/ui/code/code.server";
9+
import { Skeleton } from "@/components/ui/skeleton";
810
import { apiCode, embedCode, sdkCode } from "./code-examples";
11+
import { PayAnalyticsFilter } from "./PayAnalyticsFilter";
912
import { PayCustomersTable } from "./PayCustomersTable";
1013
import { PayEmbedFTUX } from "./PayEmbedFTUX";
1114
import { PaymentHistory } from "./PaymentHistory";
@@ -96,44 +99,70 @@ export async function PayAnalytics(props: {
9699
}
97100

98101
return (
99-
<div className="flex flex-col gap-10 lg:gap-6">
100-
<GridWithSeparator>
101-
<div className="flex items-center border-border border-b pb-6 xl:border-none xl:pb-0">
102-
<TotalVolumePieChart
103-
data={volumeData?.filter((x) => x.status === "completed") || []}
104-
/>
105-
</div>
106-
<TotalPayVolume
107-
data={volumeData?.filter((x) => x.status === "completed") || []}
108-
dateFormat={dateFormat}
109-
/>
110-
</GridWithSeparator>
111-
112-
<div className="grid grid-cols-1 gap-6 xl:grid-cols-2">
113-
<CardContainer>
114-
<Payouts
115-
data={volumeData?.filter((x) => x.status === "completed") || []}
116-
dateFormat={dateFormat}
117-
/>
118-
</CardContainer>
119-
<CardContainer>
120-
<PaymentsSuccessRate data={volumeData || []} />
121-
</CardContainer>
102+
<div>
103+
<div className="mb-4 flex justify-start">
104+
<PayAnalyticsFilter />
122105
</div>
106+
<ResponsiveSuspense
107+
fallback={
108+
<div className="flex flex-col gap-6">
109+
<Skeleton className="h-[350px] border rounded-xl" />
110+
<div className="grid grid-cols-1 gap-6 xl:grid-cols-2">
111+
<Skeleton className="h-[350px] border rounded-xl" />
112+
<Skeleton className="h-[350px] border rounded-xl" />
113+
</div>
114+
<div className="grid grid-cols-1 gap-6 xl:grid-cols-2">
115+
<Skeleton className="h-[350px] border rounded-xl" />
116+
<Skeleton className="h-[350px] border rounded-xl" />
117+
</div>
118+
<Skeleton className="h-[500px] border rounded-xl" />
119+
</div>
120+
}
121+
searchParamsUsed={["from", "to", "interval"]}
122+
>
123+
<div className="flex flex-col gap-10 lg:gap-6">
124+
<GridWithSeparator>
125+
<div className="flex items-center border-border border-b pb-6 xl:border-none xl:pb-0">
126+
<TotalVolumePieChart
127+
data={volumeData?.filter((x) => x.status === "completed") || []}
128+
/>
129+
</div>
130+
<TotalPayVolume
131+
data={volumeData?.filter((x) => x.status === "completed") || []}
132+
dateFormat={dateFormat}
133+
/>
134+
</GridWithSeparator>
123135

124-
<GridWithSeparator>
125-
<div className="border-border border-b pb-6 xl:border-none xl:pb-0">
126-
<PayNewCustomers data={walletData || []} dateFormat={dateFormat} />
136+
<div className="grid grid-cols-1 gap-6 xl:grid-cols-2">
137+
<CardContainer>
138+
<Payouts
139+
data={volumeData?.filter((x) => x.status === "completed") || []}
140+
dateFormat={dateFormat}
141+
/>
142+
</CardContainer>
143+
<CardContainer>
144+
<PaymentsSuccessRate data={volumeData || []} />
145+
</CardContainer>
146+
</div>
147+
148+
<GridWithSeparator>
149+
<div className="border-border border-b pb-6 xl:border-none xl:pb-0">
150+
<PayNewCustomers
151+
data={walletData || []}
152+
dateFormat={dateFormat}
153+
/>
154+
</div>
155+
<PayCustomersTable client={props.client} data={walletData || []} />
156+
</GridWithSeparator>
157+
<CardContainer>
158+
<PaymentHistory
159+
client={props.client}
160+
projectClientId={props.projectClientId}
161+
teamId={props.teamId}
162+
/>
163+
</CardContainer>
127164
</div>
128-
<PayCustomersTable client={props.client} data={walletData || []} />
129-
</GridWithSeparator>
130-
<CardContainer>
131-
<PaymentHistory
132-
client={props.client}
133-
projectClientId={props.projectClientId}
134-
teamId={props.teamId}
135-
/>
136-
</CardContainer>
165+
</ResponsiveSuspense>
137166
</div>
138167
);
139168
}

‎apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/universal-bridge/loading.tsx

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/universal-bridge/page.tsx

Lines changed: 9 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,11 @@
11
import { loginRedirect } from "@app/login/loginRedirect";
22
import { ArrowUpRightIcon } from "lucide-react";
33
import { redirect } from "next/navigation";
4-
import {
5-
ResponsiveSearchParamsProvider,
6-
ResponsiveSuspense,
7-
} from "responsive-rsc";
4+
import { ResponsiveSearchParamsProvider } from "responsive-rsc";
85
import { getAuthToken } from "@/api/auth-token";
96
import { getProject } from "@/api/projects";
10-
import { Spinner } from "@/components/ui/Spinner/Spinner";
117
import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
128
import { PayAnalytics } from "./components/PayAnalytics";
13-
import { PayAnalyticsFilter } from "./components/PayAnalyticsFilter";
149
import { getUniversalBridgeFiltersFromSearchParams } from "./components/time";
1510

1611
export default async function Page(props: {
@@ -54,26 +49,14 @@ export default async function Page(props: {
5449
return (
5550
<ResponsiveSearchParamsProvider value={searchParams}>
5651
<div>
57-
<div className="mb-4 flex justify-start">
58-
<PayAnalyticsFilter />
59-
</div>
60-
<ResponsiveSuspense
61-
fallback={
62-
<div className="flex w-full items-center justify-center py-24">
63-
<Spinner className="size-8" />
64-
</div>
65-
}
66-
searchParamsUsed={["from", "to", "interval"]}
67-
>
68-
<PayAnalytics
69-
client={client}
70-
interval={interval}
71-
projectClientId={project.publishableKey}
72-
projectId={project.id}
73-
range={range}
74-
teamId={project.teamId}
75-
/>
76-
</ResponsiveSuspense>
52+
<PayAnalytics
53+
client={client}
54+
interval={interval}
55+
projectClientId={project.publishableKey}
56+
projectId={project.id}
57+
range={range}
58+
teamId={project.teamId}
59+
/>
7760

7861
<div className="h-10" />
7962
<div className="relative overflow-hidden rounded-lg border-2 border-green-500/20 bg-gradient-to-br from-card/80 to-card/50 p-4 shadow-[inset_0_1px_2px_0_rgba(0,0,0,0.02)]">

0 commit comments

Comments
 (0)