Fix: User experienced big delay when posting the messages

src/libs/HttpUtils.js

@@ -22,6 +22,13 @@ Onyx.connect({
 // We use the AbortController API to terminate pending request in `cancelPendingRequests`
 let cancellationController = new AbortController();
 
+/**
+ * API comamnds we need to calculate skew,
+ * Regex to get API command from the command
+ */
+const addSkewList = ['OpenReport', 'ReconnectApp', 'OpenApp'];
+const regex = /[?&]command=([^&]+)/;
+
 /**
  * Send an HTTP request, and attempt to resolve the json response.
  * If there is a network error, we'll set the application offline.
@@ -33,12 +40,26 @@ let cancellationController = new AbortController();
  * @returns {Promise}
  */
 function processHTTPRequest(url, method = 'get', body = null, canCancel = true) {
+    const startTime = new Date();
+
     return fetch(url, {
         // We hook requests to the same Controller signal, so we can cancel them all at once
         signal: canCancel ? cancellationController.signal : undefined,
         method,
         body,
     })
+        .then((response) => {
+            const match = url.match(regex)[1];
+            if (addSkewList.includes(match)) {
+                const serverTime = new Date(response.headers.get('Date'));
+                const endTime = new Date();
+                const latency = (endTime.valueOf() - startTime.valueOf()) / 2;
+                const skew = serverTime.valueOf() - startTime.valueOf() + latency;
+                // eslint-disable-next-line rulesdir/prefer-actions-set-data
+                Onyx.merge(ONYXKEYS.NETWORK, {timeSkew: skew});
+            }
+            return response;
+        })
         .then((response) => {
             // Test mode where all requests will succeed in the server, but fail to return a response
             if (shouldFailAllRequests || shouldForceOffline) {

src/libs/ReportUtils.js

@@ -77,6 +77,12 @@ Onyx.connect({
     callback: (val) => (loginList = val),
 });
 
+let networkTimeSkew;
+Onyx.connect({
+    key: ONYXKEYS.NETWORK,
+    callback: (val) => (networkTimeSkew = lodashGet(val, 'timeSkew', 0)),
+});
+
 function getChatType(report) {
     return report ? report.chatType : '';
 }
@@ -1775,7 +1781,7 @@ function buildOptimisticAddCommentReportAction(text, file) {
 
     // Remove HTML from text when applying optimistic offline comment
     const textForNewComment = isAttachment ? CONST.ATTACHMENT_MESSAGE_TEXT : parser.htmlToText(htmlForNewComment);
-
+    const timestamp = new Date().valueOf() + networkTimeSkew;
     return {
         commentText,
         reportAction: {
@@ -1791,7 +1797,7 @@ function buildOptimisticAddCommentReportAction(text, file) {
             ],
             automatic: false,
             avatar: lodashGet(allPersonalDetails, [currentUserAccountID, 'avatar'], UserUtils.getDefaultAvatarURL(currentUserAccountID)),
-            created: DateUtils.getDBTime(),
+            created: DateUtils.getDBTime(timestamp),
             message: [
                 {
                     translationKey: isAttachment ? CONST.TRANSLATION_KEYS.ATTACHMENT : '',

src/libs/actions/Report.js

@@ -75,9 +75,13 @@ Onyx.connect({
 });
 
 let isNetworkOffline = false;
+let networkTimeSkew;
 Onyx.connect({
     key: ONYXKEYS.NETWORK,
-    callback: (val) => (isNetworkOffline = lodashGet(val, 'isOffline', false)),
+    callback: (val) => {
+        isNetworkOffline = lodashGet(val, 'isOffline', false);
+        networkTimeSkew = lodashGet(val, 'timeSkew', 0);
+    },
 });
 
 let allPersonalDetails;
@@ -251,9 +255,8 @@ function addActions(reportID, text = '', file) {
 
     // Always prefer the file as the last action over text
     const lastAction = attachmentAction || reportCommentAction;
-
-    const currentTime = DateUtils.getDBTime();
-
+    const timestamp = new Date().valueOf() + networkTimeSkew;
+    const currentTime = DateUtils.getDBTime(timestamp);
     const lastCommentText = ReportUtils.formatReportLastMessageText(lastAction.message[0].text);
 
     const optimisticReport = {

src/types/onyx/Network.ts

@@ -7,6 +7,9 @@ type Network = {
 
     /** Whether we should fail all network requests */
     shouldFailAllRequests?: boolean;
+
+    /** Skew between the client and server clocks  */
+    timeSkew?: number;
 };
 
 export default Network;