Defer local updates if there are missing updates and only call GetMissingOnyxMessages once

src/libs/actions/OnyxUpdateManager.ts

@@ -3,6 +3,7 @@ import Log from '@libs/Log';
 import * as SequentialQueue from '@libs/Network/SequentialQueue';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import type {OnyxUpdatesFromServer, Response} from '@src/types/onyx';
 import * as App from './App';
 import * as OnyxUpdates from './OnyxUpdates';
 
@@ -27,6 +28,9 @@ Onyx.connect({
     callback: (value) => (lastUpdateIDAppliedToClient = value),
 });
 
+let deferredUpdateBeforeReconnect: OnyxUpdatesFromServer | undefined;
+let deferredUpdates: Record<number, OnyxUpdatesFromServer> = {};
+
 export default () => {
     console.debug('[OnyxUpdateManager] Listening for updates from the server');
     Onyx.connect({
@@ -66,32 +70,114 @@ export default () => {
             // applied in their correct and specific order. If this queue was not paused, then there would be a lot of
             // onyx data being applied while we are fetching the missing updates and that would put them all out of order.
             SequentialQueue.pause();
-            let canUnpauseQueuePromise;
+            let canUnpauseQueuePromise: Promise<Response | void>;
 
             // The flow below is setting the promise to a reconnect app to address flow (1) explained above.
             if (!lastUpdateIDAppliedToClient) {
                 Log.info('Client has not gotten reliable updates before so reconnecting the app to start the process');
 
+                deferredUpdateBeforeReconnect = updateParams;
+
                 // Since this is a full reconnectApp, we'll not apply the updates we received - those will come in the reconnect app request.
                 canUnpauseQueuePromise = App.finalReconnectAppAfterActivatingReliableUpdates();
             } else {
                 // The flow below is setting the promise to a getMissingOnyxUpdates to address flow (2) explained above.
+
+                // Get the number of deferred updates before adding the new one
+                const existingDeferredUpdatesCount = Object.keys(deferredUpdates).length;
+                // Add the new update to the deferred updates
+                deferredUpdates[Number(updateParams.lastUpdateID)] = updateParams;
+
+                // If there are already deferred updates, then we don't need to fetch the missing updates again
+                if (existingDeferredUpdatesCount > 0) {
+                    return;
+                }
+
                 console.debug(`[OnyxUpdateManager] Client is behind the server by ${Number(previousUpdateIDFromServer) - lastUpdateIDAppliedToClient} so fetching incremental updates`);
                 Log.info('Gap detected in update IDs from server so fetching incremental updates', true, {
                     lastUpdateIDFromServer,
                     previousUpdateIDFromServer,
                     lastUpdateIDAppliedToClient,
                 });
+
+                // Get the missing Onyx updates from the server
                 canUnpauseQueuePromise = App.getMissingOnyxUpdates(lastUpdateIDAppliedToClient, previousUpdateIDFromServer);
             }
 
-            canUnpauseQueuePromise.finally(() => {
-                OnyxUpdates.apply(updateParams).finally(() => {
+            // This function will apply the deferred updates in order after the missing updates are fetched and applied
+            function applyDeferredUpdates() {
+                // It should not be possible for lastUpdateIDAppliedToClient to be null, after the missing updates have been applied, therefore we don't need to handle this case
+                if (!lastUpdateIDAppliedToClient) {
+                    return;
+                }
+
+                // If "updateAfterReconnectApp" is set, it means that case (1) was triggered and we need to apply the update that was queued before the reconnectApp
+                if (deferredUpdateBeforeReconnect) {
+                    OnyxUpdates.apply(deferredUpdateBeforeReconnect);
+                    deferredUpdateBeforeReconnect = undefined;
+                }
+
+                // We only want to apply deferred updates that are newer than the last update that was applied to the client.
+                // At this point, the missing updates from "GetMissingOnyxUpdates" have been applied already, so we can safely filter out.
+                const pendingDeferredUpdates = Object.fromEntries(
+                    Object.entries(deferredUpdates).filter(([lastUpdateID]) => {
+                        // Same as above, it should not be possible for lastUpdateIDAppliedToClient to be null.
+                        // Still, if so we want to keep the deferred update in the list
+                        if (!lastUpdateIDAppliedToClient) {
+                            return true;
+                        }
+                        return (Number(lastUpdateID) ?? 0) > lastUpdateIDAppliedToClient;
+                    }),
+                );
+                const pendingDeferredUpdateValues = Object.values(pendingDeferredUpdates);
+
+                function unpauseQueueAndReset() {
                     console.debug('[OnyxUpdateManager] Done applying all updates');
                     Onyx.set(ONYXKEYS.ONYX_UPDATES_FROM_SERVER, null);
                     SequentialQueue.unpause();
+                }
+
+                // If there are no remaining deferred updates after filtering out outdated ones,
+                //  we can just unpause the queue and return
+                if (pendingDeferredUpdateValues.length === 0) {
+                    unpauseQueueAndReset();
+                    return;
+                }
+
+                let lastValidDeferredUpdateID = 0;
+                // In order for the deferred updates to be applied correctly in order,
+                // we need to check if there are any gaps deferred updates.
+                function areDeferredUpdatesChained(): boolean {
+                    let isFirst = true;
+                    for (const update of pendingDeferredUpdateValues) {
+                        // If it's the first one, we need to skip it since we won't have the previousUpdateID
+                        // if the previousUpdateID key exists, then we can just move on since there's no gap
+                        if (isFirst || pendingDeferredUpdates[Number(update.previousUpdateID)]) {
+                            lastValidDeferredUpdateID = Number(update.lastUpdateID);
+                            isFirst = false;
+                            // eslint-disable-next-line no-continue
+                            continue;
+                        }
+
+                        return false;
+                    }
+
+                    return true;
+                }
+
+                //  If we detect a gap in the deferred updates, re-fetch the missing updates.
+                if (!areDeferredUpdatesChained()) {
+                    canUnpauseQueuePromise = App.getMissingOnyxUpdates(lastUpdateIDAppliedToClient, lastValidDeferredUpdateID).finally(applyDeferredUpdates);
+                    return;
+                }
+
+                Promise.all(pendingDeferredUpdateValues.map((update) => OnyxUpdates.apply(update))).finally(() => {
+                    unpauseQueueAndReset();
+                    deferredUpdates = [];
                 });
-            });
+            }
+
+            canUnpauseQueuePromise.finally(applyDeferredUpdates);
         },
     });
 };