From ee07d43c161026dc3d156dc88e4b7cb3d3d96a4d Mon Sep 17 00:00:00 2001
From: Jules <jules@expensify.com>
Date: Mon, 10 Feb 2025 15:10:35 -0800
Subject: [PATCH] Merge pull request #56597 from nkdengineer/fix/56504

fix: group chat avatar disappears after adding other members and creating the group
(cherry picked from commit 5624931b8edbe2a1271a4de13be8c635c73f8f40)

(CP triggered by Julesssss)
---
 src/pages/NewChatConfirmPage.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/pages/NewChatConfirmPage.tsx b/src/pages/NewChatConfirmPage.tsx
index 5df620d3b9e3..1abccf25a947 100644
--- a/src/pages/NewChatConfirmPage.tsx
+++ b/src/pages/NewChatConfirmPage.tsx
@@ -23,6 +23,7 @@ import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
 import ROUTES from '@src/ROUTES';
 import type {Participant} from '@src/types/onyx/IOU';
+import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 
 function navigateBack() {
     Navigation.goBack(ROUTES.NEW_CHAT);
@@ -38,7 +39,7 @@ function NewChatConfirmPage() {
     const {translate} = useLocalize();
     const styles = useThemeStyles();
     const personalData = useCurrentUserPersonalDetails();
-    const [newGroupDraft] = useOnyx(ONYXKEYS.NEW_GROUP_CHAT_DRAFT);
+    const [newGroupDraft, newGroupDraftMetaData] = useOnyx(ONYXKEYS.NEW_GROUP_CHAT_DRAFT);
     const [allPersonalDetails] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST);
 
     const selectedOptions = useMemo((): Participant[] => {
@@ -101,7 +102,7 @@ function NewChatConfirmPage() {
     const stashedLocalAvatarImage = newGroupDraft?.avatarUri;
 
     useEffect(() => {
-        if (!stashedLocalAvatarImage) {
+        if (!stashedLocalAvatarImage || isLoadingOnyxValue(newGroupDraftMetaData)) {
             return;
         }
 
@@ -118,9 +119,9 @@ function NewChatConfirmPage() {
         // To handle this, we re-read the avatar image file from disk whenever the component re-mounts.
         readFileAsync(stashedLocalAvatarImage, newGroupDraft?.avatarFileName ?? '', onSuccess, onFailure, newGroupDraft?.avatarFileType ?? '');
 
-        // we only need to run this when the component re-mounted
+        // we only need to run this when the component re-mounted and when the onyx is loaded completely
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
-    }, []);
+    }, [newGroupDraftMetaData]);
 
     return (
         <ScreenWrapper testID={NewChatConfirmPage.displayName}>