Fix: deleted messages are shown until revisit page

src/libs/Network/SequentialQueue.ts

@@ -1,5 +1,6 @@
 import Onyx from 'react-native-onyx';
 import * as ActiveClientManager from '@libs/ActiveClientManager';
+import {WRITE_COMMANDS} from '@libs/API/types';
 import * as Request from '@libs/Request';
 import * as RequestThrottle from '@libs/RequestThrottle';
 import * as PersistedRequests from '@userActions/PersistedRequests';
@@ -45,6 +46,47 @@ function flushOnyxUpdatesQueue() {
     QueuedOnyxUpdates.flushQueue();
 }
 
+/**
+ * Identifies and removes conflicting requests from the queue
+ */
+function reconcileRequests(persistedRequests: OnyxRequest[], commands: string[]) {
+    const requestsByActionID: Record<string, OnyxRequest[]> = {};
+
+    // Group requests by reportActionID
+    persistedRequests.forEach((request) => {
+        const {data} = request;
+        const reportActionID = data?.reportActionID as string;
+        if (reportActionID) {
+            if (!requestsByActionID[reportActionID]) {
+                requestsByActionID[reportActionID] = [];
+            }
+            requestsByActionID[reportActionID].push(request);
+        }
+    });
+
+    // Process requests with conflicting actions
+    Object.values(requestsByActionID).forEach((requests) => {
+        const conflictingRequests: OnyxRequest[] = [];
+        commands.forEach((command) => {
+            const conflictingRequest = requests.find((request) => request.command === command);
+            if (conflictingRequest) {
+                conflictingRequests.push(conflictingRequest);
+            }
+        });
+
+        if (conflictingRequests.length > 1) {
+            // Remove all requests as they cancel each other out
+            conflictingRequests.forEach((request) => {
+                // Perform action: Remove request from persisted requests
+                const index = persistedRequests.findIndex((req) => req === request);
+                if (index !== -1) {
+                    persistedRequests.splice(index, 1);
+                }
+            });
+        }
+    });
+}
+
 /**
  * Process any persisted requests, when online, one at a time until the queue is empty.
  *
@@ -63,6 +105,11 @@ function process(): Promise<void> {
     if (persistedRequests.length === 0 || NetworkStore.isOffline()) {
         return Promise.resolve();
     }
+
+    // Remove conflicting requests from the queue to avoid processing them
+    const commands = [WRITE_COMMANDS.ADD_COMMENT, WRITE_COMMANDS.DELETE_COMMENT];
+    reconcileRequests(persistedRequests, commands);
+
     const requestToProcess = persistedRequests[0];
 
     // Set the current request to a promise awaiting its processing so that getCurrentRequest can be used to take some action after the current request has processed.