fix: workspace avatar delays new changes when switching on/offline mode

src/libs/HttpUtils.js

@@ -21,6 +21,9 @@ Onyx.connect({
 // We use the AbortController API to terminate pending request in `cancelPendingRequests`
 let cancellationController = new AbortController();
 
+// To terminate pending ReconnectApp requests https://github.com/Expensify/App/issues/15627
+let reconnectAppCancellationController = new AbortController();
+
 /**
  * Send an HTTP request, and attempt to resolve the json response.
  * If there is a network error, we'll set the application offline.
@@ -29,12 +32,18 @@ let cancellationController = new AbortController();
  * @param {String} [method]
  * @param {Object} [body]
  * @param {Boolean} [canCancel]
+ * @param {String} [command]
  * @returns {Promise}
  */
-function processHTTPRequest(url, method = 'get', body = null, canCancel = true) {
+function processHTTPRequest(url, method = 'get', body = null, canCancel = true, command = '') {
+    let signal;
+    if (canCancel) {
+        signal = command === 'ReconnectApp' ? reconnectAppCancellationController.signal : cancellationController.signal;
+    }
+
     return fetch(url, {
         // We hook requests to the same Controller signal, so we can cancel them all at once
-        signal: canCancel ? cancellationController.signal : undefined,
+        signal,
         method,
         body,
     })
@@ -109,7 +118,12 @@ function xhr(command, data, type = CONST.NETWORK.METHOD.POST, shouldUseSecure =
     });
 
     const url = ApiUtils.getCommandURL({shouldUseSecure, command});
-    return processHTTPRequest(url, type, formData, data.canCancel);
+    return processHTTPRequest(url, type, formData, data.canCancel, command);
+}
+
+function cancelPendingReconnectAppRequests() {
+    reconnectAppCancellationController.abort();
+    reconnectAppCancellationController = new AbortController();
 }
 
 function cancelPendingRequests() {
@@ -118,9 +132,11 @@ function cancelPendingRequests() {
     // We create a new instance because once `abort()` is called any future requests using the same controller would
     // automatically get rejected: https://dom.spec.whatwg.org/#abortcontroller-api-integration
     cancellationController = new AbortController();
+    cancelPendingReconnectAppRequests();
 }
 
 export default {
     xhr,
     cancelPendingRequests,
+    cancelPendingReconnectAppRequests,
 };

src/libs/actions/PersistedRequests.js

@@ -1,6 +1,7 @@
 import Onyx from 'react-native-onyx';
 import _ from 'underscore';
 import ONYXKEYS from '../../ONYXKEYS';
+import HttpUtils from '../HttpUtils';
 
 let persistedRequests = [];
 
@@ -17,7 +18,12 @@ function clear() {
  * @param {Array} requestsToPersist
  */
 function save(requestsToPersist) {
-    persistedRequests = persistedRequests.concat(requestsToPersist);
+    HttpUtils.cancelPendingReconnectAppRequests();
+    persistedRequests = _.chain(persistedRequests)
+        .concat(requestsToPersist)
+        .partition(request => request.command !== 'ReconnectApp')
+        .flatten()
+        .value();
     Onyx.set(ONYXKEYS.PERSISTED_REQUESTS, persistedRequests);
 }