diff --git a/src/pages/home/report/ReportActionItemMessage.js b/src/pages/home/report/ReportActionItemMessage.js
index 9b026c7db55c..fe28b1a3868e 100644
--- a/src/pages/home/report/ReportActionItemMessage.js
+++ b/src/pages/home/report/ReportActionItemMessage.js
@@ -2,6 +2,8 @@ import React from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import _ from 'underscore';
+import {withOnyx} from 'react-native-onyx';
+import ONYXKEYS from '../../../ONYXKEYS';
 import styles from '../../../styles/styles';
 import ReportActionItemFragment from './ReportActionItemFragment';
 import ReportActionPropTypes from './ReportActionPropTypes';
@@ -9,11 +11,20 @@ import ReportActionPropTypes from './ReportActionPropTypes';
 const propTypes = {
     // The report action
     action: PropTypes.shape(ReportActionPropTypes).isRequired,
+
+    // Information about the network
+    network: PropTypes.shape({
+        // Is the network currently offline or not
+        isOffline: PropTypes.bool,
+    }),
+};
+
+const defaultProps = {
+    network: {isOffline: false},
 };
 
-const ReportActionItemMessage = ({action}) => {
-    // reportActionID is only present when the action is saved onto server.
-    const isUnsent = action.loading && !action.reportActionID;
+const ReportActionItemMessage = ({action, network}) => {
+    const isUnsent = network.isOffline && action.loading;
     return (
         <View style={[styles.chatItemMessage, isUnsent && styles.chatItemUnsentMessage]}>
             {_.map(_.compact(action.message), (fragment, index) => (
@@ -29,6 +40,11 @@ const ReportActionItemMessage = ({action}) => {
 };
 
 ReportActionItemMessage.propTypes = propTypes;
+ReportActionItemMessage.defaultProps = defaultProps;
 ReportActionItemMessage.displayName = 'ReportActionItemMessage';
 
-export default ReportActionItemMessage;
+export default withOnyx({
+    network: {
+        key: ONYXKEYS.NETWORK,
+    },
+})(ReportActionItemMessage);