Refactor personal account components for data fetching efficiency

Refactored personal account components to centralize user data fetching and subsequently reduce and distribute calls. Instead of fetching user data individually in `UpdateAccountImageContainer`, `UpdateAccountDetailsFormContainer` and `UpdateAccountNameFormContainer`, data fetching is now performed in the parent component, `AccountSettingsContainer`. Also, implemented partial loading state.

packages/features/accounts/src/components/personal-account-dropdown.tsx

@@ -68,7 +68,7 @@ export function PersonalAccountDropdown({
   }, [user?.email, user?.phone]);
 
   const displayName =
-    account?.name ?? personalAccountData?.name ?? user?.email ?? '';
+    personalAccountData?.name ?? account?.name ?? user?.email ?? '';
 
   const isSuperAdmin = useMemo(() => {
     return user?.app_metadata.role === 'super-admin';

packages/features/accounts/src/components/personal-account-settings/account-settings-container.tsx

@@ -11,8 +11,10 @@ import {
 } from '@kit/ui/card';
 import { If } from '@kit/ui/if';
 import { LanguageSelector } from '@kit/ui/language-selector';
+import { LoadingOverlay } from '@kit/ui/loading-overlay';
 import { Trans } from '@kit/ui/trans';
 
+import { usePersonalAccountData } from '../../hooks/use-personal-account-data';
 import { AccountDangerZone } from './account-danger-zone';
 import { UpdateEmailFormContainer } from './email/update-email-form-container';
 import { MultiFactorAuthFactorsList } from './mfa/multi-factor-auth-list';
@@ -32,6 +34,11 @@ export function PersonalAccountSettingsContainer(
   }>,
 ) {
   const supportsLanguageSelection = useSupportMultiLanguage();
+  const user = usePersonalAccountData();
+
+  if (!user.data || user.isPending) {
+    return <LoadingOverlay fullPage />;
+  }
 
   return (
     <div className={'flex w-full flex-col space-y-6 pb-32'}>
@@ -47,7 +54,12 @@ export function PersonalAccountSettingsContainer(
         </CardHeader>
 
         <CardContent>
-          <UpdateAccountImageContainer />
+          <UpdateAccountImageContainer
+            user={{
+              pictureUrl: user.data.picture_url,
+              id: user.data.id,
+            }}
+          />
         </CardContent>
       </Card>
 
@@ -63,7 +75,7 @@ export function PersonalAccountSettingsContainer(
         </CardHeader>
 
         <CardContent>
-          <UpdateAccountDetailsFormContainer />
+          <UpdateAccountDetailsFormContainer user={user.data} />
         </CardContent>
       </Card>
 

packages/features/accounts/src/components/personal-account-settings/update-account-details-form-container.tsx

@@ -1,32 +1,23 @@
 'use client';
 
-import { LoadingOverlay } from '@kit/ui/loading-overlay';
-
-import {
-  usePersonalAccountData,
-  useRevalidatePersonalAccountDataQuery,
-} from '../../hooks/use-personal-account-data';
+import { useRevalidatePersonalAccountDataQuery } from '../../hooks/use-personal-account-data';
 import { UpdateAccountDetailsForm } from './update-account-details-form';
 
-export function UpdateAccountDetailsFormContainer() {
-  const user = usePersonalAccountData();
+export function UpdateAccountDetailsFormContainer({
+  user,
+}: {
+  user: {
+    name: string | null;
+    id: string;
+  };
+}) {
   const revalidateUserDataQuery = useRevalidatePersonalAccountDataQuery();
 
-  if (user.isLoading) {
-    return <LoadingOverlay fullPage={false} />;
-  }
-
-  if (!user.data) {
-    return null;
-  }
-
-  const userId = user.data.id;
-
   return (
     <UpdateAccountDetailsForm
-      displayName={user.data.name ?? ''}
-      userId={userId}
-      onUpdate={() => revalidateUserDataQuery(userId)}
+      displayName={user.name ?? ''}
+      userId={user.id}
+      onUpdate={() => revalidateUserDataQuery(user.id)}
     />
   );
 }

packages/features/accounts/src/components/personal-account-settings/update-account-image-container.tsx

@@ -10,31 +10,27 @@ import { toast } from 'sonner';
 import { Database } from '@kit/supabase/database';
 import { useSupabase } from '@kit/supabase/hooks/use-supabase';
 import { ImageUploader } from '@kit/ui/image-uploader';
-import { LoadingOverlay } from '@kit/ui/loading-overlay';
 import { Trans } from '@kit/ui/trans';
 
-import {
-  usePersonalAccountData,
-  useRevalidatePersonalAccountDataQuery,
-} from '../../hooks/use-personal-account-data';
+import { useRevalidatePersonalAccountDataQuery } from '../../hooks/use-personal-account-data';
 
 const AVATARS_BUCKET = 'account_image';
 
-export function UpdateAccountImageContainer() {
-  const accountData = usePersonalAccountData();
+export function UpdateAccountImageContainer({
+  user,
+}: {
+  user: {
+    pictureUrl: string | null;
+    id: string;
+  };
+}) {
   const revalidateUserDataQuery = useRevalidatePersonalAccountDataQuery();
 
-  if (!accountData.data) {
-    return <LoadingOverlay fullPage={false} />;
-  }
-
-  const userId = accountData.data.id;
-
   return (
     <UploadProfileAvatarForm
-      pictureUrl={accountData.data.picture_url ?? null}
-      userId={userId}
-      onAvatarUpdated={() => revalidateUserDataQuery(userId)}
+      pictureUrl={user.pictureUrl ?? null}
+      userId={user.id}
+      onAvatarUpdated={() => revalidateUserDataQuery(user.id)}
     />
   );
 }

packages/features/accounts/src/hooks/use-personal-account-data.ts

@@ -51,7 +51,13 @@ export function usePersonalAccountData(
     enabled: !!userId,
     refetchOnWindowFocus: false,
     refetchOnMount: false,
-    initialData: partialAccount,
+    initialData: partialAccount?.id
+      ? {
+          id: partialAccount.id,
+          name: partialAccount.name,
+          picture_url: partialAccount.picture_url,
+        }
+      : undefined,
   });
 }