diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/analytics/components/Summary.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/analytics/components/Summary.tsx
index bbd93ee53c6..8b08969fa17 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/analytics/components/Summary.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/analytics/components/Summary.tsx
@@ -1,4 +1,4 @@
-import { Stat } from "components/analytics/stat";
+import { StatCard } from "components/analytics/stat";
 import { ActivityIcon, UserIcon } from "lucide-react";
 import type { EcosystemWalletStats } from "types/analytics";
 
@@ -28,15 +28,17 @@ export function EcosystemWalletsSummary(props: {
 
   return (
     <div className="grid grid-cols-2 gap-4 lg:gap-6">
-      <Stat
+      <StatCard
         label="Total Users"
         value={allTimeStats?.uniqueWalletsConnected || 0}
         icon={ActivityIcon}
+        isPending={false}
       />
-      <Stat
+      <StatCard
         label="Monthly Active Users"
         value={monthlyStats?.uniqueWalletsConnected || 0}
         icon={UserIcon}
+        isPending={false}
       />
     </div>
   );
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
deleted file mode 100644
index 6c54ef15def..00000000000
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/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/team/[team_slug]/[project_slug]/connect/account-abstraction/page.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/page.tsx
index c1c124ffc28..bb660eddb46 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/page.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/page.tsx
@@ -1,4 +1,4 @@
-import { getAggregateUserOpUsage, getUserOpUsage } from "@/api/analytics";
+import { getUserOpUsage } from "@/api/analytics";
 import { getProject } from "@/api/projects";
 import { getTeamBySlug } from "@/api/team";
 import { getThirdwebClient } from "@/constants/thirdweb.server";
@@ -9,6 +9,7 @@ import {
 import { AccountAbstractionAnalytics } from "components/smart-wallets/AccountAbstractionAnalytics";
 import { notFound, redirect } from "next/navigation";
 import type { SearchParams } from "nuqs/server";
+import { AccountAbstractionSummary } from "../../../../../../components/smart-wallets/AccountAbstractionAnalytics/AccountAbstractionSummary";
 import { getAuthToken } from "../../../../../api/lib/getAuthToken";
 import { searchParamLoader } from "./search-params";
 
@@ -60,7 +61,7 @@ export default async function Page(props: {
     type: rangeType,
   };
 
-  const userOpStatsPromise = getUserOpUsage({
+  const userOpStats = await getUserOpUsage({
     teamId: project.teamId,
     projectId: project.id,
     from: range.from,
@@ -68,24 +69,21 @@ export default async function Page(props: {
     period: interval,
   });
 
-  const aggregateUserOpStatsPromise = getAggregateUserOpUsage({
-    teamId: team.id,
-    projectId: project.id,
-  });
-
-  const [userOpStats, aggregateUserOpStats] = await Promise.all([
-    userOpStatsPromise,
-    aggregateUserOpStatsPromise,
-  ]);
-
   return (
-    <AccountAbstractionAnalytics
-      userOpStats={userOpStats}
-      client={getThirdwebClient(authToken)}
-      teamId={project.teamId}
-      projectId={project.id}
-      teamSlug={params.team_slug}
-      aggregateUserOpStats={aggregateUserOpStats}
-    />
+    <div>
+      <AccountAbstractionSummary
+        teamId={project.teamId}
+        projectId={project.id}
+      />
+
+      <div className="h-10" />
+      <AccountAbstractionAnalytics
+        userOpStats={userOpStats}
+        client={getThirdwebClient(authToken)}
+        teamId={project.teamId}
+        projectId={project.id}
+        teamSlug={params.team_slug}
+      />
+    </div>
   );
 }
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
index 1fa77895e03..4630e251eb4 100644
--- 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
@@ -1,34 +1,7 @@
-import { getInAppWalletUsage } from "@/api/analytics";
 import { TrackedUnderlineLink } from "@/components/ui/tracked-link";
-import { InAppWalletsSummary } from "components/embedded-wallets/Analytics/Summary";
-import { subDays } from "date-fns";
 import { TRACKING_CATEGORY } from "../_constants";
 
-export async function InAppWalletsHeader({
-  teamId,
-  projectId,
-}: { teamId: string; projectId: string }) {
-  const allTimeStatsPromise = getInAppWalletUsage({
-    teamId,
-    projectId,
-    from: new Date(2022, 0, 1),
-    to: new Date(),
-    period: "all",
-  });
-
-  const monthlyStatsPromise = getInAppWalletUsage({
-    teamId,
-    projectId,
-    from: subDays(new Date(), 30),
-    to: new Date(),
-    period: "month",
-  });
-
-  const [allTimeStats, monthlyStats] = await Promise.all([
-    allTimeStatsPromise,
-    monthlyStatsPromise,
-  ]).catch(() => [null, null]);
-
+export async function InAppWalletsHeader() {
   return (
     <div>
       <h1 className="mb-1 font-semibold text-2xl tracking-tight lg:mb-2 lg:text-3xl">
@@ -47,10 +20,6 @@ export async function InAppWalletsHeader({
           Learn more
         </TrackedUnderlineLink>
       </p>
-      <InAppWalletsSummary
-        allTimeStats={allTimeStats || []}
-        monthlyStats={monthlyStats || []}
-      />
     </div>
   );
 }
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/layout.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/layout.tsx
index 17c338f4274..4c1cdce9a3b 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/layout.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/layout.tsx
@@ -23,9 +23,7 @@ export default async function Layout(props: {
 
   return (
     <div>
-      <InAppWalletsHeader teamId={project.teamId} projectId={project.id} />
-      <div className="h-8" />
-
+      <InAppWalletsHeader />
       <TabPathLinks
         links={[
           {
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
deleted file mode 100644
index 6c54ef15def..00000000000
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/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/team/[team_slug]/[project_slug]/connect/in-app-wallets/page.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/page.tsx
index babdd2da822..fa7aa16fcd6 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/page.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/in-app-wallets/page.tsx
@@ -1,7 +1,8 @@
+import { getProject } from "@/api/projects";
 import type { Range } from "components/analytics/date-range-selector";
 import { InAppWalletAnalytics } from "components/embedded-wallets/Analytics";
 import { redirect } from "next/navigation";
-import { getProject } from "../../../../../../@/api/projects";
+import { InAppWalletsSummary } from "../../../../../../components/embedded-wallets/Analytics/Summary";
 
 export default async function Page(props: {
   params: Promise<{ team_slug: string; project_slug: string }>;
@@ -39,11 +40,15 @@ export default async function Page(props: {
   }
 
   return (
-    <InAppWalletAnalytics
-      teamId={project.teamId}
-      projectId={project.id}
-      interval={interval}
-      range={range as Range}
-    />
+    <div>
+      <InAppWalletsSummary teamId={project.teamId} projectId={project.id} />
+      <div className="h-10" />
+      <InAppWalletAnalytics
+        teamId={project.teamId}
+        projectId={project.id}
+        interval={interval}
+        range={range as Range}
+      />
+    </div>
   );
 }
diff --git a/apps/dashboard/src/components/analytics/stat.tsx b/apps/dashboard/src/components/analytics/stat.tsx
index 0e29ee0dda6..be7621a44dc 100644
--- a/apps/dashboard/src/components/analytics/stat.tsx
+++ b/apps/dashboard/src/components/analytics/stat.tsx
@@ -1,16 +1,23 @@
-export const Stat: React.FC<{
+import { Skeleton } from "../../@/components/ui/skeleton";
+
+export const StatCard: React.FC<{
   label: string;
   value?: number;
   icon: React.FC<{ className?: string }>;
   formatter?: (value: number) => string;
-}> = ({ label, value, formatter, icon: Icon }) => {
+  isPending: boolean;
+}> = ({ label, value, formatter, icon: Icon, isPending }) => {
   return (
     <dl className="flex items-center justify-between gap-4 rounded-lg border border-border bg-card p-4 pr-6">
       <div>
         <dd className="mb-0.5 font-semibold text-2xl tracking-tight">
-          {value !== undefined && formatter
-            ? formatter(value)
-            : value?.toLocaleString()}
+          {isPending ? (
+            <Skeleton className="h-8 w-20" />
+          ) : value !== undefined && formatter ? (
+            formatter(value)
+          ) : (
+            value?.toLocaleString()
+          )}
         </dd>
         <dt className="text-muted-foreground text-sm">{label}</dt>
       </div>
diff --git a/apps/dashboard/src/components/embedded-wallets/Analytics/Summary.tsx b/apps/dashboard/src/components/embedded-wallets/Analytics/Summary.tsx
index 5839fd59f53..405d52958a3 100644
--- a/apps/dashboard/src/components/embedded-wallets/Analytics/Summary.tsx
+++ b/apps/dashboard/src/components/embedded-wallets/Analytics/Summary.tsx
@@ -1,10 +1,14 @@
-import { Stat } from "components/analytics/stat";
+import { getInAppWalletUsage } from "@/api/analytics";
+import { StatCard } from "components/analytics/stat";
+import { subDays } from "date-fns";
 import { ActivityIcon, UserIcon } from "lucide-react";
+import { Suspense } from "react";
 import type { InAppWalletStats } from "types/analytics";
 
-export function InAppWalletsSummary(props: {
+function InAppWalletsSummaryInner(props: {
   allTimeStats: InAppWalletStats[] | undefined;
   monthlyStats: InAppWalletStats[] | undefined;
+  isPending: boolean;
 }) {
   const allTimeStats = props.allTimeStats?.reduce(
     (acc, curr) => {
@@ -28,16 +32,75 @@ export function InAppWalletsSummary(props: {
 
   return (
     <div className="grid grid-cols-2 gap-4">
-      <Stat
+      <StatCard
         label="Total Users"
         value={allTimeStats?.uniqueWalletsConnected || 0}
         icon={ActivityIcon}
+        isPending={props.isPending}
       />
-      <Stat
+      <StatCard
         label="Monthly Active Users"
         value={monthlyStats?.uniqueWalletsConnected || 0}
         icon={UserIcon}
+        isPending={props.isPending}
       />
     </div>
   );
 }
+
+async function AsyncInAppWalletsSummary(props: {
+  teamId: string;
+  projectId: string;
+}) {
+  const { teamId, projectId } = props;
+  const allTimeStatsPromise = getInAppWalletUsage({
+    teamId,
+    projectId,
+    from: new Date(2022, 0, 1),
+    to: new Date(),
+    period: "all",
+  });
+
+  const monthlyStatsPromise = getInAppWalletUsage({
+    teamId,
+    projectId,
+    from: subDays(new Date(), 30),
+    to: new Date(),
+    period: "month",
+  });
+
+  const [allTimeStats, monthlyStats] = await Promise.all([
+    allTimeStatsPromise,
+    monthlyStatsPromise,
+  ]).catch(() => [null, null]);
+
+  return (
+    <InAppWalletsSummaryInner
+      allTimeStats={allTimeStats || undefined}
+      monthlyStats={monthlyStats || undefined}
+      isPending={false}
+    />
+  );
+}
+
+export function InAppWalletsSummary(props: {
+  teamId: string;
+  projectId: string;
+}) {
+  return (
+    <Suspense
+      fallback={
+        <InAppWalletsSummaryInner
+          allTimeStats={undefined}
+          monthlyStats={undefined}
+          isPending={true}
+        />
+      }
+    >
+      <AsyncInAppWalletsSummary
+        teamId={props.teamId}
+        projectId={props.projectId}
+      />
+    </Suspense>
+  );
+}
diff --git a/apps/dashboard/src/components/embedded-wallets/Analytics/index.tsx b/apps/dashboard/src/components/embedded-wallets/Analytics/index.tsx
index 23f825b70ea..99f16d8b32c 100644
--- a/apps/dashboard/src/components/embedded-wallets/Analytics/index.tsx
+++ b/apps/dashboard/src/components/embedded-wallets/Analytics/index.tsx
@@ -1,43 +1,34 @@
+import { getInAppWalletUsage } from "@/api/analytics";
 import {
   type Range,
   getLastNDaysRange,
 } from "components/analytics/date-range-selector";
-import { getInAppWalletUsage } from "../../../@/api/analytics";
+import { Suspense } from "react";
+import type { InAppWalletStats } from "../../../types/analytics";
 import { RangeSelector } from "../../analytics/range-selector";
 import { InAppWalletUsersChartCardUI } from "./InAppWalletUsersChartCard";
 
-export async function InAppWalletAnalytics({
-  teamId,
-  projectId,
-  interval,
-  range = getLastNDaysRange("last-120"),
-}: {
-  teamId: string;
-  projectId: string;
+type InAppWalletAnalyticsProps = {
   interval: "day" | "week";
-  range?: Range;
-}) {
-  const stats = await getInAppWalletUsage({
-    teamId,
-    projectId,
-    from: range.from,
-    to: range.to,
-    period: interval,
-  }).catch((error) => {
-    console.error(error);
-    return [];
-  });
+  range: Range;
+  stats: InAppWalletStats[];
+  isPending: boolean;
+};
 
+function InAppWalletAnalyticsInner({
+  interval,
+  range,
+  stats,
+  isPending,
+}: InAppWalletAnalyticsProps) {
   return (
     <div>
       <RangeSelector range={range} interval={interval} />
-
       <div className="h-6" />
-
       <div className="flex flex-col gap-4 lg:gap-6">
         <InAppWalletUsersChartCardUI
           inAppWalletStats={stats || []}
-          isPending={false}
+          isPending={isPending}
           title="Unique Users"
           description="The total number of active in-app wallet users on your project."
         />
@@ -45,3 +36,48 @@ export async function InAppWalletAnalytics({
     </div>
   );
 }
+type AsyncInAppWalletAnalyticsProps = Omit<
+  InAppWalletAnalyticsProps,
+  "stats" | "isPending"
+> & {
+  teamId: string;
+  projectId: string;
+};
+
+async function AsyncInAppWalletAnalytics(
+  props: AsyncInAppWalletAnalyticsProps,
+) {
+  const range = props.range ?? getLastNDaysRange("last-120");
+
+  const stats = await getInAppWalletUsage({
+    teamId: props.teamId,
+    projectId: props.projectId,
+    from: range.from,
+    to: range.to,
+    period: props.interval,
+  }).catch((error) => {
+    console.error(error);
+    return [];
+  });
+
+  return (
+    <InAppWalletAnalyticsInner
+      {...props}
+      stats={stats}
+      range={range}
+      isPending={false}
+    />
+  );
+}
+
+export function InAppWalletAnalytics(props: AsyncInAppWalletAnalyticsProps) {
+  return (
+    <Suspense
+      fallback={
+        <InAppWalletAnalyticsInner {...props} stats={[]} isPending={true} />
+      }
+    >
+      <AsyncInAppWalletAnalytics {...props} />
+    </Suspense>
+  );
+}
diff --git a/apps/dashboard/src/components/smart-wallets/AccountAbstractionAnalytics/AccountAbstractionSummary.tsx b/apps/dashboard/src/components/smart-wallets/AccountAbstractionAnalytics/AccountAbstractionSummary.tsx
index e0de3dec7f7..871ae786b90 100644
--- a/apps/dashboard/src/components/smart-wallets/AccountAbstractionAnalytics/AccountAbstractionSummary.tsx
+++ b/apps/dashboard/src/components/smart-wallets/AccountAbstractionAnalytics/AccountAbstractionSummary.tsx
@@ -1,18 +1,22 @@
-import { Stat } from "components/analytics/stat";
+import { getAggregateUserOpUsage } from "@/api/analytics";
+import { StatCard } from "components/analytics/stat";
 import { ActivityIcon, CoinsIcon } from "lucide-react";
+import { Suspense } from "react";
 import type { UserOpStats } from "types/analytics";
 
-export function AccountAbstractionSummary(props: {
-  aggregateUserOpUsageQuery?: UserOpStats;
+function AccountAbstractionSummaryInner(props: {
+  aggregateUserOpUsageQuery: UserOpStats | undefined;
+  isPending: boolean;
 }) {
   return (
     <div className="grid grid-cols-2 gap-4">
-      <Stat
+      <StatCard
         label="Mainnet Sponsored Transactions"
         value={props.aggregateUserOpUsageQuery?.successful || 0}
         icon={ActivityIcon}
+        isPending={props.isPending}
       />
-      <Stat
+      <StatCard
         label="Mainnet Gas Sponsored"
         value={props.aggregateUserOpUsageQuery?.sponsoredUsd || 0}
         formatter={(value: number) =>
@@ -22,7 +26,46 @@ export function AccountAbstractionSummary(props: {
           }).format(value)
         }
         icon={CoinsIcon}
+        isPending={props.isPending}
       />
     </div>
   );
 }
+
+async function AsyncAccountAbstractionSummary(props: {
+  teamId: string;
+  projectId: string;
+}) {
+  const aggregateUserOpStats = await getAggregateUserOpUsage({
+    teamId: props.teamId,
+    projectId: props.projectId,
+  });
+
+  return (
+    <AccountAbstractionSummaryInner
+      aggregateUserOpUsageQuery={aggregateUserOpStats}
+      isPending={false}
+    />
+  );
+}
+
+export function AccountAbstractionSummary(props: {
+  teamId: string;
+  projectId: string;
+}) {
+  return (
+    <Suspense
+      fallback={
+        <AccountAbstractionSummaryInner
+          aggregateUserOpUsageQuery={undefined}
+          isPending={true}
+        />
+      }
+    >
+      <AsyncAccountAbstractionSummary
+        teamId={props.teamId}
+        projectId={props.projectId}
+      />
+    </Suspense>
+  );
+}
diff --git a/apps/dashboard/src/components/smart-wallets/AccountAbstractionAnalytics/index.tsx b/apps/dashboard/src/components/smart-wallets/AccountAbstractionAnalytics/index.tsx
index 8f1fac41f1c..df0b8a88a74 100644
--- a/apps/dashboard/src/components/smart-wallets/AccountAbstractionAnalytics/index.tsx
+++ b/apps/dashboard/src/components/smart-wallets/AccountAbstractionAnalytics/index.tsx
@@ -12,7 +12,6 @@ import type { ThirdwebClient } from "thirdweb";
 import type { UserOpStats } from "types/analytics";
 import { SponsoredTransactionsTable } from "../../../app/team/[team_slug]/(team)/~/usage/overview/components/SponsoredTransactionsTable";
 import { searchParams } from "../../../app/team/[team_slug]/[project_slug]/connect/account-abstraction/search-params";
-import { AccountAbstractionSummary } from "./AccountAbstractionSummary";
 import { SponsoredTransactionsChartCard } from "./SponsoredTransactionsChartCard";
 import { TotalSponsoredChartCard } from "./TotalSponsoredChartCard";
 
@@ -22,7 +21,6 @@ export function AccountAbstractionAnalytics(props: {
   teamSlug: string;
   client: ThirdwebClient;
   projectId: string;
-  aggregateUserOpStats: UserOpStats;
 }) {
   const [isLoading, startTransition] = useTransition();
 
@@ -67,12 +65,6 @@ export function AccountAbstractionAnalytics(props: {
 
   return (
     <div>
-      <AccountAbstractionSummary
-        aggregateUserOpUsageQuery={props.aggregateUserOpStats}
-      />
-
-      <div className="h-10" />
-
       <div className="flex justify-end gap-3">
         <DateRangeSelector
           range={range}