diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js
index 15bb034251e..5a4e51722aa 100644
--- a/src/pages/home/report/ReportActionsList.js
+++ b/src/pages/home/report/ReportActionsList.js
@@ -1,6 +1,7 @@
import PropTypes from 'prop-types';
import React from 'react';
import {Animated} from 'react-native';
+import _ from 'underscore';
import InvertedFlatList from '../../../components/InvertedFlatList';
import withDrawerState, {withDrawerPropTypes} from '../../../components/withDrawerState';
import compose from '../../../libs/compose';
@@ -8,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 {withPersonalDetails} from '../../../components/OnyxProvider';
+import {withNetwork, withPersonalDetails} from '../../../components/OnyxProvider';
import ReportActionItem from './ReportActionItem';
import ReportActionsSkeletonView from '../../../components/ReportActionsSkeletonView';
import variables from '../../../styles/variables';
@@ -18,6 +19,7 @@ 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 */
@@ -47,6 +49,9 @@ const propTypes = {
/** Function to load more chats */
loadMoreChats: PropTypes.func.isRequired,
+ /** Information about the network */
+ network: networkPropTypes.isRequired,
+
...withDrawerPropTypes,
...windowDimensionsPropTypes,
};
@@ -65,6 +70,7 @@ class ReportActionsList extends React.Component {
this.state = {
fadeInAnimation: new Animated.Value(0),
+ skeletonViewHeight: 0,
};
}
@@ -159,15 +165,37 @@ class ReportActionsList extends React.Component {
initialNumToRender={this.calculateInitialNumToRender()}
onEndReached={this.props.loadMoreChats}
onEndReachedThreshold={0.75}
- ListFooterComponent={this.props.isLoadingMoreReportActions
- ? (
-
- )
- : null}
+ ListFooterComponent={() => {
+ if (this.props.report.isLoadingMoreReportActions) {
+ return (
+
+ );
+ }
+
+ // 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.
+ const lastReportAction = _.last(this.props.sortedReportActions);
+ if (this.props.report.isLoadingReportActions && lastReportAction.sequenceNumber > 0) {
+ return (
+
+ );
+ }
+
+ return null;
+ }}
keyboardShouldPersistTaps="handled"
- onLayout={this.props.onLayout}
+ onLayout={(event) => {
+ this.setState({
+ skeletonViewHeight: event.nativeEvent.layout.height,
+ });
+ this.props.onLayout(event);
+ }}
onScroll={this.props.onScroll}
extraData={extraData}
/>
@@ -183,4 +211,5 @@ export default compose(
withDrawerState,
withWindowDimensions,
withPersonalDetails(),
+ withNetwork(),
)(ReportActionsList);
diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js
index 66be08ef875..2de35be8b5c 100755
--- a/src/pages/home/report/ReportActionsView.js
+++ b/src/pages/home/report/ReportActionsView.js
@@ -143,6 +143,10 @@ class ReportActionsView extends React.Component {
return true;
}
+ if (nextProps.report.isLoadingReportActions !== this.props.report.isLoadingReportActions) {
+ return true;
+ }
+
if (nextProps.report.lastReadSequenceNumber !== this.props.report.lastReadSequenceNumber) {
return true;
}