From 9723c1716bc9205c343c638aa3a3de709ddc8207 Mon Sep 17 00:00:00 2001
From: Wang Zixiao <wayne.wang0821@gmail.com>
Date: Mon, 1 Apr 2024 13:06:02 +0800
Subject: [PATCH] fix(ui): avatar uploading ui bugs in profile page (#1747)

* fix(ui): avatar uploading ui bugs in profile page

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 .../app/(dashboard)/profile/components/avatar.tsx   | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/ee/tabby-ui/app/(dashboard)/profile/components/avatar.tsx b/ee/tabby-ui/app/(dashboard)/profile/components/avatar.tsx
index a576261f384a..59dd64611016 100644
--- a/ee/tabby-ui/app/(dashboard)/profile/components/avatar.tsx
+++ b/ee/tabby-ui/app/(dashboard)/profile/components/avatar.tsx
@@ -6,7 +6,7 @@ import { toast } from 'sonner'
 import { graphql } from '@/lib/gql/generates'
 import { useMe } from '@/lib/hooks/use-me'
 import { useMutation } from '@/lib/tabby/gql'
-import { delay } from '@/lib/utils'
+import { cn, delay } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
 import { IconCloudUpload, IconSpinner } from '@/components/ui/icons'
 import { Separator } from '@/components/ui/separator'
@@ -65,11 +65,10 @@ export const Avatar = () => {
       await delay(1000)
       mutateAvatar(data.me.id)
       toast.success('Successfully updated your profile picture!')
-
       await delay(200)
-      setUploadedImgString('')
     }
 
+    setUploadedImgString('')
     setIsSubmitting(false)
   }
 
@@ -96,7 +95,11 @@ export const Avatar = () => {
             alt="avatar to be uploaded"
           />
         )}
-        <UserAvatar className="relative h-16 w-16 border" />
+        <UserAvatar
+          className={cn('relative h-16 w-16 border', {
+            'opacity-0': uploadedImgString
+          })}
+        />
       </div>
 
       <Separator />
@@ -114,7 +117,7 @@ export const Avatar = () => {
           Save Changes
         </Button>
 
-        <div className="mt-1.5 flex flex-1 justify-end">
+        <div className="flex flex-1 justify-end">
           <p className=" text-xs text-muted-foreground lg:text-sm">
             {`Square image recommended. Accepted file types: .png, .jpg. Max file size: ${MAX_UPLOAD_SIZE_KB}KB.`}
           </p>