feat: improve ui

src/components/user/avatar.tsx

@@ -17,26 +17,29 @@ export function UserAvatar({ className }: { className?: string }) {
 	return (
 		<Avatar.Root
 			className={cn(
-				"shrink-0 block overflow-hidden bg-neutral-200 dark:bg-neutral-800",
+				"shrink-0 block overflow-hidden bg-black/10 dark:bg-white/10",
+				user.isLoading ? "animate-pulse" : "",
 				className,
 			)}
 		>
-			{user?.profile?.picture ? (
-				<Avatar.Image
-					src={`//wsrv.nl/?url=${user.profile?.picture}&w=200&h=200`}
-					alt={user.pubkey}
-					loading="lazy"
-					decoding="async"
-					className="w-full aspect-square object-cover outline-[.5px] outline-black/5 content-visibility-auto contain-intrinsic-size-[auto]"
-				/>
+			{!user.isLoading ? (
+				<>
+					<Avatar.Image
+						src={`//wsrv.nl/?url=${user.profile?.picture}&w=200&h=200`}
+						alt={user.pubkey}
+						loading="lazy"
+						decoding="async"
+						className="w-full aspect-square object-cover outline-[.5px] outline-black/5 content-visibility-auto contain-intrinsic-size-[auto]"
+					/>
+					<Avatar.Fallback>
+						<img
+							src={fallback}
+							alt={user.pubkey}
+							className="size-full bg-black dark:bg-white outline-[.5px] outline-black/5 content-visibility-auto contain-intrinsic-size-[auto]"
+						/>
+					</Avatar.Fallback>
+				</>
 			) : null}
-			<Avatar.Fallback>
-				<img
-					src={fallback}
-					alt={user.pubkey}
-					className="size-full bg-black dark:bg-white outline-[.5px] outline-black/5 content-visibility-auto contain-intrinsic-size-[auto]"
-				/>
-			</Avatar.Fallback>
 		</Avatar.Root>
 	);
 }

src/components/user/name.tsx

@@ -1,12 +1,24 @@
 import { cn } from "@/commons";
 import { useUserContext } from "./provider";
+import { useMemo } from "react";
+import { uniqueNamesGenerator, names } from "unique-names-generator";
 
 export function UserName({ className }: { className?: string }) {
 	const user = useUserContext();
+	const name = useMemo(
+		() => uniqueNamesGenerator({ dictionaries: [names] }),
+		[user.pubkey],
+	);
+
+	if (user.isLoading) {
+		return (
+			<div className="size-4 w-20 bg-black/10 dark:bg-white/10 animate-pulse" />
+		);
+	}
 
 	return (
 		<div className={cn("max-w-[12rem] truncate", className)}>
-			{user.profile?.display_name || user.profile?.name || "Anon"}
+			{user.profile?.display_name || user.profile?.name || name}
 		</div>
 	);
 }

src/routes/$account.chats.lazy.tsx

@@ -25,13 +25,9 @@ function Screen() {
 				data-tauri-drag-region
 				className="shrink-0 w-[280px] h-full flex flex-col justify-between border-r border-black/5 dark:border-white/5"
 			>
-				<div data-tauri-drag-region className="flex-1">
-					<Header />
-					<ChatList />
-				</div>
-				<div className="h-12 shrink-0 flex items-center px-2.5 border-t border-black/5 dark:border-white/5">
-					<CurrentUser />
-				</div>
+				<Header />
+				<ChatList />
+				<CurrentUser />
 			</div>
 			<div className="flex-1 min-w-0 min-h-0 bg-white dark:bg-neutral-900 overflow-auto">
 				<Outlet />
@@ -44,7 +40,7 @@ function Header() {
 	return (
 		<div
 			data-tauri-drag-region
-			className="h-12 px-3.5 flex items-center justify-end"
+			className="shrink-0 h-12 px-3.5 flex items-center justify-end"
 		>
 			<div className="flex items-center gap-2">
 				<Link
@@ -130,9 +126,19 @@ function ChatList() {
 		>
 			<ScrollArea.Viewport className="relative h-full px-1.5">
 				{isLoading ? (
-					<p>Loading...</p>
+					<div>
+						{Array.from(Array(5)).map((index) => (
+							<div
+								key={index}
+								className="flex items-center rounded-lg p-2 mb-1 gap-2"
+							>
+								<div className="size-9 rounded-full animate-pulse bg-black/10 dark:bg-white/10" />
+								<div className="size-4 w-20 rounded animate-pulse bg-black/10 dark:bg-white/10" />
+							</div>
+						))}
+					</div>
 				) : isError ? (
-					<p>Error</p>
+					<div>Error</div>
 				) : (
 					data.map((item) => (
 						<Link
@@ -148,7 +154,7 @@ function ChatList() {
 											isActive ? "bg-black/5 dark:bg-white/5" : "",
 										)}
 									>
-										<User.Avatar className="shrink-0 size-9 rounded-full object-cover" />
+										<User.Avatar className="size-9 rounded-full" />
 										<div className="flex-1 inline-flex items-center justify-between text-sm">
 											<div className="inline-flex leading-tight">
 												<User.Name className="max-w-[8rem] truncate font-semibold" />
@@ -182,11 +188,13 @@ function CurrentUser() {
 	const { account } = Route.useParams();
 
 	return (
-		<User.Provider pubkey={account}>
-			<User.Root className="inline-flex items-center gap-2">
-				<User.Avatar className="size-8 rounded-full object-cover" />
-				<User.Name className="text-sm font-medium leading-tight" />
-			</User.Root>
-		</User.Provider>
+		<div className="shrink-0 h-12 flex items-center px-2.5 border-t border-black/5 dark:border-white/5">
+			<User.Provider pubkey={account}>
+				<User.Root className="inline-flex items-center gap-2">
+					<User.Avatar className="size-8 rounded-full" />
+					<User.Name className="text-sm font-medium leading-tight" />
+				</User.Root>
+			</User.Provider>
+		</div>
 	);
 }