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

thoughts-frontend/app/users/[username]/page.tsx

@@ -5,7 +5,6 @@ import {
   getMe,
   getRemoteFollowers,
   getRemoteFollowing,
-  getTopFriends,
   getUserProfile,
   getUserThoughts,
   Me,
@@ -52,6 +51,8 @@ import { notFound } from "next/navigation";
 import { cookies } from "next/headers";
 import { FollowButton } from "@/components/follow-button";
 import { TopFriends } from "@/components/top-friends";
+import { Suspense } from "react";
+import { ProfileSkeleton } from "@/components/loading-skeleton";
 import { buildThoughtThreads } from "@/lib/utils";
 import { ThoughtThread } from "@/components/thought-thread";
 import { Button } from "@/components/ui/button";
@@ -127,15 +128,6 @@ export default async function ProfilePage({ params }: ProfilePageProps) {
   const fediverseHandle =
     user.local && apiDomain ? `@${user.username}@${apiDomain}` : null;
 
-  // Show who the profile owner follows (uses the already-fetched followingResult).
-  const friends =
-    followingResult.status === "fulfilled"
-      ? followingResult.value.items.map((u) => u.username)
-      : [];
-
-  const topFriendsData = await getTopFriends(username, token).catch(() => ({ topFriends: [] }));
-  const shouldDisplayTopFriends = topFriendsData.topFriends.length > 0;
-
   return (
     <div id={`profile-page-${user.username}`}>
       {user.customCss && (
@@ -252,10 +244,9 @@ export default async function ProfilePage({ params }: ProfilePageProps) {
               </div>
             </Card>
 
-            {shouldDisplayTopFriends && (
-              <TopFriends mode="top-friends" usernames={topFriendsData.topFriends} />
-            )}
-            {token && <TopFriends mode="friends" usernames={friends || []} />}
+            <Suspense fallback={<ProfileSkeleton />}>
+              <TopFriends username={user.username} />
+            </Suspense>
           </div>
         </aside>