diff --git a/src/libs/actions/Timing.js b/src/libs/actions/Timing.js index 9dd385750d3e..4d1eae31a36f 100644 --- a/src/libs/actions/Timing.js +++ b/src/libs/actions/Timing.js @@ -17,11 +17,10 @@ function start(eventName) { * * @param {String} eventName - event name used as timestamp key * @param {String} [secondaryName] - optional secondary event name, passed to grafana - * @param {Number} [offset] - optional param to offset the time */ -function end(eventName, secondaryName = '', offset = 0) { +function end(eventName, secondaryName = '') { if (eventName in timestampData) { - const eventTime = Date.now() - timestampData[eventName] - offset; + const eventTime = Date.now() - timestampData[eventName]; const grafanaEventName = secondaryName ? `expensify.cash.${eventName}.${secondaryName}` : `expensify.cash.${eventName}`; diff --git a/src/pages/home/report/ReportActionItem.js b/src/pages/home/report/ReportActionItem.js index 5c0d8748ca17..2561f83b111c 100644 --- a/src/pages/home/report/ReportActionItem.js +++ b/src/pages/home/report/ReportActionItem.js @@ -55,9 +55,6 @@ const propTypes = { /** Draft message - if this is set the comment is in 'edit' mode */ draftMessage: PropTypes.string, - /** Runs when the view enclosing the chat message lays out indicating it has rendered */ - onLayout: PropTypes.func.isRequired, - ...withLocalizePropTypes, ...windowDimensionsPropTypes, }; @@ -289,7 +286,6 @@ class ReportActionItem extends Component { || this.state.isPopoverVisible || this.props.draftMessage, )} - onLayout={this.props.onLayout} > {!this.props.displayAsGroup ? ( diff --git a/src/pages/home/report/ReportActionsView.js b/src/pages/home/report/ReportActionsView.js index 270eb3ce5717..081327435eb9 100755 --- a/src/pages/home/report/ReportActionsView.js +++ b/src/pages/home/report/ReportActionsView.js @@ -87,15 +87,11 @@ class ReportActionsView extends React.Component { this.renderCell = this.renderCell.bind(this); this.scrollToListBottom = this.scrollToListBottom.bind(this); this.onVisibilityChange = this.onVisibilityChange.bind(this); + this.recordTimeToMeasureItemLayout = this.recordTimeToMeasureItemLayout.bind(this); this.loadMoreChats = this.loadMoreChats.bind(this); this.sortedReportActions = []; - // We are debouncing this call with a specific delay so that when all items in the list layout we can measure - // the total time it took to complete. - this.recordTimeToMeasureItemLayout = _.debounce( - this.recordTimeToMeasureItemLayout.bind(this), - CONST.TIMING.REPORT_ACTION_ITEM_LAYOUT_DEBOUNCE_TIME, - ); + this.didLayout = false; this.state = { isLoadingMoreChats: false, @@ -199,10 +195,6 @@ class ReportActionsView extends React.Component { this.keyboardEvent.remove(); } - // We must cancel the debounce function so that we do not call the function when switching to a new chat before - // the previous one has finished loading completely. - this.recordTimeToMeasureItemLayout.cancel(); - AppState.removeEventListener('change', this.onVisibilityChange); unsubscribeFromReportChannel(this.props.reportID); @@ -319,13 +311,15 @@ class ReportActionsView extends React.Component { } /** - * Runs each time a ReportActionItem is laid out. This method is debounced so we wait until the component has - * finished laying out items before recording the chat as switched. + * Runs when the FlatList finishes laying out */ recordTimeToMeasureItemLayout() { - // We are offsetting the time measurement here so that we can subtract our debounce time from the initial time - // and get the actual time it took to load the report - Timing.end(CONST.TIMING.SWITCH_REPORT, CONST.TIMING.COLD, CONST.TIMING.REPORT_ACTION_ITEM_LAYOUT_DEBOUNCE_TIME); + if (this.didLayout) { + return; + } + + this.didLayout = true; + Timing.end(CONST.TIMING.SWITCH_REPORT, CONST.TIMING.COLD); } /** @@ -374,7 +368,6 @@ class ReportActionsView extends React.Component { isMostRecentIOUReportAction={item.action.sequenceNumber === this.mostRecentIOUReportSequenceNumber} hasOutstandingIOU={this.props.report.hasOutstandingIOU} index={index} - onLayout={this.recordTimeToMeasureItemLayout} /> ); } @@ -415,6 +408,7 @@ class ReportActionsView extends React.Component { ? : null} keyboardShouldPersistTaps="handled" + onLayout={this.recordTimeToMeasureItemLayout} /> ); }