From a11ea8a3204f32d03b00f634fc637e5c6a542670 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hanno=20J=2E=20G=C3=B6decke?= Date: Tue, 22 Nov 2022 13:41:23 +0100 Subject: [PATCH 1/3] only animate when needed --- .../ReportActionsSkeletonView/SkeletonViewLines.js | 7 +++++++ src/components/ReportActionsSkeletonView/index.js | 14 +++++++++++--- src/components/ReportHeaderSkeletonView.js | 10 +++++++++- src/pages/home/ReportScreen.js | 10 +++++++--- 4 files changed, 34 insertions(+), 7 deletions(-) diff --git a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js index 5187592a57fbd..30e96d5784ddb 100644 --- a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js +++ b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js @@ -9,10 +9,16 @@ import styles from '../../styles/styles'; const propTypes = { /** Number of rows to show in Skeleton UI block */ numberOfRows: PropTypes.number.isRequired, + animate: PropTypes.bool, +}; + +const defaultTypes = { + animate: true, }; const SkeletonViewLines = props => ( ( SkeletonViewLines.displayName = 'SkeletonViewLines'; SkeletonViewLines.propTypes = propTypes; +SkeletonViewLines.defaultProps = defaultTypes; export default SkeletonViewLines; diff --git a/src/components/ReportActionsSkeletonView/index.js b/src/components/ReportActionsSkeletonView/index.js index 1062fd6654501..4f7055d989380 100644 --- a/src/components/ReportActionsSkeletonView/index.js +++ b/src/components/ReportActionsSkeletonView/index.js @@ -6,6 +6,13 @@ import CONST from '../../CONST'; const propTypes = { /** Height of the container component */ containerHeight: PropTypes.number.isRequired, + + /** Whether to animate the skeleton view */ + animate: PropTypes.bool, +}; + +const defaultProps = { + animate: true, }; const ReportActionsSkeletonView = (props) => { @@ -16,13 +23,13 @@ const ReportActionsSkeletonView = (props) => { const iconIndex = (index + 1) % 4; switch (iconIndex) { case 2: - skeletonViewLines.push(); + skeletonViewLines.push(); break; case 0: - skeletonViewLines.push(); + skeletonViewLines.push(); break; default: - skeletonViewLines.push(); + skeletonViewLines.push(); } } return <>{skeletonViewLines}; @@ -30,4 +37,5 @@ const ReportActionsSkeletonView = (props) => { ReportActionsSkeletonView.displayName = 'ReportActionsSkeletonView'; ReportActionsSkeletonView.propTypes = propTypes; +ReportActionsSkeletonView.defaultProps = defaultProps; export default ReportActionsSkeletonView; diff --git a/src/components/ReportHeaderSkeletonView.js b/src/components/ReportHeaderSkeletonView.js index fd7818573ffeb..6196fca054fde 100644 --- a/src/components/ReportHeaderSkeletonView.js +++ b/src/components/ReportHeaderSkeletonView.js @@ -2,6 +2,7 @@ import React from 'react'; import {Pressable, View} from 'react-native'; import {Rect, Circle} from 'react-native-svg'; import SkeletonViewContentLoader from 'react-content-loader/native'; +import PropTypes from 'prop-types'; import styles from '../styles/styles'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; @@ -11,6 +12,11 @@ import themeColors from '../styles/themes/default'; const propTypes = { ...windowDimensionsPropTypes, + animate: PropTypes.bool, +}; + +const defaultProps = { + animate: true, }; const ReportHeaderSkeletonView = props => ( @@ -23,8 +29,9 @@ const ReportHeaderSkeletonView = props => ( @@ -37,5 +44,6 @@ const ReportHeaderSkeletonView = props => ( ); ReportHeaderSkeletonView.propTypes = propTypes; +ReportHeaderSkeletonView.defaultProps = defaultProps; ReportHeaderSkeletonView.displayName = 'ReportHeaderSkeletonView'; export default withWindowDimensions(ReportHeaderSkeletonView); diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index 972dc0210f2b0..fdc5b1048da5e 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -216,15 +216,19 @@ class ReportScreen extends React.Component { // There are no reportActions at all to display and we are still in the process of loading the next set of actions. const isLoadingInitialReportActions = _.isEmpty(this.props.reportActions) && this.props.report.isLoadingReportActions; + + const freeze = this.props.isSmallScreenWidth && this.props.isDrawerOpen; + const animatePlaceholder = !this.props.isSmallScreenWidth || !this.props.isDrawerOpen; + return ( - - + + )} > From f28c2fa1e78f9ade220c06ef2363bec4639bbfa5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Hanno=20J=2E=20G=C3=B6decke?= Date: Tue, 22 Nov 2022 14:47:56 +0100 Subject: [PATCH 2/3] simplify --- src/pages/home/ReportScreen.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index fdc5b1048da5e..7eeb225178ee0 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -218,7 +218,7 @@ class ReportScreen extends React.Component { const isLoadingInitialReportActions = _.isEmpty(this.props.reportActions) && this.props.report.isLoadingReportActions; const freeze = this.props.isSmallScreenWidth && this.props.isDrawerOpen; - const animatePlaceholder = !this.props.isSmallScreenWidth || !this.props.isDrawerOpen; + const animatePlaceholder = !freeze; return ( Date: Tue, 22 Nov 2022 17:08:19 +0100 Subject: [PATCH 3/3] add code comments --- src/pages/home/ReportScreen.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index 7eeb225178ee0..fd2260a898b15 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -217,7 +217,11 @@ class ReportScreen extends React.Component { // There are no reportActions at all to display and we are still in the process of loading the next set of actions. const isLoadingInitialReportActions = _.isEmpty(this.props.reportActions) && this.props.report.isLoadingReportActions; + // When the ReportScreen is not open/in the viewport, we want to "freeze" it for performance reasons const freeze = this.props.isSmallScreenWidth && this.props.isDrawerOpen; + + // the moment the ReportScreen becomes unfrozen we want to start the animation of the placeholder skeleton content + // (which is shown, until all the actual views of the ReportScreen have been rendered) const animatePlaceholder = !freeze; return (