Dashboard: remove date selector from UB FTUX, improved skeletons

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

@@ -1,11 +1,14 @@
+import { ResponsiveSuspense } from "responsive-rsc";
 import type { ThirdwebClient } from "thirdweb";
 import {
   getUniversalBridgeUsage,
   getUniversalBridgeWalletUsage,
 } 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>
   );
 }

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)]">