From 8baa5d1cb60f6ae4ae83282e063351c20f47b46a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hanno=20J=2E=20G=C3=B6decke?= Date: Wed, 28 Jun 2023 20:05:54 +0200 Subject: [PATCH 1/2] Bail out early if cached height is the same --- src/pages/home/ReportScreen.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index 98c8a3014819..9e58bf21f1fa 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -315,7 +315,11 @@ class ReportScreen extends React.Component { nativeID={CONST.REPORT.DROP_NATIVE_ID + this.getNavigationKey()} style={[styles.flex1, styles.justifyContentEnd, styles.overflowHidden]} onLayout={(event) => { - const skeletonViewContainerHeight = event.nativeEvent.layout.height; + // Rounding this value for comparison because they can look like this: 411.9999694824219 + const skeletonViewContainerHeight = Math.round(event.nativeEvent.layout.height); + + // Only set state when the height changes to avoid unnecessary renders + if (reportActionsListViewHeight === skeletonViewContainerHeight) return; // The height can be 0 if the component unmounts - we are not interested in this value and want to know how much space it // takes up so we can set the skeleton view container height. From 3dff643c726c750ec3b439954135701678935cad Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hanno=20J=2E=20G=C3=B6decke?= Date: Tue, 11 Jul 2023 15:29:11 +0200 Subject: [PATCH 2/2] only apply first render fix when we don't know the content height yet --- src/pages/home/ReportScreen.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index c9029bf9f27b..69d9467567bd 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -134,6 +134,8 @@ class ReportScreen extends React.Component { isBannerVisible: true, }; this.firstRenderRef = React.createRef(); + this.firstRenderRef.current = reportActionsListViewHeight === 0; + this.flatListRef = React.createRef(); this.reactionListRef = React.createRef(); } @@ -244,8 +246,8 @@ class ReportScreen extends React.Component { const shouldHideReport = !ReportUtils.canAccessReport(this.props.report, this.props.policies, this.props.betas); - const isLoading = !reportID || !this.props.isSidebarLoaded || _.isEmpty(this.props.personalDetails) || !this.firstRenderRef.current; - this.firstRenderRef.current = true; + const isLoading = !reportID || !this.props.isSidebarLoaded || _.isEmpty(this.props.personalDetails) || this.firstRenderRef.current; + this.firstRenderRef.current = false; const parentReportAction = ReportActionsUtils.getParentReportAction(this.props.report); const isSingleTransactionView = ReportActionsUtils.isTransactionThread(parentReportAction);