Hoist report-level subscriptions out of each message row

Author: gijoe0295

src/hooks/usePendingConciergeResponse.ts

@@ -1,7 +1,7 @@
 import {useEffect, useRef} from 'react';
 import type {OnyxEntry} from 'react-native-onyx';
 import {clearAgentZeroProcessingIndicator} from '@libs/actions/Report';
-import {applyPendingConciergeAction, clearPendingFollowupList, discardPendingConciergeAction} from '@libs/actions/Report/SuggestedFollowup';
+import {applyPendingConciergeAction, clearPendingFollowupList, discardPendingConciergeAction, hidePendingFollowupList} from '@libs/actions/Report/SuggestedFollowup';
 import {MAX_AGE_MS} from '@libs/AgentZeroOptimisticStore';
 import Log from '@libs/Log';
 import {rand64} from '@libs/NumberUtils';
@@ -86,10 +86,18 @@ function usePendingConciergeResponse(reportID: string | undefined) {
         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.
+    // (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;

src/libs/actions/Report/SuggestedFollowup.ts

@@ -144,6 +144,16 @@ function clearPendingFollowupList(reportID: string | undefined) {
     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});
+}
+
 /**
  * Applies a pending concierge response by moving it to REPORT_ACTIONS
  * and clearing the pending state.
@@ -168,4 +178,4 @@ function applyPendingConciergeAction(reportID: string | undefined, reportAction:
     ]);
 }
 
-export {resolveSuggestedFollowup, discardPendingConciergeAction, applyPendingConciergeAction, clearPendingFollowupList, CONCIERGE_RESPONSE_DELAY_MS};
+export {resolveSuggestedFollowup, discardPendingConciergeAction, applyPendingConciergeAction, clearPendingFollowupList, hidePendingFollowupList, CONCIERGE_RESPONSE_DELAY_MS};

src/pages/inbox/report/actionContents/ChatMessageContent.tsx

@@ -1,11 +1,11 @@
+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 useNetwork from '@hooks/useNetwork';
 import useOnyx from '@hooks/useOnyx';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
@@ -50,9 +50,9 @@ function ChatMessageContent({action, policyID, reportID, originalReportID, displ
 
     const {hasBeenFlagged} = getModerationFlagState(action);
 
-    const {isOffline} = useNetwork();
-    const [pendingFollowupList] = useOnyx(`${ONYXKEYS.COLLECTION.CONCIERGE_PENDING_FOLLOWUP_LIST}${reportID}`);
-    const hasPendingFollowupListSkeleton = !isOffline && pendingFollowupList?.reportActionID === action.reportActionID;
+    const [hasPendingFollowupListSkeleton = false] = useOnyx(`${ONYXKEYS.COLLECTION.CONCIERGE_PENDING_FOLLOWUP_LIST}${reportID}`, {
+        selector: hasPendingFollowupListSkeletonSelector(action.reportActionID),
+    });
 
     const messageHtml = getReportActionMessage(action)?.html;
     const mayHaveActionableButtons =

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};

src/types/onyx/ConciergePendingFollowupList.ts

@@ -5,6 +5,9 @@ type ConciergePendingFollowupList = {
 
     /** 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;