Show static skeleton UI if no reportAction exists for chat report in ONYX when the client is offline

src/pages/home/ReportScreen.js

@@ -165,7 +165,8 @@ class ReportScreen extends React.Component {
         // It possible that we may not have the report object yet in Onyx yet e.g. we navigated to a URL for an accessible report that
         // is not stored locally yet. If props.report.reportID exists, then the report has been stored locally and nothing more needs to be done.
         // If it doesn't exist, then we fetch the report from the API.
-        if (this.props.report.reportID) {
+        // If the client is offline, we cannot fetch the report, so let's just return.
+        if (this.props.report.reportID || this.props.network.isOffline) {
             return;
         }
 

src/pages/home/report/ReportActionsList.js

@@ -9,7 +9,7 @@ import * as ReportScrollManager from '../../../libs/ReportScrollManager';
 import styles from '../../../styles/styles';
 import * as ReportUtils from '../../../libs/ReportUtils';
 import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
-import {withNetwork, withPersonalDetails} from '../../../components/OnyxProvider';
+import {withPersonalDetails} from '../../../components/OnyxProvider';
 import ReportActionItem from './ReportActionItem';
 import ReportActionsSkeletonView from '../../../components/ReportActionsSkeletonView';
 import variables from '../../../styles/variables';
@@ -19,7 +19,6 @@ import reportActionPropTypes from './reportActionPropTypes';
 import CONST from '../../../CONST';
 import * as StyleUtils from '../../../styles/StyleUtils';
 import reportPropTypes from '../../reportPropTypes';
-import networkPropTypes from '../../../components/networkPropTypes';
 
 const propTypes = {
     /** Position of the "New" line marker */
@@ -49,9 +48,6 @@ const propTypes = {
     /** Function to load more chats */
     loadMoreChats: PropTypes.func.isRequired,
 
-    /** Information about the network */
-    network: networkPropTypes.isRequired,
-
     ...withDrawerPropTypes,
     ...windowDimensionsPropTypes,
 };
@@ -145,6 +141,10 @@ class ReportActionsList extends React.Component {
     }
 
     render() {
+        // Non-animating skeleton UI represents that chat history exists but is not loaded locally in Onyx.
+        // While offline if there is at least one non-pending action or if this is a new chat then we don't need to show the non-animating skeleton UI.
+        const shouldShowNonAnimatingSkeleton = !this.props.report.isOptimisticReport && _.every(this.props.sortedReportActions, action => action.pendingAction);
+
         // Native mobile does not render updates flatlist the changes even though component did update called.
         // To notify there something changes we can use extraData prop to flatlist
         const extraData = (!this.props.isDrawerOpen && this.props.isSmallScreenWidth) ? this.props.newMarkerSequenceNumber : undefined;
@@ -177,12 +177,13 @@ class ReportActionsList extends React.Component {
                         // Make sure the oldest report action loaded is not the first. This is so we do not show the
                         // skeleton view above the created action in a newly generated optimistic chat or one with not
                         // that many comments.
+                        // We will show non-animating skeleton UI if we are offline and chat history is not loaded in ONYX.
                         const lastReportAction = _.last(this.props.sortedReportActions);
-                        if (this.props.report.isLoadingReportActions && lastReportAction.sequenceNumber > 0) {
+                        if ((this.props.report.isLoadingReportActions && lastReportAction.sequenceNumber > 0) || shouldShowNonAnimatingSkeleton) {
                             return (
                                 <ReportActionsSkeletonView
                                     containerHeight={this.state.skeletonViewHeight}
-                                    animate={!this.props.network.isOffline}
+                                    animate={!shouldShowNonAnimatingSkeleton}
                                 />
                             );
                         }
@@ -211,5 +212,4 @@ export default compose(
     withDrawerState,
     withWindowDimensions,
     withPersonalDetails(),
-    withNetwork(),
 )(ReportActionsList);

src/pages/home/report/ReportActionsView.js

@@ -270,7 +270,7 @@ class ReportActionsView extends React.Component {
 
     // If the report is optimistic (AKA not yet created) we don't need to call openReport again
     openReportIfNecessary() {
-        if (this.props.report.isOptimisticReport) {
+        if (this.props.report.isOptimisticReport || this.props.network.isOffline) {
             return;
         }
 
@@ -283,7 +283,7 @@ class ReportActionsView extends React.Component {
      */
     loadMoreChats() {
         // Only fetch more if we are not already fetching so that we don't initiate duplicate requests.
-        if (this.props.report.isLoadingMoreReportActions) {
+        if (this.props.report.isLoadingMoreReportActions || this.props.network.isOffline) {
             return;
         }
 
@@ -352,7 +352,7 @@ class ReportActionsView extends React.Component {
 
     render() {
         // Comments have not loaded at all yet do nothing
-        if (!_.size(this.props.reportActions)) {
+        if (!_.size(this.props.reportActions) && !this.props.network.isOffline) {
             return null;
         }