Merge pull request #4140 from Expensify/marcaaron-useOnLayout

Expensify · Jul 20, 2021 · 6ba320d · 6ba320d
2 parents b91a878 + 9afedd1
commit 6ba320d
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 23 deletions.
diff --git 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
@@ -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
@@ -88,15 +88,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,
@@ -206,10 +202,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);
@@ -326,13 +318,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);
     }
 
     /**
@@ -381,7 +375,6 @@ class ReportActionsView extends React.Component {
                 isMostRecentIOUReportAction={item.action.sequenceNumber === this.mostRecentIOUReportSequenceNumber}
                 hasOutstandingIOU={this.props.report.hasOutstandingIOU}
                 index={index}
-                onLayout={this.recordTimeToMeasureItemLayout}
             />
         );
     }
@@ -422,6 +415,7 @@ class ReportActionsView extends React.Component {
                     ? <ActivityIndicator size="small" color={themeColors.spinner} />
                     : null}
                 keyboardShouldPersistTaps="handled"
+                onLayout={this.recordTimeToMeasureItemLayout}
             />
         );
     }