[TOOL-4645] Dashboard: Improve Project overview page loading performance (#7261)

<!--

## 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 improving the loading state of various chart components in the dashboard by enhancing the `LoadingChartState` component with additional styling and refactoring the code to utilize asynchronous components for better performance and user experience.

### Detailed summary
- Updated `LoadingChartState` to accept a `className` prop for custom styling.
- Modified `Suspense` components in `Transactions`, `RpcMethodBarChartCard`, and `EngineCloudChartCard` to use improved `LoadingChartState`.
- Introduced new async components: `AsyncTotalSponsoredCard`, `AsyncAuthMethodDistributionCard`, and `AsyncAppHighlightsCard`.
- Refactored fetching logic for analytics data to use async/await pattern, improving readability and maintainability.

> ✨ 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 loading placeholders across analytics cards by simplifying their appearance and updating styling for a more consistent look.
  - Modularized data fetching for analytics cards, allowing each card to load and handle errors independently for a smoother user experience.

- **New Features**
  - Loading states for analytics cards now display updated visual styles with borders and adjusted heights.

- **Style**
  - Unified and customizable loading chart styles for better visual consistency.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: MananTank

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/EngineCloudChartCard/index.tsx

@@ -6,13 +6,7 @@ import { EngineCloudBarChartCardUI } from "./EngineCloudBarChartCardUI";
 
 export function EngineCloudChartCard(props: AnalyticsQueryParams) {
   return (
-    <Suspense
-      fallback={
-        <div className="h-[400px]">
-          <LoadingChartState />
-        </div>
-      }
-    >
+    <Suspense fallback={<LoadingChartState className="h-[377px] border" />}>
       <EngineCloudChartCardAsync {...props} />
     </Suspense>
   );

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/RpcMethodBarChartCard/index.tsx

@@ -7,13 +7,7 @@ import { RpcMethodBarChartCardUI } from "./RpcMethodBarChartCardUI";
 export function RpcMethodBarChartCard(props: AnalyticsQueryParams) {
   return (
     // TODO: Add better LoadingChartState
-    <Suspense
-      fallback={
-        <div className="h-[400px]">
-          <LoadingChartState />
-        </div>
-      }
-    >
+    <Suspense fallback={<LoadingChartState className="h-[377px] border" />}>
       <RpcMethodBarChartCardAsync {...props} />
     </Suspense>
   );

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/components/Transactions/index.tsx

@@ -13,13 +13,7 @@ export function TransactionsCharts(
 ) {
   return (
     // TODO: Add better LoadingChartState
-    <Suspense
-      fallback={
-        <div className="h-[400px]">
-          <LoadingChartState />
-        </div>
-      }
-    >
+    <Suspense fallback={<LoadingChartState className="h-[458px] border" />}>
       <TransactionsChartCardAsync {...props} />
     </Suspense>
   );

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

@@ -37,6 +37,7 @@ import {
   getChainMetadata,
 } from "thirdweb/chains";
 import { type WalletId, getWalletInfo } from "thirdweb/wallets";
+import { LoadingChartState } from "../../../../../../components/analytics/empty-chart-state";
 import { getAuthToken } from "../../../../api/lib/getAuthToken";
 import { loginRedirect } from "../../../../login/loginRedirect";
 import { CombinedBarChartCard } from "../../../components/Analytics/CombinedBarChartCard";
@@ -148,107 +149,29 @@ async function ProjectAnalytics(props: {
 }) {
   const { project, params, range, interval, searchParams, client } = props;
 
-  // Fetch all analytics data in parallel
-  const [
-    walletConnections,
-    walletUserStatsTimeSeries,
-    inAppWalletUsage,
-    userOpUsageTimeSeries,
-    userOpUsage,
-    universalBridgeUsage,
-  ] = await Promise.allSettled([
-    // Aggregated wallet connections
-    getWalletConnections({
-      teamId: project.teamId,
-      projectId: project.id,
-      from: range.from,
-      to: range.to,
-      period: "all",
-    }),
-    // Time series data for wallet users
-    getWalletUsers({
-      teamId: project.teamId,
-      projectId: project.id,
-      from: range.from,
-      to: range.to,
-      period: interval,
-    }),
-    // In-app wallet usage
-    getInAppWalletUsage({
-      teamId: project.teamId,
-      projectId: project.id,
-      from: range.from,
-      to: range.to,
-      period: "all",
-    }),
-    // User operations usage
-    getUserOpUsage({
-      teamId: project.teamId,
-      projectId: project.id,
-      from: range.from,
-      to: range.to,
-      period: interval,
-    }),
-    getUserOpUsage({
-      teamId: project.teamId,
-      projectId: project.id,
-      from: range.from,
-      to: range.to,
-      period: "all",
-    }),
-    // Universal Bridge
-    getUniversalBridgeUsage({
-      teamId: project.teamId,
-      projectId: project.id,
-      from: range.from,
-      to: range.to,
-      period: interval,
-    }),
-  ]);
-
   return (
     <div className="flex grow flex-col gap-6">
-      {walletUserStatsTimeSeries.status === "fulfilled" &&
-      universalBridgeUsage.status === "fulfilled" &&
-      walletUserStatsTimeSeries.value.some((w) => w.totalUsers !== 0) ? (
-        <div className="">
-          <AppHighlightsCard
-            chartKey={
-              (searchParams.appHighlights as keyof AggregatedMetrics) ??
-              "totalVolume"
-            }
-            params={params}
-            userStats={walletUserStatsTimeSeries.value}
-            volumeStats={universalBridgeUsage.value}
-            searchParams={searchParams}
-          />
-        </div>
-      ) : (
-        <EmptyStateCard
-          metric="Connect"
-          link="https://portal.thirdweb.com/connect/quickstart"
+      <Suspense fallback={<LoadingChartState className="h-[458px] border" />}>
+        <AsyncAppHighlightsCard
+          project={project}
+          range={range}
+          interval={interval}
+          searchParams={searchParams}
+          client={client}
+          params={params}
         />
-      )}
+      </Suspense>
+
       <div className="grid gap-6 md:grid-cols-2">
-        {walletConnections.status === "fulfilled" &&
-        walletConnections.value.length > 0 ? (
-          <WalletDistributionCard data={walletConnections.value} />
-        ) : (
-          <EmptyStateCard
-            metric="Connect"
-            link="https://portal.thirdweb.com/connect/quickstart"
-          />
-        )}
-        {inAppWalletUsage.status === "fulfilled" &&
-        inAppWalletUsage.value.length > 0 ? (
-          <AuthMethodDistributionCard data={inAppWalletUsage.value} />
-        ) : (
-          <EmptyStateCard
-            metric="In-App Wallets"
-            link="https://portal.thirdweb.com/typescript/v5/inAppWallet"
-          />
-        )}
+        <Suspense fallback={<LoadingChartState className="h-[431px] border" />}>
+          <AsyncWalletDistributionCard project={project} range={range} />
+        </Suspense>
+
+        <Suspense fallback={<LoadingChartState className="h-[431px] border" />}>
+          <AsyncAuthMethodDistributionCard project={project} range={range} />
+        </Suspense>
       </div>
+
       <TransactionsCharts
         searchParams={searchParams}
         from={range.from}
@@ -257,22 +180,16 @@ async function ProjectAnalytics(props: {
         teamId={project.teamId}
         client={client}
       />
-      {userOpUsageTimeSeries.status === "fulfilled" &&
-      userOpUsage.status === "fulfilled" &&
-      userOpUsage.value.length > 0 ? (
-        <div className="">
-          <TotalSponsoredCard
-            searchParams={searchParams}
-            data={userOpUsageTimeSeries.value}
-            aggregatedData={userOpUsage.value}
-          />
-        </div>
-      ) : (
-        <EmptyStateCard
-          metric="Sponsored Transactions"
-          link="https://portal.thirdweb.com/typescript/v5/account-abstraction/get-started"
+
+      <Suspense fallback={<LoadingChartState className="h-[458px] border" />}>
+        <AsyncTotalSponsoredCard
+          project={project}
+          range={range}
+          interval={interval}
+          searchParams={searchParams}
         />
-      )}
+      </Suspense>
+
       <RpcMethodBarChartCard
         from={range.from}
         to={range.to}
@@ -332,6 +249,154 @@ function processTimeSeriesData(
   return metrics;
 }
 
+async function AsyncTotalSponsoredCard(props: {
+  project: Project;
+  range: Range;
+  interval: "day" | "week";
+  searchParams: PageSearchParams;
+}) {
+  const [userOpUsageTimeSeries, userOpUsage] = await Promise.allSettled([
+    getUserOpUsage({
+      teamId: props.project.teamId,
+      projectId: props.project.id,
+      from: props.range.from,
+      to: props.range.to,
+      period: props.interval,
+    }),
+    getUserOpUsage({
+      teamId: props.project.teamId,
+      projectId: props.project.id,
+      from: props.range.from,
+      to: props.range.to,
+      period: "all",
+    }),
+  ]);
+
+  return userOpUsageTimeSeries.status === "fulfilled" &&
+    userOpUsage.status === "fulfilled" &&
+    userOpUsage.value.length > 0 ? (
+    <div className="">
+      <TotalSponsoredCard
+        searchParams={props.searchParams}
+        data={userOpUsageTimeSeries.value}
+        aggregatedData={userOpUsage.value}
+      />
+    </div>
+  ) : (
+    <EmptyStateCard
+      metric="Sponsored Transactions"
+      link="https://portal.thirdweb.com/typescript/v5/account-abstraction/get-started"
+    />
+  );
+}
+
+async function AsyncAuthMethodDistributionCard(props: {
+  project: Project;
+  range: Range;
+}) {
+  const inAppWalletUsage = await getInAppWalletUsage({
+    teamId: props.project.teamId,
+    projectId: props.project.id,
+    from: props.range.from,
+    to: props.range.to,
+    period: "all",
+  }).catch(() => undefined);
+
+  return inAppWalletUsage && inAppWalletUsage.length > 0 ? (
+    <AuthMethodDistributionCard data={inAppWalletUsage} />
+  ) : (
+    <EmptyStateCard
+      metric="In-App Wallets"
+      link="https://portal.thirdweb.com/typescript/v5/inAppWallet"
+    />
+  );
+}
+
+async function AsyncAppHighlightsCard(props: {
+  project: Project;
+  range: Range;
+  interval: "day" | "week";
+  searchParams: PageSearchParams;
+  client: ThirdwebClient;
+  params: PageParams;
+}) {
+  const [walletUserStatsTimeSeries, universalBridgeUsage] =
+    await Promise.allSettled([
+      getWalletUsers({
+        teamId: props.project.teamId,
+        projectId: props.project.id,
+        from: props.range.from,
+        to: props.range.to,
+        period: props.interval,
+      }),
+      getUniversalBridgeUsage({
+        teamId: props.project.teamId,
+        projectId: props.project.id,
+        from: props.range.from,
+        to: props.range.to,
+        period: props.interval,
+      }),
+    ]);
+
+  if (
+    walletUserStatsTimeSeries.status === "fulfilled" &&
+    universalBridgeUsage.status === "fulfilled" &&
+    walletUserStatsTimeSeries.value.some((w) => w.totalUsers !== 0)
+  ) {
+    return (
+      <div>
+        <AppHighlightsCard
+          chartKey={
+            (props.searchParams.appHighlights as keyof AggregatedMetrics) ??
+            "totalVolume"
+          }
+          params={props.params}
+          userStats={
+            walletUserStatsTimeSeries.status === "fulfilled"
+              ? walletUserStatsTimeSeries.value
+              : []
+          }
+          volumeStats={
+            universalBridgeUsage.status === "fulfilled"
+              ? universalBridgeUsage.value
+              : []
+          }
+          searchParams={props.searchParams}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <EmptyStateCard
+      metric="Connect"
+      link="https://portal.thirdweb.com/connect/quickstart"
+    />
+  );
+}
+
+async function AsyncWalletDistributionCard(props: {
+  project: Project;
+  range: Range;
+}) {
+  const walletConnections = await getWalletConnections({
+    teamId: props.project.teamId,
+    projectId: props.project.id,
+    from: props.range.from,
+    to: props.range.to,
+    period: "all",
+  }).catch(() => undefined);
+
+  return walletConnections && walletConnections.length > 0 ? (
+    <WalletDistributionCard data={walletConnections} />
+  ) : (
+    <EmptyStateCard
+      metric="Connect"
+      link="https://portal.thirdweb.com/connect/quickstart"
+    />
+  );
+}
+
 function AppHighlightsCard({
   chartKey,
   userStats,

apps/dashboard/src/components/analytics/empty-chart-state.tsx

@@ -3,6 +3,7 @@ import { LoadingDots } from "@/components/ui/LoadingDots";
 import { type ChartConfig, ChartContainer } from "@/components/ui/chart";
 import { useMemo } from "react";
 import { Area, AreaChart, Bar, BarChart } from "recharts";
+import { cn } from "../../@/lib/utils";
 
 type FakeCartData = {
   value: number;
@@ -37,9 +38,14 @@ export function EmptyChartState({
   );
 }
 
-export function LoadingChartState() {
+export function LoadingChartState({ className }: { className?: string }) {
   return (
-    <div className="pointer-events-none flex h-full w-full items-center justify-center rounded-lg bg-muted/30">
+    <div
+      className={cn(
+        "pointer-events-none flex h-full w-full items-center justify-center rounded-lg bg-muted/30",
+        className,
+      )}
+    >
       <LoadingDots />
     </div>
   );