From 38d389a42ee4046b143e543cbf8064ca278fc75b Mon Sep 17 00:00:00 2001
From: Brian Hackett <bhackett1024@gmail.com>
Date: Thu, 20 Feb 2025 11:27:22 -0800
Subject: [PATCH] Wrap chat component in <Suspense>

---
 app/routes/_index.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

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>
   );
 }