Add loading.tsx for connect pages (#5240)

MananTank · MananTank · commit c2a90542d7f8 · 2024-10-30T23:40:45.000Z
## Problem solved

Short description of the bug fixed or feature added

&lt;!-- start pr-codex --&gt;

---

## PR-Codex overview
This PR primarily focuses on standardizing loading pages across various components in the dashboard by introducing a `GenericLoadingPage`. It also refines data fetching error handling and enhances the `InAppWalletsHeader` and `InAppWallets` pages with improved stats handling.

### Detailed summary
- Deleted multiple `layout.tsx` files.
- Added `"use client"` directive to various loading components.
- Implemented `GenericLoadingPage` for consistent loading UI.
- Improved error handling in `getInAppWalletUsage` function.
- Enhanced `InAppWalletsHeader` with Promise.all for stats fetching.
- Updated `InAppWallets` pages to handle empty stats gracefully.
- Added footer section to several pages for better UX.

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

&lt;!-- end pr-codex --&gt;
diff --git a/apps/dashboard/src/@/components/blocks/skeletons/GenericLoadingPage.tsx b/apps/dashboard/src/@/components/blocks/skeletons/GenericLoadingPage.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+
+export function GenericLoadingPage() {
+  return (
+    <div className="flex min-h-[500px] grow items-center justify-center rounded-lg border border-border">
+      <Spinner className="size-10" />
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/(dashboard)/dashboard/connect/account-abstraction/[clientId]/loading.tsx b/apps/dashboard/src/app/(dashboard)/dashboard/connect/account-abstraction/[clientId]/loading.tsx
@@ -0,0 +1,3 @@
+"use client";
+
+export { GenericLoadingPage as default } from "@/components/blocks/skeletons/GenericLoadingPage";
diff --git a/apps/dashboard/src/app/(dashboard)/dashboard/connect/account-abstraction/loading.tsx b/apps/dashboard/src/app/(dashboard)/dashboard/connect/account-abstraction/loading.tsx
@@ -0,0 +1,3 @@
+"use client";
+
+export { GenericLoadingPage as default } from "@/components/blocks/skeletons/GenericLoadingPage";
diff --git a/apps/dashboard/src/app/(dashboard)/dashboard/connect/analytics/[clientId]/loading.tsx b/apps/dashboard/src/app/(dashboard)/dashboard/connect/analytics/[clientId]/loading.tsx
@@ -0,0 +1,3 @@
+"use client";
+
+export { GenericLoadingPage as default } from "@/components/blocks/skeletons/GenericLoadingPage";
diff --git a/apps/dashboard/src/app/(dashboard)/dashboard/connect/analytics/loading.tsx b/apps/dashboard/src/app/(dashboard)/dashboard/connect/analytics/loading.tsx
@@ -0,0 +1,3 @@
+"use client";
+
+export { GenericLoadingPage as default } from "@/components/blocks/skeletons/GenericLoadingPage";
diff --git a/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/loading.tsx b/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/loading.tsx
@@ -0,0 +1,3 @@
+"use client";
+
+export { GenericLoadingPage as default } from "@/components/blocks/skeletons/GenericLoadingPage";
diff --git a/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/create/loading.tsx b/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/create/loading.tsx
@@ -0,0 +1,3 @@
+"use client";
+
+export { GenericLoadingPage as default } from "@/components/blocks/skeletons/GenericLoadingPage";
diff --git a/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/loading.tsx b/apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/loading.tsx
@@ -0,0 +1,3 @@
+"use client";
+
+export { GenericLoadingPage as default } from "@/components/blocks/skeletons/GenericLoadingPage";
diff --git a/apps/dashboard/src/app/(dashboard)/dashboard/connect/in-app-wallets/[clientId]/analytics/loading.tsx b/apps/dashboard/src/app/(dashboard)/dashboard/connect/in-app-wallets/[clientId]/analytics/loading.tsx
@@ -0,0 +1,3 @@
+"use client";
+
+export { GenericLoadingPage as default } from "@/components/blocks/skeletons/GenericLoadingPage";
diff --git a/apps/dashboard/src/app/(dashboard)/dashboard/connect/in-app-wallets/[clientId]/config/loading.tsx b/apps/dashboard/src/app/(dashboard)/dashboard/connect/in-app-wallets/[clientId]/config/loading.tsx
@@ -0,0 +1,3 @@
+"use client";
+
+export { GenericLoadingPage as default } from "@/components/blocks/skeletons/GenericLoadingPage";
diff --git a/apps/dashboard/src/app/(dashboard)/dashboard/connect/in-app-wallets/[clientId]/layout.tsx b/apps/dashboard/src/app/(dashboard)/dashboard/connect/in-app-wallets/[clientId]/layout.tsx
@@ -2,6 +2,7 @@ import { InAppWalletsSummary } from "components/embedded-wallets/Analytics/Summa
 import { getInAppWalletUsage } from "data/analytics/wallets/in-app";
 import { redirect } from "next/navigation";
 import { getAuthToken } from "../../../../../api/lib/getAuthToken";
+import { InAppWaletFooterSection } from "../../../../../team/[team_slug]/[project_slug]/connect/in-app-wallets/_components/footer";
 import { PageHeader } from "../PageHeader";
 import { getInAppWalletSupportedAPIKeys } from "../getInAppWalletSupportedAPIKeys";
 import { InAppWalletsAPIKeysMenu } from "../inAppWalletsAPIKeysMenu";
@@ -32,20 +33,25 @@ export default async function Page(props: {
     redirect("/dashboard/connect/in-app-wallets");
   }
 
-  const allTimeStats = await getInAppWalletUsage({
+  const allTimeStatsPromise = getInAppWalletUsage({
     clientId,
     from: new Date(2022, 0, 1),
     to: new Date(),
     period: "all",
   });
 
-  const monthlyStats = await getInAppWalletUsage({
+  const monthlyStatsPromise = getInAppWalletUsage({
     clientId,
     from: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
     to: new Date(),
     period: "month",
   });
 
+  const [allTimeStats, monthlyStats] = await Promise.all([
+    allTimeStatsPromise,
+    monthlyStatsPromise,
+  ]).catch(() => [null, null]);
+
   return (
     <div>
       {/* header */}
@@ -65,14 +71,16 @@ export default async function Page(props: {
       <div className="h-8" />
 
       <InAppWalletsSummary
-        allTimeStats={allTimeStats}
-        monthlyStats={monthlyStats}
+        allTimeStats={allTimeStats || []}
+        monthlyStats={monthlyStats || []}
       />
 
       <div className="h-8" />
       <Tabs clientId={clientId} />
       <div className="h-8" />
       {props.children}
+      <div className="h-16" />
+      <InAppWaletFooterSection trackingCategory="embedded-wallet" />
     </div>
   );
 }
diff --git a/apps/dashboard/src/app/(dashboard)/dashboard/connect/in-app-wallets/[clientId]/loading.tsx b/apps/dashboard/src/app/(dashboard)/dashboard/connect/in-app-wallets/[clientId]/loading.tsx
@@ -0,0 +1,3 @@
+"use client";
+
+export { GenericLoadingPage as default } from "@/components/blocks/skeletons/GenericLoadingPage";
diff --git a/apps/dashboard/src/app/(dashboard)/dashboard/connect/in-app-wallets/[clientId]/users/loading.tsx b/apps/dashboard/src/app/(dashboard)/dashboard/connect/in-app-wallets/[clientId]/users/loading.tsx
@@ -0,0 +1,3 @@
+"use client";
+
+export { GenericLoadingPage as default } from "@/components/blocks/skeletons/GenericLoadingPage";
diff --git a/apps/dashboard/src/app/(dashboard)/dashboard/connect/in-app-wallets/layout.tsx b/apps/dashboard/src/app/(dashboard)/dashboard/connect/in-app-wallets/layout.tsx
diff --git a/apps/dashboard/src/app/(dashboard)/dashboard/connect/in-app-wallets/loading.tsx b/apps/dashboard/src/app/(dashboard)/dashboard/connect/in-app-wallets/loading.tsx
@@ -0,0 +1,3 @@
+"use client";
+
+export { GenericLoadingPage as default } from "@/components/blocks/skeletons/GenericLoadingPage";
diff --git a/apps/dashboard/src/app/(dashboard)/dashboard/connect/in-app-wallets/page.tsx b/apps/dashboard/src/app/(dashboard)/dashboard/connect/in-app-wallets/page.tsx
@@ -1,6 +1,7 @@
 import { redirect } from "next/navigation";
 import { NoApiKeys } from "../../../../../components/settings/ApiKeys/NoApiKeys";
 import { getAuthToken } from "../../../../api/lib/getAuthToken";
+import { InAppWaletFooterSection } from "../../../../team/[team_slug]/[project_slug]/connect/in-app-wallets/_components/footer";
 import { PageHeader } from "./PageHeader";
 import { getInAppWalletSupportedAPIKeys } from "./getInAppWalletSupportedAPIKeys";
 
@@ -25,6 +26,8 @@ export default async function Page() {
       <PageHeader />
       <div className="h-8" />
       <NoApiKeys service="in-app wallets" />
+      <div className="h-16" />
+      <InAppWaletFooterSection trackingCategory="embedded-wallet" />
     </div>
   );
 }
diff --git a/apps/dashboard/src/app/(dashboard)/dashboard/connect/pay/[id]/loading.tsx b/apps/dashboard/src/app/(dashboard)/dashboard/connect/pay/[id]/loading.tsx
@@ -0,0 +1,3 @@
+"use client";
+
+export { GenericLoadingPage as default } from "@/components/blocks/skeletons/GenericLoadingPage";
diff --git a/apps/dashboard/src/app/(dashboard)/dashboard/connect/pay/[id]/settings/loading.tsx b/apps/dashboard/src/app/(dashboard)/dashboard/connect/pay/[id]/settings/loading.tsx
@@ -0,0 +1,3 @@
+"use client";
+
+export { GenericLoadingPage as default } from "@/components/blocks/skeletons/GenericLoadingPage";
diff --git a/apps/dashboard/src/app/(dashboard)/dashboard/connect/pay/[id]/webhooks/loading.tsx b/apps/dashboard/src/app/(dashboard)/dashboard/connect/pay/[id]/webhooks/loading.tsx
@@ -0,0 +1,3 @@
+"use client";
+
+export { GenericLoadingPage as default } from "@/components/blocks/skeletons/GenericLoadingPage";
diff --git a/apps/dashboard/src/app/(dashboard)/dashboard/connect/pay/components/webhooks.client.tsx b/apps/dashboard/src/app/(dashboard)/dashboard/connect/pay/components/webhooks.client.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
-import { Spinner } from "@/components/ui/Spinner/Spinner";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -47,6 +46,7 @@ import { useForm } from "react-hook-form";
 import { toast } from "sonner";
 import { shortenString } from "utils/usedapp-external";
 import { z } from "zod";
+import GenericLoadingPage from "../loading";
 
 type Webhook = {
   url: string;
@@ -79,7 +79,7 @@ export function PayWebhooksPage(props: PayWebhooksPageProps) {
   });
 
   if (webhooksQuery.isPending) {
-    return <Spinner className="mx-auto size-8" />;
+    return <GenericLoadingPage />;
   }
 
   if (!webhooksQuery.data?.length) {
diff --git a/apps/dashboard/src/app/(dashboard)/dashboard/connect/pay/loading.tsx b/apps/dashboard/src/app/(dashboard)/dashboard/connect/pay/loading.tsx
@@ -0,0 +1,3 @@
+"use client";
+
+export { GenericLoadingPage as default } from "@/components/blocks/skeletons/GenericLoadingPage";
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/loading.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/loading.tsx
@@ -0,0 +1,3 @@
+"use client";
+
+export { GenericLoadingPage as default } from "@/components/blocks/skeletons/GenericLoadingPage";
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/loading.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/loading.tsx
@@ -0,0 +1,3 @@
+"use client";
+
+export { GenericLoadingPage as default } from "@/components/blocks/skeletons/GenericLoadingPage";
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/ecosystem/[slug]/(active)/loading.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/ecosystem/[slug]/(active)/loading.tsx
@@ -0,0 +1,3 @@
+"use client";
+
+export { GenericLoadingPage as default } from "@/components/blocks/skeletons/GenericLoadingPage";
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/ecosystem/create/loading.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/ecosystem/create/loading.tsx
@@ -0,0 +1,3 @@
+"use client";
+
+export { GenericLoadingPage as default } from "@/components/blocks/skeletons/GenericLoadingPage";
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/ecosystem/loading.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/ecosystem/loading.tsx
@@ -0,0 +1,3 @@
+"use client";
+
+export { GenericLoadingPage as default } from "@/components/blocks/skeletons/GenericLoadingPage";
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/_components/header.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/_components/header.tsx
@@ -4,20 +4,25 @@ import { getInAppWalletUsage } from "data/analytics/wallets/in-app";
 import { TRACKING_CATEGORY } from "../_constants";
 
 export async function InAppWalletsHeader({ clientId }: { clientId: string }) {
-  const allTimeStats = await getInAppWalletUsage({
+  const allTimeStatsPromise = getInAppWalletUsage({
     clientId,
     from: new Date(2022, 0, 1),
     to: new Date(),
     period: "all",
   });
 
-  const monthlyStats = await getInAppWalletUsage({
+  const monthlyStatsPromise = getInAppWalletUsage({
     clientId,
     from: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
     to: new Date(),
     period: "month",
   });
 
+  const [allTimeStats, monthlyStats] = await Promise.all([
+    allTimeStatsPromise,
+    monthlyStatsPromise,
+  ]).catch(() => [null, null]);
+
   return (
     <div>
       <h1 className="mb-3 font-semibold text-2xl tracking-tight md:text-3xl">
@@ -38,8 +43,8 @@ export async function InAppWalletsHeader({ clientId }: { clientId: string }) {
         </TrackedLinkTW>
       </p>
       <InAppWalletsSummary
-        allTimeStats={allTimeStats}
-        monthlyStats={monthlyStats}
+        allTimeStats={allTimeStats || []}
+        monthlyStats={monthlyStats || []}
       />
     </div>
   );
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/analytics/loading.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/analytics/loading.tsx
@@ -0,0 +1,3 @@
+"use client";
+
+export { GenericLoadingPage as default } from "@/components/blocks/skeletons/GenericLoadingPage";
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/config/loading.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/config/loading.tsx
@@ -0,0 +1,3 @@
+"use client";
+
+export { GenericLoadingPage as default } from "@/components/blocks/skeletons/GenericLoadingPage";
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/loading.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/loading.tsx
@@ -0,0 +1,3 @@
+"use client";
+
+export { GenericLoadingPage as default } from "@/components/blocks/skeletons/GenericLoadingPage";
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/users/loading.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/users/loading.tsx
@@ -0,0 +1,3 @@
+"use client";
+
+export { GenericLoadingPage as default } from "@/components/blocks/skeletons/GenericLoadingPage";
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/pay/loading.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/pay/loading.tsx
@@ -0,0 +1,3 @@
+"use client";
+
+export { GenericLoadingPage as default } from "@/components/blocks/skeletons/GenericLoadingPage";
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/pay/webhooks/loading.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/pay/webhooks/loading.tsx
@@ -0,0 +1,3 @@
+"use client";
+
+export { GenericLoadingPage as default } from "@/components/blocks/skeletons/GenericLoadingPage";
diff --git a/apps/dashboard/src/components/embedded-wallets/Analytics/index.tsx b/apps/dashboard/src/components/embedded-wallets/Analytics/index.tsx
@@ -20,7 +20,7 @@ export async function InAppWalletAnalytics({
     from: range.from,
     to: range.to,
     period: interval,
-  });
+  }).catch(() => null);
 
   return (
     <div>
@@ -29,7 +29,10 @@ export async function InAppWalletAnalytics({
       <div className="h-6" />
 
       <div className="flex flex-col gap-4 lg:gap-6">
-        <InAppWalletUsersChartCard inAppWalletStats={stats} isPending={false} />
+        <InAppWalletUsersChartCard
+          inAppWalletStats={stats || []}
+          isPending={false}
+        />
       </div>
     </div>
   );
diff --git a/apps/dashboard/src/data/analytics/wallets/in-app.ts b/apps/dashboard/src/data/analytics/wallets/in-app.ts
@@ -1,3 +1,4 @@
+import type { InAppWalletStats } from "@3rdweb-sdk/react/hooks/useApi";
 import { fetchAnalytics } from "../fetch-analytics";
 
 export async function getInAppWalletUsage(args: {
@@ -28,11 +29,13 @@ export async function getInAppWalletUsage(args: {
       },
     },
   );
-  const json = await res?.json();
 
-  if (!res || res.status !== 200) {
-    throw new Error(json.message);
+  if (res?.status !== 200) {
+    console.error("Failed to fetch in-app wallet stats");
+    return null;
   }
 
-  return json.data;
+  const json = await res.json();
+
+  return json.data as InAppWalletStats[];
 }

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+"use client";`
	`2`	`+`
	`3`	`+export { GenericLoadingPage as default } from "@/components/blocks/skeletons/GenericLoadingPage";`