From 35291975a6c8206e3b55b52b981b48e22d52d91d Mon Sep 17 00:00:00 2001
From: giancarlo <giancarlopsk@gmail.com>
Date: Tue, 16 Apr 2024 17:09:07 +0800
Subject: [PATCH] Add animation to personal account dropdown

A "fade-in" animation has been added to the personal account dropdown menu on the dashboard home page. The user data handling has also been modified to ensure the props.user data is used as fallback. The changes should provide a smoother user experience and improved data stability.
---
 .../_components/personal-account-dropdown-container.tsx     | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/apps/web/app/(dashboard)/home/_components/personal-account-dropdown-container.tsx b/apps/web/app/(dashboard)/home/_components/personal-account-dropdown-container.tsx
index cec5a379c..1e78e5aed 100644
--- a/apps/web/app/(dashboard)/home/_components/personal-account-dropdown-container.tsx
+++ b/apps/web/app/(dashboard)/home/_components/personal-account-dropdown-container.tsx
@@ -16,8 +16,10 @@ export function ProfileAccountDropdownContainer(props: {
   const signOut = useSignOut();
   const user = useUser(props.user);
 
+  const userData = user.data ?? props.user ?? null;
+
   return (
-    <div className={props.collapsed ? '' : 'w-full'}>
+    <div className={props.collapsed ? '' : 'w-full animate-in fade-in-90'}>
       <PersonalAccountDropdown
         paths={{
           home: pathsConfig.app.home,
@@ -27,7 +29,7 @@ export function ProfileAccountDropdownContainer(props: {
         }}
         className={'w-full'}
         showProfileName={!props.collapsed}
-        user={user.data ?? null}
+        user={userData}
         signOutRequested={() => signOut.mutateAsync()}
       />
     </div>