diff --git a/apps/web/app/(app)/[emailAccountId]/clean/history/page.tsx b/apps/web/app/(app)/[emailAccountId]/clean/history/page.tsx
index 293304ed28..319403392d 100644
--- a/apps/web/app/(app)/[emailAccountId]/clean/history/page.tsx
+++ b/apps/web/app/(app)/[emailAccountId]/clean/history/page.tsx
@@ -1,7 +1,9 @@
+import { Suspense } from "react";
 import Link from "next/link";
 import { PlusIcon } from "lucide-react";
 import { CleanHistory } from "@/app/(app)/[emailAccountId]/clean/CleanHistory";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
+import { Loading } from "@/components/Loading";
 import { PageHeading } from "@/components/Typography";
 import { Button } from "@/components/ui/button";
 import { prefixPath } from "@/utils/path";
@@ -25,7 +27,9 @@ export default async function CleanHistoryPage(props: {
         </div>
       </CardHeader>
       <CardContent>
-        <CleanHistory />
+        <Suspense fallback={<Loading />}>
+          <CleanHistory />
+        </Suspense>
       </CardContent>
     </Card>
   );
diff --git a/apps/web/app/(app)/[emailAccountId]/clean/onboarding/page.tsx b/apps/web/app/(app)/[emailAccountId]/clean/onboarding/page.tsx
index e1bc7fc1b4..6ea5d7c6d5 100644
--- a/apps/web/app/(app)/[emailAccountId]/clean/onboarding/page.tsx
+++ b/apps/web/app/(app)/[emailAccountId]/clean/onboarding/page.tsx
@@ -1,5 +1,6 @@
 import { Suspense } from "react";
 import { Card, CardTitle } from "@/components/ui/card";
+import { Loading } from "@/components/Loading";
 import { IntroStep } from "@/app/(app)/[emailAccountId]/clean/IntroStep";
 import { ActionSelectionStep } from "@/app/(app)/[emailAccountId]/clean/ActionSelectionStep";
 import { CleanInstructionsStep } from "@/app/(app)/[emailAccountId]/clean/CleanInstructionsStep";
@@ -100,7 +101,7 @@ export default async function CleanPage(props: {
           key={step}
           fallback={
             <div className="flex h-[400px] items-center justify-center">
-              Loading...
+              <Loading />
             </div>
           }
         >
diff --git a/apps/web/app/(app)/[emailAccountId]/clean/page.tsx b/apps/web/app/(app)/[emailAccountId]/clean/page.tsx
index 7a1776a641..206dbf0fd7 100644
--- a/apps/web/app/(app)/[emailAccountId]/clean/page.tsx
+++ b/apps/web/app/(app)/[emailAccountId]/clean/page.tsx
@@ -1,7 +1,9 @@
+import { Suspense } from "react";
 import { redirect } from "next/navigation";
 import { getLastJob } from "@/app/(app)/[emailAccountId]/clean/helpers";
 import { ConfirmationStep } from "@/app/(app)/[emailAccountId]/clean/ConfirmationStep";
 import { Card } from "@/components/ui/card";
+import { Loading } from "@/components/Loading";
 import { prefixPath } from "@/utils/path";
 import { checkUserOwnsEmailAccount } from "@/utils/email-account";
 
@@ -18,20 +20,22 @@ export default async function CleanPage({
 
   return (
     <Card className="my-4 max-w-2xl p-6 sm:mx-4 md:mx-auto">
-      <ConfirmationStep
-        showFooter
-        action={lastJob.action}
-        timeRange={lastJob.daysOld}
-        instructions={lastJob.instructions ?? undefined}
-        skips={{
-          reply: lastJob.skipReply ?? true,
-          starred: lastJob.skipStarred ?? true,
-          calendar: lastJob.skipCalendar ?? true,
-          receipt: lastJob.skipReceipt ?? false,
-          attachment: lastJob.skipAttachment ?? false,
-        }}
-        reuseSettings={true}
-      />
+      <Suspense fallback={<Loading />}>
+        <ConfirmationStep
+          showFooter
+          action={lastJob.action}
+          timeRange={lastJob.daysOld}
+          instructions={lastJob.instructions ?? undefined}
+          skips={{
+            reply: lastJob.skipReply ?? true,
+            starred: lastJob.skipStarred ?? true,
+            calendar: lastJob.skipCalendar ?? true,
+            receipt: lastJob.skipReceipt ?? false,
+            attachment: lastJob.skipAttachment ?? false,
+          }}
+          reuseSettings={true}
+        />
+      </Suspense>
     </Card>
   );
 }
diff --git a/apps/web/app/(app)/[emailAccountId]/clean/run/page.tsx b/apps/web/app/(app)/[emailAccountId]/clean/run/page.tsx
index 5003f959ef..9e66df7816 100644
--- a/apps/web/app/(app)/[emailAccountId]/clean/run/page.tsx
+++ b/apps/web/app/(app)/[emailAccountId]/clean/run/page.tsx
@@ -1,6 +1,8 @@
+import { Suspense } from "react";
 import { getThreadsByJobId } from "@/utils/redis/clean";
 import prisma from "@/utils/prisma";
 import { CardTitle } from "@/components/ui/card";
+import { Loading } from "@/components/Loading";
 import {
   getJobById,
   getLastJob,
@@ -44,12 +46,14 @@ export default async function CleanRunPage(props: {
   ]);
 
   return (
-    <CleanRun
-      isPreviewBatch={isPreviewBatch === "true"}
-      job={job}
-      threads={threads}
-      total={total}
-      done={done}
-    />
+    <Suspense fallback={<Loading />}>
+      <CleanRun
+        isPreviewBatch={isPreviewBatch === "true"}
+        job={job}
+        threads={threads}
+        total={total}
+        done={done}
+      />
+    </Suspense>
   );
 }