Tweak data fetching with suspense

components/header.tsx

@@ -5,19 +5,24 @@ import { buttonVariants } from '@/components/ui/button'
 import { GitHub, Separator, Vercel } from '@/components/icons'
 import { Sidebar } from '@/components/sidebar'
 import { UserMenu } from '@/components/user-menu'
-import { getChats } from '@/app/actions'
+import { SidebarList } from './sidebar-list'
+import { Suspense } from 'react'
 
 export async function Header() {
   const session = await auth()
-  const chats = session?.user?.email ? await getChats(session.user.email) : []
 
   return (
-    <header className="sticky top-0 z-50 flex h-16 w-full shrink-0 items-center justify-between border-b bg-gradient-to-b from-background/10 via-background/50 to-background/80 px-4 backdrop-blur-xl">
+    <header className="sticky top-0 z-50 flex items-center justify-between w-full h-16 px-4 border-b shrink-0 bg-gradient-to-b from-background/10 via-background/50 to-background/80 backdrop-blur-xl">
       <div className="flex items-center">
         {/* @ts-ignore */}
-        <Sidebar chats={chats} session={session} />
-        <div className="hidden items-center md:flex">
-          <Separator className="h-6 w-6 text-muted-foreground/50" />
+        <Sidebar session={session}>
+          <Suspense fallback={<div className="flex-1 overflow-auto" />}>
+            {/* @ts-ignore */}
+            <SidebarList session={session} />
+          </Suspense>
+        </Sidebar>
+        <div className="items-center hidden md:flex">
+          <Separator className="w-6 h-6 text-muted-foreground/50" />
           <UserMenu session={session} />
         </div>
       </div>
@@ -28,7 +33,7 @@ export async function Header() {
           rel="noopener noreferrer"
           className={cn(buttonVariants({ variant: 'outline' }))}
         >
-          <GitHub className="mr-2 h-4 w-4" />
+          <GitHub className="w-4 h-4 mr-2" />
           <span>GitHub</span>
         </a>
         <a
@@ -36,9 +41,9 @@ export async function Header() {
           target="_blank"
           className={cn(buttonVariants())}
         >
-          <Vercel className="mr-2 h-4 w-4" />
+          <Vercel className="w-4 h-4 mr-2" />
           <span className="hidden sm:block">Deploy to Vercel</span>
-          <span className="sm:hidden">Deploy</span>
+          <span className="sm:hidden">Vercel</span>
         </a>
       </div>
     </header>