From 21e758ec1326ded8ea6d6c7c70da25f1c331c66d Mon Sep 17 00:00:00 2001
From: reya <reya@lume.nu>
Date: Mon, 4 Dec 2023 11:49:52 +0700
Subject: [PATCH] update user component

---
 src/shared/user.tsx           | 32 ++++++++++++++++----------------
 src/utils/hooks/useProfile.ts |  6 +++---
 2 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/src/shared/user.tsx b/src/shared/user.tsx
index 9f7b705e..b2498a18 100644
--- a/src/shared/user.tsx
+++ b/src/shared/user.tsx
@@ -40,7 +40,7 @@ export const User = memo(function User({
   embedProfile?: string;
   subtext?: string;
 }) {
-  const { status, user } = useProfile(pubkey, embedProfile);
+  const { isFetching, user } = useProfile(pubkey, embedProfile);
 
   const createdAt = useMemo(() => formatCreatedAt(time, variant === 'chat'), [pubkey]);
   const svgURI = useMemo(
@@ -49,7 +49,7 @@ export const User = memo(function User({
   );
 
   if (variant === 'mention') {
-    if (status === 'pending') {
+    if (isFetching) {
       return (
         <div className="flex items-center gap-2">
           <div className="h-6 w-6 shrink-0 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
@@ -91,7 +91,7 @@ export const User = memo(function User({
   }
 
   if (variant === 'notify') {
-    if (status === 'pending') {
+    if (isFetching) {
       return (
         <div className="flex items-center gap-2">
           <div className="h-8 w-8 shrink-0 animate-pulse rounded bg-neutral-300 dark:bg-neutral-700" />
@@ -129,7 +129,7 @@ export const User = memo(function User({
   }
 
   if (variant === 'large') {
-    if (status === 'pending') {
+    if (isFetching) {
       return (
         <div className="flex items-center gap-2.5">
           <div className="h-14 w-14 shrink-0 animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" />
@@ -172,7 +172,7 @@ export const User = memo(function User({
   }
 
   if (variant === 'simple') {
-    if (status === 'pending') {
+    if (isFetching) {
       return (
         <div className="flex items-center gap-2.5">
           <div className="h-10 w-10 shrink-0 animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" />
@@ -215,7 +215,7 @@ export const User = memo(function User({
   }
 
   if (variant === 'avatar') {
-    if (status === 'pending') {
+    if (isFetching) {
       return (
         <div className="h-12 w-12 animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" />
       );
@@ -242,7 +242,7 @@ export const User = memo(function User({
   }
 
   if (variant === 'miniavatar') {
-    if (status === 'pending') {
+    if (isFetching) {
       return (
         <div className="h-10 w-10 shrink-0 animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" />
       );
@@ -269,7 +269,7 @@ export const User = memo(function User({
   }
 
   if (variant === 'childnote') {
-    if (status === 'pending') {
+    if (isFetching) {
       return (
         <div className="h-10 w-10 shrink-0 animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" />
       );
@@ -309,7 +309,7 @@ export const User = memo(function User({
   }
 
   if (variant === 'stacked') {
-    if (status === 'pending') {
+    if (isFetching) {
       return (
         <div className="inline-block h-8 w-8 animate-pulse rounded-full bg-neutral-300 ring-1 ring-neutral-200 dark:bg-neutral-700 dark:ring-neutral-800" />
       );
@@ -336,7 +336,7 @@ export const User = memo(function User({
   }
 
   if (variant === 'ministacked') {
-    if (status === 'pending') {
+    if (isFetching) {
       return (
         <div className="inline-block h-6 w-6 animate-pulse rounded-full bg-neutral-300 ring-1 ring-white dark:ring-black" />
       );
@@ -363,7 +363,7 @@ export const User = memo(function User({
   }
 
   if (variant === 'repost') {
-    if (status === 'pending') {
+    if (isFetching) {
       return (
         <div className="flex gap-3">
           <div className="inline-flex h-10 w-10 items-center justify-center">
@@ -389,7 +389,7 @@ export const User = memo(function User({
               alt={pubkey}
               loading="lazy"
               decoding="async"
-              className="h-6 w-6 rounded"
+              className="h-6 w-6 rounded object-cover"
             />
             <Avatar.Fallback delayMs={300}>
               <img
@@ -414,7 +414,7 @@ export const User = memo(function User({
   }
 
   if (variant === 'thread') {
-    if (status === 'pending') {
+    if (isFetching) {
       return (
         <div className="flex items-center gap-3">
           <div className="h-10 w-10 shrink-0 animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" />
@@ -434,7 +434,7 @@ export const User = memo(function User({
             alt={pubkey}
             loading="lazy"
             decoding="async"
-            className="h-10 w-10 rounded-lg ring-1 ring-neutral-200/50 dark:ring-neutral-800/50"
+            className="h-10 w-10 rounded-lg object-cover ring-1 ring-neutral-200/50 dark:ring-neutral-800/50"
           />
           <Avatar.Fallback delayMs={300}>
             <img
@@ -458,7 +458,7 @@ export const User = memo(function User({
     );
   }
 
-  if (status === 'pending') {
+  if (isFetching) {
     return (
       <div className="flex items-center gap-3 px-3">
         <div className="h-9 w-9 shrink-0 animate-pulse rounded-lg bg-neutral-300 dark:bg-neutral-700" />
@@ -515,7 +515,7 @@ export const User = memo(function User({
                 alt={pubkey}
                 loading="lazy"
                 decoding="async"
-                className="h-10 w-10 rounded-lg"
+                className="h-10 w-10 rounded-lg object-cover"
               />
               <Avatar.Fallback delayMs={300}>
                 <img
diff --git a/src/utils/hooks/useProfile.ts b/src/utils/hooks/useProfile.ts
index 918b2ec1..0920c2dc 100644
--- a/src/utils/hooks/useProfile.ts
+++ b/src/utils/hooks/useProfile.ts
@@ -8,9 +8,9 @@ export function useProfile(pubkey: string, embed?: string) {
   const queryClient = useQueryClient();
   const { ndk } = useNDK();
   const {
-    status,
+    isFetching,
+    isError,
     data: user,
-    error,
   } = useQuery({
     queryKey: ['user', pubkey],
     queryFn: async () => {
@@ -44,5 +44,5 @@ export function useProfile(pubkey: string, embed?: string) {
     retry: 2,
   });
 
-  return { status, user, error };
+  return { isFetching, isError, user };
 }