Wrap chat component in <Suspense>

This commit is contained in:
Brian Hackett 2025-02-20 11:27:22 -08:00
parent 6acb94b5af
commit 38d389a42e

View File

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