From 41258f4f0af1391809bb34a682eb57d7f1a155ca Mon Sep 17 00:00:00 2001 From: Yuwen Memon Date: Tue, 13 Dec 2022 16:39:34 -0800 Subject: [PATCH 1/4] Make skeleton list footer dynamic based report action list height --- src/pages/home/report/ReportActionsList.js | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js index 15bb034251e..28e87ca54d4 100644 --- a/src/pages/home/report/ReportActionsList.js +++ b/src/pages/home/report/ReportActionsList.js @@ -65,6 +65,7 @@ class ReportActionsList extends React.Component { this.state = { fadeInAnimation: new Animated.Value(0), + skeletonViewHeight: 0, }; } @@ -159,7 +160,7 @@ class ReportActionsList extends React.Component { initialNumToRender={this.calculateInitialNumToRender()} onEndReached={this.props.loadMoreChats} onEndReachedThreshold={0.75} - ListFooterComponent={this.props.isLoadingMoreReportActions + ListFooterComponent={this.props.report.isLoadingReportActions ? ( { + console.log("InvertedFlatList event.nativeEvent.layout.height: " + event.nativeEvent.layout.height); + this.setState({ + skeletonViewHeight: event.nativeEvent.layout.height + }) + this.props.onLayout(event); + }} onScroll={this.props.onScroll} extraData={extraData} /> From 95f73c0cd3f95abf015893ac46d621091b5c3304 Mon Sep 17 00:00:00 2001 From: Yuwen Memon Date: Tue, 13 Dec 2022 18:15:57 -0800 Subject: [PATCH 2/4] Make sure the skeleton renders properly and only when it needs to --- src/pages/home/report/ReportActionsList.js | 33 +++++++++++++++------- src/pages/home/report/ReportActionsView.js | 4 +++ 2 files changed, 27 insertions(+), 10 deletions(-) diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js index 28e87ca54d4..676c7a13e4d 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'; @@ -160,19 +161,31 @@ class ReportActionsList extends React.Component { initialNumToRender={this.calculateInitialNumToRender()} onEndReached={this.props.loadMoreChats} onEndReachedThreshold={0.75} - ListFooterComponent={this.props.report.isLoadingReportActions - ? ( - - ) - : null} + ListFooterComponent={() => { + if (this.props.report.isLoadingMoreReportActions) { + return ( + + ); + } + + const lastReportAction = _.last(this.props.sortedReportActions); + if (this.props.report.isLoadingReportActions && lastReportAction.sequenceNumber > 0) { + return ( + + ); + } + + return null; + }} keyboardShouldPersistTaps="handled" onLayout={(event) => { - console.log("InvertedFlatList event.nativeEvent.layout.height: " + event.nativeEvent.layout.height); this.setState({ - skeletonViewHeight: event.nativeEvent.layout.height - }) + skeletonViewHeight: event.nativeEvent.layout.height, + }); this.props.onLayout(event); }} onScroll={this.props.onScroll} 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; } From 677745a26ca9321b1018747d670c9c2d0f280b9a Mon Sep 17 00:00:00 2001 From: Yuwen Memon Date: Wed, 14 Dec 2022 11:29:25 -0800 Subject: [PATCH 3/4] Make sure we don't animate if we're offline --- src/pages/home/report/ReportActionsList.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js index 676c7a13e4d..252b890d0d2 100644 --- a/src/pages/home/report/ReportActionsList.js +++ b/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 {withPersonalDetails} from '../../../components/OnyxProvider'; +import {withNetwork, withPersonalDetails} from '../../../components/OnyxProvider'; import ReportActionItem from './ReportActionItem'; import ReportActionsSkeletonView from '../../../components/ReportActionsSkeletonView'; import variables from '../../../styles/variables'; @@ -19,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 */ @@ -48,6 +49,9 @@ const propTypes = { /** Function to load more chats */ loadMoreChats: PropTypes.func.isRequired, + /** Information about the network */ + network: networkPropTypes.isRequired, + ...withDrawerPropTypes, ...windowDimensionsPropTypes, }; @@ -175,6 +179,7 @@ class ReportActionsList extends React.Component { return ( ); } @@ -203,4 +208,5 @@ export default compose( withDrawerState, withWindowDimensions, withPersonalDetails(), + withNetwork(), )(ReportActionsList); From 2ac451f5cfc142780abc9b7db2a48fd38f3015b4 Mon Sep 17 00:00:00 2001 From: Yuwen Memon Date: Thu, 15 Dec 2022 10:07:00 -0800 Subject: [PATCH 4/4] Add comment --- src/pages/home/report/ReportActionsList.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/pages/home/report/ReportActionsList.js b/src/pages/home/report/ReportActionsList.js index 252b890d0d2..5a4e51722aa 100644 --- a/src/pages/home/report/ReportActionsList.js +++ b/src/pages/home/report/ReportActionsList.js @@ -174,6 +174,9 @@ 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. const lastReportAction = _.last(this.props.sortedReportActions); if (this.props.report.isLoadingReportActions && lastReportAction.sequenceNumber > 0) { return (