perf(frontend): stream sidebar via Suspense — feed renders immediately; sidebar loads async

thoughts-frontend/app/page.tsx

@@ -1,12 +1,6 @@
 import type { Metadata } from "next";
 import { cookies } from "next/headers";
-import {
-  getFeed,
-  getFriends,
-  getMe,
-  getTopFriends,
-  Me,
-} from "@/lib/api";
+import { getFeed, getMe, Me } from "@/lib/api";
 import { ThoughtForm } from "@/components/thought-form";
 import { EmptyState } from "@/components/empty-state";
 import { Button } from "@/components/ui/button";
@@ -16,9 +10,10 @@ import { ThoughtThread } from "@/components/thought-thread";
 import { buildThoughtThreads } from "@/lib/utils";
 import { TopFriends } from "@/components/top-friends";
 import { UsersCount } from "@/components/users-count";
-
 import { PaginationNav } from "@/components/pagination-nav";
 import { redirect } from "next/navigation";
+import { Suspense } from "react";
+import { ProfileSkeleton, TagsSkeleton, CountSkeleton } from "@/components/loading-skeleton";
 
 export const metadata: Metadata = {
   title: "Home",
@@ -61,18 +56,26 @@ async function FeedPage({
   const { items: allThoughts, totalPages } = feedData!;
   const thoughtThreads = buildThoughtThreads(allThoughts);
 
-  const friends = (await getFriends(token)).users.map((user) => user.username);
-  const topFriendsData = me
-    ? await getTopFriends(me.username, token).catch(() => ({ topFriends: [] }))
-    : { topFriends: [] };
-  const shouldDisplayTopFriends = topFriendsData.topFriends.length > 0;
+  const sidebar = (
+    <>
+      <Suspense fallback={<ProfileSkeleton />}>
+        <TopFriends username={me.username} />
+      </Suspense>
+      <Suspense fallback={<TagsSkeleton />}>
+        <PopularTags />
+      </Suspense>
+      <Suspense fallback={<CountSkeleton />}>
+        <UsersCount />
+      </Suspense>
+    </>
+  );
 
   return (
     <div className="container mx-auto max-w-6xl p-4 sm:p-6">
       <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
         <aside className="hidden lg:block lg:col-span-1">
           <div className="sticky top-20 space-y-6 glass-effect glossy-effect bottom rounded-md p-4">
-            <h2 className="text-lg font-semibold">Filters & Sorting</h2>
+            <h2 className="text-lg font-semibold">Filters &amp; Sorting</h2>
             <p className="text-sm text-muted-foreground">Coming soon...</p>
           </div>
         </aside>
@@ -84,14 +87,7 @@ async function FeedPage({
           <ThoughtForm />
 
           <div className="block lg:hidden space-y-6">
-            <PopularTags />
-            {shouldDisplayTopFriends && (
-              <TopFriends mode="top-friends" usernames={topFriendsData.topFriends} />
-            )}
-            {!shouldDisplayTopFriends && token && friends.length > 0 && (
-              <TopFriends mode="friends" usernames={friends || []} />
-            )}
-            <UsersCount />
+            {sidebar}
           </div>
 
           <div className="space-y-6">
@@ -115,14 +111,7 @@ async function FeedPage({
 
         <aside className="hidden lg:block lg:col-span-1">
           <div className="sticky top-20 space-y-6">
-            <PopularTags />
-            {shouldDisplayTopFriends && (
-              <TopFriends mode="top-friends" usernames={topFriendsData.topFriends} />
-            )}
-            {!shouldDisplayTopFriends && token && friends.length > 0 && (
-              <TopFriends mode="friends" usernames={friends || []} />
-            )}
-            <UsersCount />
+            {sidebar}
           </div>
         </aside>
       </div>