diff --git a/app/routes/_index.tsx b/app/routes/_index.tsx
index a4a63aa8..1cf1ff8a 100644
--- a/app/routes/_index.tsx
+++ b/app/routes/_index.tsx
@@ -1,4 +1,5 @@
 import { json, type MetaFunction } from '@remix-run/cloudflare';
+import { Suspense } from 'react';
 import { ClientOnly } from 'remix-utils/client-only';
 import { BaseChat } from '~/components/chat/BaseChat';
 import { Chat } from '~/components/chat/Chat.client';
@@ -11,12 +12,16 @@ export const meta: MetaFunction = () => {
 
 export const loader = () => json({});
 
+const Nothing = () => null;
+
 export default function Index() {
   return (
     <div className="flex flex-col h-full w-full bg-bolt-elements-background-depth-1">
       <BackgroundRays />
       <Header />
-      <ClientOnly fallback={<BaseChat />}>{() => <Chat />}</ClientOnly>
+      <Suspense fallback={<Nothing />}>
+        <ClientOnly fallback={<BaseChat />}>{() => <Chat />}</ClientOnly>
+      </Suspense>
     </div>
   );
 }