Merge pull request #61819 from bernhardoj/fix/61154-existing-approver-is-shown-in-additional-approver

Fix existing approver is shown in additional approver briefly

Author: deetergp

src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsApproverPage.tsx

@@ -35,6 +35,7 @@ import ROUTES from '@src/ROUTES';
 import type SCREENS from '@src/SCREENS';
 import type {Icon} from '@src/types/onyx/OnyxCommon';
 import {isEmptyObject} from '@src/types/utils/EmptyObject';
+import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue';
 
 type WorkspaceWorkflowsApprovalsApproverPageProps = WithPolicyAndFullscreenLoadingProps &
     PlatformStackScreenProps<WorkspaceSplitNavigatorParamList, typeof SCREENS.WORKSPACE.WORKFLOWS_APPROVALS_APPROVER>;
@@ -54,7 +55,8 @@ function WorkspaceWorkflowsApprovalsApproverPage({policy, personalDetails, isLoa
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState('');
-    const [approvalWorkflow] = useOnyx(ONYXKEYS.APPROVAL_WORKFLOW);
+    const [approvalWorkflow, approvalWorkflowMetadata] = useOnyx(ONYXKEYS.APPROVAL_WORKFLOW, {canBeMissing: true});
+    const isApprovalWorkflowLoading = isLoadingOnyxValue(approvalWorkflowMetadata);
     const [selectedApproverEmail, setSelectedApproverEmail] = useState<string | undefined>(undefined);
     const [allApprovers, setAllApprovers] = useState<SelectionListApprover[]>([]);
     const shouldShowTextInput = allApprovers?.length >= CONST.STANDARD_LIST_ITEM_LIMIT;
@@ -83,6 +85,10 @@ function WorkspaceWorkflowsApprovalsApproverPage({policy, personalDetails, isLoa
     const sections: ApproverSection[] = useMemo(() => {
         const approvers: SelectionListApprover[] = [];
 
+        if (isApprovalWorkflowLoading) {
+            return [];
+        }
+
         if (employeeList) {
             const availableApprovers = Object.values(employeeList)
                 .map((employee): SelectionListApprover | null => {
@@ -147,6 +153,7 @@ function WorkspaceWorkflowsApprovalsApproverPage({policy, personalDetails, isLoa
             },
         ];
     }, [
+        isApprovalWorkflowLoading,
         approversFromWorkflow,
         isDefault,
         approverIndex,
@@ -160,7 +167,7 @@ function WorkspaceWorkflowsApprovalsApproverPage({policy, personalDetails, isLoa
         translate,
     ]);
 
-    const shouldShowListEmptyContent = !debouncedSearchTerm && approvalWorkflow && !sections.at(0)?.data.length;
+    const shouldShowListEmptyContent = !debouncedSearchTerm && !!approvalWorkflow && !sections.at(0)?.data.length && !isApprovalWorkflowLoading;
 
     const goBack = useCallback(() => {
         let backTo;