From 8bb4d4bc1175bbc6ef23fdc19ec8e483b750c1e7 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Tue, 24 Jun 2025 22:27:52 +0000
Subject: [PATCH] Dashboard: remove date selector from UB FTUX, improved
 skeletons (#7435)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--

## 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 -->
---
 .../components/PayAnalytics.tsx               | 99 ++++++++++++-------
 .../(sidebar)/universal-bridge/loading.tsx    |  3 -
 .../(sidebar)/universal-bridge/page.tsx       | 35 ++-----
 3 files changed, 73 insertions(+), 64 deletions(-)
 delete mode 100644 apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/universal-bridge/loading.tsx

diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/universal-bridge/components/PayAnalytics.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/universal-bridge/components/PayAnalytics.tsx
index 84ce0ee17a6..8c2696a5c86 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/universal-bridge/components/PayAnalytics.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/universal-bridge/components/PayAnalytics.tsx
@@ -1,3 +1,4 @@
+import { ResponsiveSuspense } from "responsive-rsc";
 import type { ThirdwebClient } from "thirdweb";
 import {
   getUniversalBridgeUsage,
@@ -5,7 +6,9 @@ import {
 } from "@/api/analytics";
 import type { Range } from "@/components/analytics/date-range-selector";
 import { CodeServer } from "@/components/ui/code/code.server";
+import { Skeleton } from "@/components/ui/skeleton";
 import { apiCode, embedCode, sdkCode } from "./code-examples";
+import { PayAnalyticsFilter } from "./PayAnalyticsFilter";
 import { PayCustomersTable } from "./PayCustomersTable";
 import { PayEmbedFTUX } from "./PayEmbedFTUX";
 import { PaymentHistory } from "./PaymentHistory";
@@ -96,44 +99,70 @@ export async function PayAnalytics(props: {
   }
 
   return (
-    <div className="flex flex-col gap-10 lg:gap-6">
-      <GridWithSeparator>
-        <div className="flex items-center border-border border-b pb-6 xl:border-none xl:pb-0">
-          <TotalVolumePieChart
-            data={volumeData?.filter((x) => x.status === "completed") || []}
-          />
-        </div>
-        <TotalPayVolume
-          data={volumeData?.filter((x) => x.status === "completed") || []}
-          dateFormat={dateFormat}
-        />
-      </GridWithSeparator>
-
-      <div className="grid grid-cols-1 gap-6 xl:grid-cols-2">
-        <CardContainer>
-          <Payouts
-            data={volumeData?.filter((x) => x.status === "completed") || []}
-            dateFormat={dateFormat}
-          />
-        </CardContainer>
-        <CardContainer>
-          <PaymentsSuccessRate data={volumeData || []} />
-        </CardContainer>
+    <div>
+      <div className="mb-4 flex justify-start">
+        <PayAnalyticsFilter />
       </div>
+      <ResponsiveSuspense
+        fallback={
+          <div className="flex flex-col gap-6">
+            <Skeleton className="h-[350px] border rounded-xl" />
+            <div className="grid grid-cols-1 gap-6 xl:grid-cols-2">
+              <Skeleton className="h-[350px] border rounded-xl" />
+              <Skeleton className="h-[350px] border rounded-xl" />
+            </div>
+            <div className="grid grid-cols-1 gap-6 xl:grid-cols-2">
+              <Skeleton className="h-[350px] border rounded-xl" />
+              <Skeleton className="h-[350px] border rounded-xl" />
+            </div>
+            <Skeleton className="h-[500px] border rounded-xl" />
+          </div>
+        }
+        searchParamsUsed={["from", "to", "interval"]}
+      >
+        <div className="flex flex-col gap-10 lg:gap-6">
+          <GridWithSeparator>
+            <div className="flex items-center border-border border-b pb-6 xl:border-none xl:pb-0">
+              <TotalVolumePieChart
+                data={volumeData?.filter((x) => x.status === "completed") || []}
+              />
+            </div>
+            <TotalPayVolume
+              data={volumeData?.filter((x) => x.status === "completed") || []}
+              dateFormat={dateFormat}
+            />
+          </GridWithSeparator>
 
-      <GridWithSeparator>
-        <div className="border-border border-b pb-6 xl:border-none xl:pb-0">
-          <PayNewCustomers data={walletData || []} dateFormat={dateFormat} />
+          <div className="grid grid-cols-1 gap-6 xl:grid-cols-2">
+            <CardContainer>
+              <Payouts
+                data={volumeData?.filter((x) => x.status === "completed") || []}
+                dateFormat={dateFormat}
+              />
+            </CardContainer>
+            <CardContainer>
+              <PaymentsSuccessRate data={volumeData || []} />
+            </CardContainer>
+          </div>
+
+          <GridWithSeparator>
+            <div className="border-border border-b pb-6 xl:border-none xl:pb-0">
+              <PayNewCustomers
+                data={walletData || []}
+                dateFormat={dateFormat}
+              />
+            </div>
+            <PayCustomersTable client={props.client} data={walletData || []} />
+          </GridWithSeparator>
+          <CardContainer>
+            <PaymentHistory
+              client={props.client}
+              projectClientId={props.projectClientId}
+              teamId={props.teamId}
+            />
+          </CardContainer>
         </div>
-        <PayCustomersTable client={props.client} data={walletData || []} />
-      </GridWithSeparator>
-      <CardContainer>
-        <PaymentHistory
-          client={props.client}
-          projectClientId={props.projectClientId}
-          teamId={props.teamId}
-        />
-      </CardContainer>
+      </ResponsiveSuspense>
     </div>
   );
 }
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/universal-bridge/loading.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/universal-bridge/loading.tsx
deleted file mode 100644
index 6c54ef15def..00000000000
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/universal-bridge/loading.tsx
+++ /dev/null
@@ -1,3 +0,0 @@
-"use client";
-
-export { GenericLoadingPage as default } from "@/components/blocks/skeletons/GenericLoadingPage";
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/universal-bridge/page.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/universal-bridge/page.tsx
index 61e28bd6da2..c725d9360ce 100644
--- a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/universal-bridge/page.tsx
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/universal-bridge/page.tsx
@@ -1,16 +1,11 @@
 import { loginRedirect } from "@app/login/loginRedirect";
 import { ArrowUpRightIcon } from "lucide-react";
 import { redirect } from "next/navigation";
-import {
-  ResponsiveSearchParamsProvider,
-  ResponsiveSuspense,
-} from "responsive-rsc";
+import { ResponsiveSearchParamsProvider } from "responsive-rsc";
 import { getAuthToken } from "@/api/auth-token";
 import { getProject } from "@/api/projects";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { PayAnalytics } from "./components/PayAnalytics";
-import { PayAnalyticsFilter } from "./components/PayAnalyticsFilter";
 import { getUniversalBridgeFiltersFromSearchParams } from "./components/time";
 
 export default async function Page(props: {
@@ -54,26 +49,14 @@ export default async function Page(props: {
   return (
     <ResponsiveSearchParamsProvider value={searchParams}>
       <div>
-        <div className="mb-4 flex justify-start">
-          <PayAnalyticsFilter />
-        </div>
-        <ResponsiveSuspense
-          fallback={
-            <div className="flex w-full items-center justify-center py-24">
-              <Spinner className="size-8" />
-            </div>
-          }
-          searchParamsUsed={["from", "to", "interval"]}
-        >
-          <PayAnalytics
-            client={client}
-            interval={interval}
-            projectClientId={project.publishableKey}
-            projectId={project.id}
-            range={range}
-            teamId={project.teamId}
-          />
-        </ResponsiveSuspense>
+        <PayAnalytics
+          client={client}
+          interval={interval}
+          projectClientId={project.publishableKey}
+          projectId={project.id}
+          range={range}
+          teamId={project.teamId}
+        />
 
         <div className="h-10" />
         <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)]">