Merge pull request #90363 from gijoe0295/App-89686

marcochavezf · web-flow · commit 73665ddcb44e · 2026-05-28T21:29:32.000-06:00
Add suggested follow-up skeleton
diff --git a/src/ONYXKEYS.ts b/src/ONYXKEYS.ts
@@ -778,6 +778,7 @@ const ONYXKEYS = {
         REPORT_IS_COMPOSER_FULL_SIZE: 'reportIsComposerFullSize_',
         REPORT_USER_IS_TYPING: 'reportUserIsTyping_',
         PENDING_CONCIERGE_RESPONSE: 'pendingConciergeResponse_',
+        CONCIERGE_PENDING_FOLLOWUP_LIST: 'conciergePendingFollowupList_',
         REPORT_USER_IS_LEAVING_ROOM: 'reportUserIsLeavingRoom_',
         SECURITY_GROUP: 'securityGroup_',
         TRANSACTION: 'transactions_',
@@ -1344,6 +1345,7 @@ type OnyxCollectionValuesMapping = {
     [ONYXKEYS.COLLECTION.REPORT_IS_COMPOSER_FULL_SIZE]: boolean;
     [ONYXKEYS.COLLECTION.REPORT_USER_IS_TYPING]: OnyxTypes.ReportUserIsTyping;
     [ONYXKEYS.COLLECTION.PENDING_CONCIERGE_RESPONSE]: OnyxTypes.PendingConciergeResponse;
+    [ONYXKEYS.COLLECTION.CONCIERGE_PENDING_FOLLOWUP_LIST]: OnyxTypes.ConciergePendingFollowupList;
     [ONYXKEYS.COLLECTION.REPORT_USER_IS_LEAVING_ROOM]: boolean;
     [ONYXKEYS.COLLECTION.SECURITY_GROUP]: OnyxTypes.SecurityGroup;
     [ONYXKEYS.COLLECTION.TRANSACTION]: OnyxTypes.Transaction;
diff --git a/src/components/ReportActionItem/FollowupListSkeleton.tsx b/src/components/ReportActionItem/FollowupListSkeleton.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import {View} from 'react-native';
+import Animated, {FadeIn} from 'react-native-reanimated';
+import SkeletonRect from '@components/SkeletonRect';
+import SkeletonViewContentLoader from '@components/SkeletonViewContentLoader';
+import useTheme from '@hooks/useTheme';
+import useThemeStyles from '@hooks/useThemeStyles';
+import useSkeletonSpan from '@libs/telemetry/useSkeletonSpan';
+
+const BAR_HEIGHT = 40;
+const BAR_PADDING = 16;
+const BAR_WIDTH = 180;
+const BAR_COUNT = 3;
+
+function ActionableItemSkeleton() {
+    const styles = useThemeStyles();
+    const theme = useTheme();
+
+    return (
+        <View style={styles.actionableItemButtonSkeleton}>
+            <SkeletonViewContentLoader
+                height={BAR_HEIGHT}
+                width={BAR_WIDTH + BAR_PADDING * 2}
+                backgroundColor={theme.buttonHoveredBG}
+                foregroundColor={theme.skeletonLHNOut}
+            >
+                <SkeletonRect
+                    transform={[{translateX: BAR_PADDING}, {translateY: BAR_PADDING}]}
+                    width={BAR_WIDTH}
+                    height="8"
+                />
+            </SkeletonViewContentLoader>
+        </View>
+    );
+}
+
+function FollowupListSkeleton() {
+    const styles = useThemeStyles();
+    useSkeletonSpan('FollowupListSkeleton', {context: 'ReportScreen.ChatActionableButtons'});
+
+    return (
+        <Animated.View entering={FadeIn}>
+            <View style={[styles.gap2, styles.mt2, styles.flexColumn, styles.alignItemsStart]}>
+                {Array.from({length: BAR_COUNT}, (_, index) => (
+                    <ActionableItemSkeleton key={index} />
+                ))}
+            </View>
+        </Animated.View>
+    );
+}
+
+export default FollowupListSkeleton;
diff --git a/src/hooks/usePendingConciergeResponse.ts b/src/hooks/usePendingConciergeResponse.ts
@@ -1,14 +1,18 @@
 import {useEffect, useRef} from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
-import {applyPendingConciergeAction, discardPendingConciergeAction} from '@libs/actions/Report/SuggestedFollowup';
+import {clearAgentZeroProcessingIndicator} from '@libs/actions/Report';
+import {applyPendingConciergeAction, clearPendingFollowupList, discardPendingConciergeAction, hidePendingFollowupList} from '@libs/actions/Report/SuggestedFollowup';
+import AgentZeroOptimisticStore, {MAX_AGE_MS} from '@libs/AgentZeroOptimisticStore';
 import Log from '@libs/Log';
 import {rand64} from '@libs/NumberUtils';
 import type {ConciergeDraftEvent} from '@libs/Pusher/types';
+import {parseFollowupsFromHtml} from '@libs/ReportActionFollowupUtils';
 import tokenizeForReveal from '@libs/ReportActionFollowupUtils/tokenizeForReveal';
 import {getReportActionHtml} from '@libs/ReportActionsUtils';
 import {useConciergeDraftActions} from '@pages/inbox/ConciergeDraftContext';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {ReportAction, ReportActions} from '@src/types/onyx';
+import useNetwork from './useNetwork';
 import useOnyx from './useOnyx';
 
 /** Default trickle duration. Targets ~19 chars/sec start (~7/sec end after ease-out) across a typical multi-paragraph response — visibly streaming without dragging the user past the moment they want to read. */
@@ -21,6 +25,8 @@ const TRICKLE_HARD_CAP_MS = 60_000;
 const ACCELERATED_REMAINING_MS = 1_500;
 /** Minimum char-level anchors before we opt into the trickle reveal. Replies under this fall back to the binary reveal at `displayAfter`. */
 const MIN_TRICKLE_TOKEN_COUNT = 100;
+/** Hard cap on a pending followup-list skeleton. If the server never appends a real followup-list within this window, drop the marker so the UI stops showing a perpetual skeleton. */
+const PENDING_FOLLOWUP_LIST_HARD_CAP_MS = MAX_AGE_MS;
 
 function easeOut(t: number): number {
     const clamped = Math.max(0, Math.min(1, t));
@@ -32,13 +38,19 @@ function easeOut(t: number): number {
  * the binary reveal at `displayAfter`. `REPORT_ACTIONS` is written at completion.
  */
 function usePendingConciergeResponse(reportID: string | undefined) {
+    const {isOffline} = useNetwork();
     const [pendingResponse] = useOnyx(`${ONYXKEYS.COLLECTION.PENDING_CONCIERGE_RESPONSE}${reportID}`);
+    const [pendingFollowupList] = useOnyx(`${ONYXKEYS.COLLECTION.CONCIERGE_PENDING_FOLLOWUP_LIST}${reportID}`);
     const reportActionID = pendingResponse?.reportAction?.reportActionID;
     const fullHtml = pendingResponse?.reportAction ? getReportActionHtml(pendingResponse.reportAction) : '';
     // React Compiler auto-memoizes the selector closure and the tokenize result;
     // explicit useCallback/useMemo would just shadow the compiler's analysis.
     const persistedActionSelector = (actions: OnyxEntry<ReportActions>): ReportAction | undefined => (reportActionID && actions ? actions[reportActionID] : undefined);
     const [persistedAction] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {selector: persistedActionSelector});
+    const pendingFollowupActionID = pendingFollowupList?.reportActionID;
+    const pendingFollowupActionSelector = (actions: OnyxEntry<ReportActions>): ReportAction | undefined =>
+        pendingFollowupActionID && actions ? actions[pendingFollowupActionID] : undefined;
+    const [pendingFollowupAction] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`, {selector: pendingFollowupActionSelector});
     const {dispatchLocalDraftEvent} = useConciergeDraftActions();
 
     const tokens = tokenizeForReveal(fullHtml);
@@ -65,6 +77,58 @@ function usePendingConciergeResponse(reportID: string | undefined) {
         accelerateRef.current(Date.now());
     }, [persistedAction]);
 
+    const lastOnlineTransitionAtRef = useRef<number>(0);
+    const wasOfflineRef = useRef<boolean>(isOffline);
+    useEffect(() => {
+        if (wasOfflineRef.current && !isOffline) {
+            lastOnlineTransitionAtRef.current = Date.now();
+        }
+        wasOfflineRef.current = isOffline;
+    }, [isOffline]);
+
+    // Hide the followup-list skeleton when the user is offline.
+    useEffect(() => {
+        if (!reportID || !pendingFollowupList || !!pendingFollowupList.hidden === isOffline) {
+            return;
+        }
+        hidePendingFollowupList(reportID, isOffline || null);
+    }, [reportID, isOffline, pendingFollowupList]);
+
+    // Clear the pending followup-list skeleton flag as soon as the server reply
+    // (with <followup-list>) overwrites the optimistic action.
+    // A TTL fallback guards against the case where no followup-list ever arrives
+    // so the skeleton won't get stuck.
+    useEffect(() => {
+        if (!reportID || !pendingFollowupList) {
+            return;
+        }
+        const html = pendingFollowupAction ? getReportActionHtml(pendingFollowupAction) : '';
+        const hardClearIndicator = () => {
+            // Skip clearing agent thinking indicator when a newer agent request has kicked off.
+            const optimisticEntry = AgentZeroOptimisticStore.getEntry(reportID);
+            const hasNewerRequest = !!optimisticEntry && optimisticEntry.startedAt > pendingFollowupList.createdAt;
+            if (!hasNewerRequest) {
+                clearAgentZeroProcessingIndicator(reportID);
+            }
+            clearPendingFollowupList(reportID);
+        };
+        if (parseFollowupsFromHtml(html)?.length) {
+            hardClearIndicator();
+            return;
+        }
+        if (isOffline) {
+            return;
+        }
+        const effectiveStart = Math.max(pendingFollowupList.createdAt, lastOnlineTransitionAtRef.current);
+        const remainingTTL = effectiveStart + PENDING_FOLLOWUP_LIST_HARD_CAP_MS - Date.now();
+        if (remainingTTL <= 0) {
+            hardClearIndicator();
+            return;
+        }
+        const ttlTimer = setTimeout(hardClearIndicator, remainingTTL);
+        return () => clearTimeout(ttlTimer);
+    }, [reportID, pendingFollowupList, pendingFollowupAction, isOffline]);
+
     useEffect(() => {
         if (!reportID || !reportActionID) {
             return;
diff --git a/src/hooks/useShouldSuppressConciergeIndicators.tsx b/src/hooks/useShouldSuppressConciergeIndicators.tsx
@@ -8,14 +8,18 @@ import useOnyx from './useOnyx';
 import useSidePanelState from './useSidePanelState';
 
 /**
- * Returns true when thinking/typing indicators should be hidden in the side-panel
- * welcome state — specifically for Concierge DMs before the user sends their first message.
+ * Returns true when thinking/typing indicators should be hidden. Two cases:
+ *   1. The side-panel welcome state — specifically Concierge DMs before the
+ *      user sends their first message.
+ *   2. The followup-list pending window — between trickle completion and the
+ *      server reply with `<followup-list>`.
  */
 function useShouldSuppressConciergeIndicators(reportID: string | undefined): boolean {
     const isInSidePanel = useIsInSidePanel();
     const {sessionStartTime} = useSidePanelState();
     const {accountID: currentUserAccountID} = useCurrentUserPersonalDetails();
     const [conciergeReportID] = useOnyx(ONYXKEYS.CONCIERGE_REPORT_ID);
+    const [pendingFollowupList] = useOnyx(`${ONYXKEYS.COLLECTION.CONCIERGE_PENDING_FOLLOWUP_LIST}${reportID}`);
 
     const isConciergeChat = reportID === conciergeReportID;
 
@@ -29,6 +33,10 @@ function useShouldSuppressConciergeIndicators(reportID: string | undefined): boo
         selector: hasUserSentMessageSelector,
     });
 
+    if (pendingFollowupList) {
+        return true;
+    }
+
     return isConciergeChat && isInSidePanel && !hasUserSentMessage;
 }
 
diff --git a/src/libs/actions/Report/SuggestedFollowup.ts b/src/libs/actions/Report/SuggestedFollowup.ts
@@ -128,7 +128,30 @@ function addOptimisticConciergeActionWithDelay(reportID: string, optimisticConci
  * Called when the response has been pending too long (e.g. app was killed and restarted).
  */
 function discardPendingConciergeAction(reportID: string | undefined) {
-    Onyx.set(`${ONYXKEYS.COLLECTION.PENDING_CONCIERGE_RESPONSE}${reportID}`, null);
+    Onyx.multiSet({
+        [`${ONYXKEYS.COLLECTION.PENDING_CONCIERGE_RESPONSE}${reportID}`]: null,
+        [`${ONYXKEYS.COLLECTION.CONCIERGE_PENDING_FOLLOWUP_LIST}${reportID}`]: null,
+    });
+}
+
+/**
+ * Clears the pending followup-list marker for a report so the skeleton stops rendering.
+ */
+function clearPendingFollowupList(reportID: string | undefined) {
+    if (!reportID) {
+        return;
+    }
+    Onyx.set(`${ONYXKEYS.COLLECTION.CONCIERGE_PENDING_FOLLOWUP_LIST}${reportID}`, null);
+}
+
+/**
+ * Temporarily hides the pending followup-list skeleton.
+ */
+function hidePendingFollowupList(reportID: string | undefined, hidden: boolean | null) {
+    if (!reportID) {
+        return;
+    }
+    Onyx.merge(`${ONYXKEYS.COLLECTION.CONCIERGE_PENDING_FOLLOWUP_LIST}${reportID}`, {hidden});
 }
 
 /**
@@ -147,7 +170,12 @@ function applyPendingConciergeAction(reportID: string | undefined, reportAction:
             key: `${ONYXKEYS.COLLECTION.REPORT_ACTIONS}${reportID}`,
             value: {[reportAction.reportActionID]: reportAction},
         },
+        {
+            onyxMethod: Onyx.METHOD.SET,
+            key: `${ONYXKEYS.COLLECTION.CONCIERGE_PENDING_FOLLOWUP_LIST}${reportID}`,
+            value: {reportActionID: reportAction.reportActionID, createdAt: Date.now()},
+        },
     ]);
 }
 
-export {resolveSuggestedFollowup, discardPendingConciergeAction, applyPendingConciergeAction, CONCIERGE_RESPONSE_DELAY_MS};
+export {resolveSuggestedFollowup, discardPendingConciergeAction, applyPendingConciergeAction, clearPendingFollowupList, hidePendingFollowupList, CONCIERGE_RESPONSE_DELAY_MS};
diff --git a/src/pages/inbox/report/actionContents/ChatActionableButtons.tsx b/src/pages/inbox/report/actionContents/ChatActionableButtons.tsx
@@ -2,6 +2,7 @@ import {validTransactionDraftIDsSelector} from '@selectors/TransactionDraft';
 import React from 'react';
 import type {ActionableItem} from '@components/ReportActionItem/ActionableItemButtons';
 import ActionableItemButtons from '@components/ReportActionItem/ActionableItemButtons';
+import FollowupListSkeleton from '@components/ReportActionItem/FollowupListSkeleton';
 import useActivePolicy from '@hooks/useActivePolicy';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useDelegateAccountID from '@hooks/useDelegateAccountID';
@@ -37,9 +38,10 @@ type ChatActionableButtonsProps = {
     action: OnyxTypes.ReportAction;
     originalReportID: string | undefined;
     reportID: string | undefined;
+    hasPendingFollowupListSkeleton: boolean;
 };
 
-function ChatActionableButtons({action, originalReportID, reportID}: ChatActionableButtonsProps) {
+function ChatActionableButtons({action, originalReportID, reportID, hasPendingFollowupListSkeleton}: ChatActionableButtonsProps) {
     const styles = useThemeStyles();
     const actionOwnerReportID = originalReportID ?? reportID;
     const [originalReport] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${getNonEmptyStringOnyxID(originalReportID)}`);
@@ -208,6 +210,9 @@ function ChatActionableButtons({action, originalReportID, reportID}: ChatActiona
     })();
 
     if (actionableItemButtons.length === 0) {
+        if (hasPendingFollowupListSkeleton) {
+            return <FollowupListSkeleton />;
+        }
         return null;
     }
 
diff --git a/src/pages/inbox/report/actionContents/ChatMessageContent.tsx b/src/pages/inbox/report/actionContents/ChatMessageContent.tsx
@@ -1,10 +1,12 @@
+import {hasPendingFollowupListSkeletonSelector} from '@selectors/AgentZeroChat';
 import React from 'react';
 import {View} from 'react-native';
 import {AttachmentContext} from '@components/AttachmentContext';
 import Button from '@components/Button';
 import MentionReportContext from '@components/HTMLEngineProvider/HTMLRenderers/MentionReportRenderer/MentionReportContext';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useOnyx from '@hooks/useOnyx';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {parseFollowupsFromHtml} from '@libs/ReportActionFollowupUtils';
@@ -19,6 +21,7 @@ import {
 import ReportActionItemMessage from '@pages/inbox/report/ReportActionItemMessage';
 import ReportActionItemMessageEdit from '@pages/inbox/report/ReportActionItemMessageEdit';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
 import type * as OnyxTypes from '@src/types/onyx';
 import ChatActionableButtons from './ChatActionableButtons';
 
@@ -46,13 +49,18 @@ function ChatMessageContent({action, policyID, reportID, originalReportID, displ
 
     const {hasBeenFlagged} = getModerationFlagState(action);
 
+    const [hasPendingFollowupListSkeleton = false] = useOnyx(`${ONYXKEYS.COLLECTION.CONCIERGE_PENDING_FOLLOWUP_LIST}${reportID}`, {
+        selector: hasPendingFollowupListSkeletonSelector(action.reportActionID),
+    });
+
     const messageHtml = getReportActionMessage(action)?.html;
     const mayHaveActionableButtons =
         isActionableAddPaymentCard(action) ||
         isConciergeCategoryOptions(action) ||
         isConciergeDescriptionOptions(action) ||
         isActionableTrackExpense(action) ||
-        !!(messageHtml && parseFollowupsFromHtml(messageHtml)?.length);
+        !!(messageHtml && parseFollowupsFromHtml(messageHtml)?.length) ||
+        hasPendingFollowupListSkeleton;
 
     return (
         <MentionReportContext.Provider value={mentionReportContextValue}>
@@ -92,6 +100,7 @@ function ChatMessageContent({action, policyID, reportID, originalReportID, displ
                                 action={action}
                                 originalReportID={originalReportID}
                                 reportID={reportID}
+                                hasPendingFollowupListSkeleton={hasPendingFollowupListSkeleton}
                             />
                         )}
                     </View>
diff --git a/src/selectors/AgentZeroChat.ts b/src/selectors/AgentZeroChat.ts
@@ -1,6 +1,6 @@
 import type {OnyxCollection, OnyxEntry} from 'react-native-onyx';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {AgentPrompt} from '@src/types/onyx';
+import type {AgentPrompt, ConciergePendingFollowupList} from '@src/types/onyx';
 import type Report from '@src/types/onyx/Report';
 
 const getReportParticipantAccountIDs = (report: OnyxEntry<Report>): number[] => (report?.participants ? Object.keys(report.participants).map(Number) : []);
@@ -23,4 +23,9 @@ const getAgentAccountIDFlags = (agentPrompts: OnyxCollection<AgentPrompt>): Reco
     return flags;
 };
 
-export {getReportParticipantAccountIDs, getAgentAccountIDFlags};
+const hasPendingFollowupListSkeletonSelector =
+    (reportActionID: string) =>
+    (pending: OnyxEntry<ConciergePendingFollowupList>): boolean =>
+        !pending?.hidden && pending?.reportActionID === reportActionID;
+
+export {getReportParticipantAccountIDs, getAgentAccountIDFlags, hasPendingFollowupListSkeletonSelector};
diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -972,6 +972,12 @@ const staticStyles = (theme: ThemeColors) =>
             ...wordBreak.breakWord,
         },
 
+        actionableItemButtonSkeleton: {
+            alignItems: 'flex-start',
+            borderRadius: 20,
+            backgroundColor: theme.buttonDefaultBG,
+        },
+
         hoveredComponentBG: {
             backgroundColor: theme.hoverComponentBG,
         },
diff --git a/src/types/onyx/ConciergePendingFollowupList.ts b/src/types/onyx/ConciergePendingFollowupList.ts
@@ -0,0 +1,13 @@
+/** Marks a Concierge report action whose followup list is still pending arrival from the server */
+type ConciergePendingFollowupList = {
+    /** The reportActionID of the optimistic Concierge action awaiting its followup list */
+    reportActionID: string;
+
+    /** Timestamp (ms) when the pending flag was created, used for TTL cleanup */
+    createdAt: number;
+
+    /** Whether the skeleton should be visually hidden (e.g., user is offline) */
+    hidden?: boolean;
+};
+
+export default ConciergePendingFollowupList;
diff --git a/src/types/onyx/index.ts b/src/types/onyx/index.ts
@@ -37,6 +37,7 @@ import type {
 } from './CardFeeds';
 import type CardOnWaitlist from './CardOnWaitlist';
 import type CodingRuleMatchingTransaction from './CodingRuleMatchingTransaction';
+import type ConciergePendingFollowupList from './ConciergePendingFollowupList';
 import type CopyPolicySettings from './CopyPolicySettings';
 import type {CorpayFields, CorpayFormField} from './CorpayFields';
 import type {CorpayOnboardingFields} from './CorpayOnboardingFields';
@@ -267,6 +268,7 @@ export type {
     AnyOnyxUpdatesFromServer,
     OdometerDraft,
     Pages,
+    ConciergePendingFollowupList,
     PendingConciergeResponse,
     PersonalBankAccount,
     PersonalDetails,
diff --git a/tests/ui/ChatActionableButtonsTest.tsx b/tests/ui/ChatActionableButtonsTest.tsx
diff --git a/tests/unit/SuggestedFollowupTest.ts b/tests/unit/SuggestedFollowupTest.ts
diff --git a/tests/unit/hooks/usePendingConciergeResponse.test.ts b/tests/unit/hooks/usePendingConciergeResponse.test.ts
diff --git a/tests/unit/hooks/useShouldSuppressConciergeIndicators.test.ts b/tests/unit/hooks/useShouldSuppressConciergeIndicators.test.ts
