Improve post list perf

packages/frontpage/app/(app)/post/[postAuthor]/[postRkey]/_lib/comment.tsx

@@ -2,7 +2,7 @@ import { getUser } from "@/lib/data/user";
 import { CommentClientWrapperWithToolbar } from "./comment-client";
 import { CommentModel } from "@/lib/data/db/comment";
 import { TimeAgo } from "@/lib/components/time-ago";
-import { AvatarFallback, UserAvatar } from "@/lib/components/user-avatar";
+import { UserAvatar } from "@/lib/components/user-avatar";
 import Link from "next/link";
 import {
   getDidFromHandleOrDid,
@@ -11,6 +11,7 @@ import {
 import { UserHoverCard } from "@/lib/components/user-hover-card";
 import { VariantProps, cva } from "class-variance-authority";
 import { cn } from "@/lib/utils";
+import { AvatarFallback } from "@/lib/components/user-avatar-shared";
 
 const commentVariants = cva(undefined, {
   variants: {

packages/frontpage/app/api/hover-card-content/route.ts

@@ -1,7 +1,7 @@
 import { badRequest, createApiRoute } from "@/lib/api-route";
 import { parseDid } from "@/lib/data/atproto/did";
 import { getVerifiedHandle } from "@/lib/data/atproto/identity";
-import { getTotalSubmissions } from "@/lib/data/user";
+import { getBlueskyProfile, getTotalSubmissions } from "@/lib/data/user";
 
 export const GET = createApiRoute(async (request) => {
   const url = new URL(request.url);
@@ -13,13 +13,15 @@ export const GET = createApiRoute(async (request) => {
     badRequest("Missing did parameter");
   }
 
-  const [submissions, handle] = await Promise.all([
+  const [submissions, handle, profile] = await Promise.all([
     getTotalSubmissions(did),
     getVerifiedHandle(did),
+    getBlueskyProfile(did),
   ]);
 
   return {
     ...submissions,
     handle,
+    avatar: profile.avatar,
   };
 });

packages/frontpage/lib/components/user-avatar-shared.tsx

@@ -0,0 +1,51 @@
+import { DID } from "../data/atproto/did";
+
+const userAvatarSizes = {
+  small: 22,
+  smedium: 50,
+  medium: 100,
+  large: 150,
+};
+
+type Size = keyof typeof userAvatarSizes;
+
+export type UserAvatarProps = {
+  did: DID;
+  size?: Size;
+};
+
+export function AvatarImage({
+  size: sizeVariant = "small",
+  avatar,
+}: {
+  avatar: string;
+  size?: UserAvatarProps["size"];
+}) {
+  const size = userAvatarSizes[sizeVariant];
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      src={avatar}
+      alt=""
+      width={size}
+      height={size}
+      loading="lazy"
+      className="rounded-full bg-slate-500"
+    />
+  );
+}
+
+export function AvatarFallback({ size }: { size: UserAvatarProps["size"] }) {
+  const sizePx = userAvatarSizes[size ?? "small"];
+  return (
+    <svg
+      className="text-slate-500"
+      style={{ width: sizePx, height: sizePx }}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <circle cx="12" cy="12" r="12" fill="currentColor" />
+    </svg>
+  );
+}

packages/frontpage/lib/components/user-avatar.tsx

@@ -1,61 +1,24 @@
 import "server-only";
 import { getBlueskyProfile } from "@/lib/data/user";
 import { Suspense } from "react";
-import { DID } from "../data/atproto/did";
-
-const userAvatarSizes = {
-  small: 22,
-  smedium: 50,
-  medium: 100,
-  large: 150,
-};
-
-type Size = keyof typeof userAvatarSizes;
-
-type UserAvatarProps = {
-  did: DID;
-  size?: Size;
-};
+import {
+  AvatarFallback,
+  AvatarImage,
+  UserAvatarProps,
+} from "./user-avatar-shared";
 
 export async function UserAvatar(props: UserAvatarProps) {
   return (
     <Suspense fallback={<AvatarFallback size={props.size} />}>
-      <AvatarImage {...props} />
+      <UserAvatarImpl {...props} />
     </Suspense>
   );
 }
 
-export function AvatarFallback({ size }: { size: UserAvatarProps["size"] }) {
-  const sizePx = userAvatarSizes[size ?? "small"];
-  return (
-    <svg
-      className="text-slate-500"
-      width={sizePx}
-      height={sizePx}
-      viewBox="0 0 24 24"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <circle cx="12" cy="12" r="12" fill="currentColor" />
-    </svg>
-  );
-}
-
-async function AvatarImage({
+async function UserAvatarImpl({
   did,
   size: sizeVariant = "small",
 }: UserAvatarProps) {
   const { avatar } = await getBlueskyProfile(did);
-  const size = userAvatarSizes[sizeVariant];
-  return (
-    // eslint-disable-next-line @next/next/no-img-element
-    <img
-      src={avatar}
-      alt=""
-      width={size}
-      height={size}
-      loading="lazy"
-      className="rounded-full"
-    />
-  );
+  return <AvatarImage avatar={avatar} size={sizeVariant} />;
 }

packages/frontpage/lib/components/user-hover-card-client.tsx

@@ -11,12 +11,12 @@ import type { GET as GetHoverCardContent } from "@/app/api/hover-card-content/ro
 import Link from "next/link";
 import { ReportDialogIcon } from "@/app/(app)/_components/report-dialog";
 import { Separator } from "./ui/separator";
+import { AvatarFallback, AvatarImage } from "./user-avatar-shared";
 
 type Props = {
   did: DID;
   children: ReactNode;
   asChild?: boolean;
-  avatar: ReactNode;
   initialHandle: string;
   reportAction: (formData: FormData) => Promise<void>;
 };
@@ -25,7 +25,6 @@ export function UserHoverCardClient({
   did,
   children,
   asChild,
-  avatar,
   initialHandle,
   reportAction,
 }: Props) {
@@ -41,14 +40,9 @@ export function UserHoverCardClient({
       </HoverCardTrigger>
       <HoverCardContent className="w-80">
         <div className="flex gap-4">
-          <Link href={`/profile/${initialHandle}`} className="shrink-0">
-            {avatar}
-          </Link>
-          <div className="flex flex-col gap-1 basis-full">
-            <Suspense fallback={<Fallback handle={initialHandle} />}>
-              <Content did={did} />
-            </Suspense>
-          </div>
+          <Suspense fallback={<Fallback handle={initialHandle} />}>
+            <Content did={did} />
+          </Suspense>
         </div>
         <Separator className="my-2" />
         <div>
@@ -67,33 +61,44 @@ function Content({ did }: { did: DID }) {
 
   return (
     <>
-      <Link href={`/profile/${data.handle}`} className="text-sm font-semibold">
-        @{data.handle}
+      <Link href={`/profile/${data.handle}`} className="shrink-0">
+        <AvatarImage avatar={data.avatar} size="medium" />
       </Link>
-      <p
-        className="text-sm flex gap-2 items-center"
-        title={`${data.commentCount} comments`}
-      >
-        <ChatBubbleIcon /> {data.commentCount}
-      </p>
-      <p
-        className="text-sm flex gap-2 items-center"
-        title={`${data.postCount} posts`}
-      >
-        <Link1Icon /> {data.postCount}
-      </p>
+      <div className="flex flex-col gap-1 flex-grow">
+        <Link
+          href={`/profile/${data.handle}`}
+          className="text-sm font-semibold"
+        >
+          @{data.handle}
+        </Link>
+        <p
+          className="text-sm flex gap-2 items-center"
+          title={`${data.commentCount} comments`}
+        >
+          <ChatBubbleIcon /> {data.commentCount}
+        </p>
+        <p
+          className="text-sm flex gap-2 items-center"
+          title={`${data.postCount} posts`}
+        >
+          <Link1Icon /> {data.postCount}
+        </p>
+      </div>
     </>
   );
 }
 
 function Fallback({ handle }: { handle: string }) {
   return (
     <>
-      <Link href={`/profile/${handle}`} className="text-sm font-semibold">
-        @{handle}
-      </Link>
-      <Skeleton className="h-5 w-12" />
-      <Skeleton className="h-5 w-12" />
+      <AvatarFallback size="medium" />
+      <div className="flex flex-col gap-1 flex-grow">
+        <Link href={`/profile/${handle}`} className="text-sm font-semibold">
+          @{handle}
+        </Link>
+        <Skeleton className="h-5 w-12" />
+        <Skeleton className="h-5 w-12" />
+      </div>
     </>
   );
 }

packages/frontpage/lib/components/user-hover-card.tsx

@@ -1,4 +1,3 @@
-import { UserAvatar } from "./user-avatar";
 import { HoverCard } from "@/lib/components/ui/hover-card";
 import { DID } from "../data/atproto/did";
 import { getVerifiedHandle } from "../data/atproto/identity";
@@ -19,7 +18,6 @@ export async function UserHoverCard({ did, children, asChild }: Props) {
   return (
     <HoverCard>
       <UserHoverCardClient
-        avatar={<UserAvatar did={did} size="medium" />}
         did={did}
         asChild={asChild}
         initialHandle={handle ?? ""}