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: OnyxUpdatesFromServer[] = [];
+
 export default () => {
     console.debug('[OnyxUpdateManager] Listening for updates from the server');
     Onyx.connect({
@@ -66,32 +70,101 @@ 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 = deferredUpdates.length;
+                // Add the new update to the deferred updates
+                deferredUpdates.push(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
+            function applyDeferredUpdates() {
+                // If lastUpdateIDAppliedToClient is null, then no updates were applied,
+                // therefore something must have gone wrong and we should handle the problem.
+                if (!lastUpdateIDAppliedToClient) {
+                    // TODO: Handle this case
+                    return;
+                }
+
+                function unpauseQueueAndReset() {
                     console.debug('[OnyxUpdateManager] Done applying all updates');
                     Onyx.set(ONYXKEYS.ONYX_UPDATES_FROM_SERVER, null);
                     SequentialQueue.unpause();
+                }
+
+                // If "updateAfterReconnectApp" is set, it means that case (1) was triggered and we only need to apply the one update, not the deferred ones.
+                if (deferredUpdateBeforeReconnect) {
+                    OnyxUpdates.apply(deferredUpdateBeforeReconnect).finally(unpauseQueueAndReset);
+                    deferredUpdateBeforeReconnect = undefined;
+                    return;
+                }
+
+                // If case (2) was triggered, then we need to sort the deferred updates by lastUpdateID and apply them in order.
+                const sortedDeferredUpdates = deferredUpdates.sort((a, b) => {
+                    const aLastUpdateID = Number(a.lastUpdateID) || 0;
+                    const bLastUpdateID = Number(b.lastUpdateID) || 0;
+
+                    return aLastUpdateID - bLastUpdateID;
                 });
-            });
+
+                // In order for the deferred updates to be applied correctly in order,
+                // we need to check if there are any gaps deferred updates.
+                function validateUpdatesAreChained(): boolean {
+                    for (let i = 0; i < sortedDeferredUpdates.length - 1; i++) {
+                        const reversedDeferredUpdates = sortedDeferredUpdates.toReversed();
+                        const currentUpdate = reversedDeferredUpdates[i];
+                        const previousUpdate = reversedDeferredUpdates[i + 1];
+
+                        if (Number(previousUpdate.lastUpdateID) !== Number(currentUpdate.previousUpdateID)) {
+                            return false;
+                        }
+                    }
+
+                    return true;
+                }
+
+                //  If we detect a gap in the fetched + deferred updates, re-fetch the missing updates
+                if (!validateUpdatesAreChained()) {
+                    const lastDeferedUpdateId = Number(sortedDeferredUpdates.at(-1)?.lastUpdateID) ?? 0;
+
+                    canUnpauseQueuePromise = App.getMissingOnyxUpdates(lastUpdateIDAppliedToClient, lastDeferedUpdateId).finally(applyDeferredUpdates);
+                    return;
+                }
+
+                Promise.all(sortedDeferredUpdates.map((update) => OnyxUpdates.apply(update))).finally(() => {
+                    unpauseQueueAndReset();
+                    deferredUpdates = [];
+                });
+            }
+
+            canUnpauseQueuePromise.finally(applyDeferredUpdates);
         },
     });
 };