fix: #12885 - Homescreen not running at 60 FPS on mobile

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 => (
     <SkeletonViewContentLoader
+        animate={props.animate}
         height={CONST.CHAT_SKELETON_VIEW.HEIGHT_FOR_ROW_COUNT[props.numberOfRows]}
         backgroundColor={themeColors.highlightBG}
         foregroundColor={themeColors.border}
@@ -28,4 +34,5 @@ const SkeletonViewLines = props => (
 
 SkeletonViewLines.displayName = 'SkeletonViewLines';
 SkeletonViewLines.propTypes = propTypes;
+SkeletonViewLines.defaultProps = defaultTypes;
 export default SkeletonViewLines;

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,18 +23,19 @@ const ReportActionsSkeletonView = (props) => {
         const iconIndex = (index + 1) % 4;
         switch (iconIndex) {
             case 2:
-                skeletonViewLines.push(<SkeletonViewLines numberOfRows={2} key={`skeletonViewLines${index}`} />);
+                skeletonViewLines.push(<SkeletonViewLines animate={props.animate} numberOfRows={2} key={`skeletonViewLines${index}`} />);
                 break;
             case 0:
-                skeletonViewLines.push(<SkeletonViewLines numberOfRows={3} key={`skeletonViewLines${index}`} />);
+                skeletonViewLines.push(<SkeletonViewLines animate={props.animate} numberOfRows={3} key={`skeletonViewLines${index}`} />);
                 break;
             default:
-                skeletonViewLines.push(<SkeletonViewLines numberOfRows={1} key={`skeletonViewLines${index}`} />);
+                skeletonViewLines.push(<SkeletonViewLines animate={props.animate} numberOfRows={1} key={`skeletonViewLines${index}`} />);
         }
     }
     return <>{skeletonViewLines}</>;
 };
 
 ReportActionsSkeletonView.displayName = 'ReportActionsSkeletonView';
 ReportActionsSkeletonView.propTypes = propTypes;
+ReportActionsSkeletonView.defaultProps = defaultProps;
 export default ReportActionsSkeletonView;

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 => (
                 <Icon src={Expensicons.BackArrow} />
             </Pressable>
             <SkeletonViewContentLoader
-                height={variables.contentHeaderHeight}
+                animate={props.animate}
                 width={styles.w100.width}
+                height={variables.contentHeaderHeight}
                 backgroundColor={themeColors.highlightBG}
                 foregroundColor={themeColors.border}
             >
@@ -37,5 +44,6 @@ const ReportHeaderSkeletonView = props => (
 );
 
 ReportHeaderSkeletonView.propTypes = propTypes;
+ReportHeaderSkeletonView.defaultProps = defaultProps;
 ReportHeaderSkeletonView.displayName = 'ReportHeaderSkeletonView';
 export default withWindowDimensions(ReportHeaderSkeletonView);

src/pages/home/ReportScreen.js

@@ -216,15 +216,23 @@ 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 (
             <Freeze
-                freeze={this.props.isSmallScreenWidth && this.props.isDrawerOpen}
+                freeze={freeze}
                 placeholder={(
                     <ScreenWrapper
                         style={screenWrapperStyle}
                     >
-                        <ReportHeaderSkeletonView />
-                        <ReportActionsSkeletonView containerHeight={this.state.skeletonViewContainerHeight} />
+                        <ReportHeaderSkeletonView animate={animatePlaceholder} />
+                        <ReportActionsSkeletonView animate={animatePlaceholder} containerHeight={this.state.skeletonViewContainerHeight} />
                     </ScreenWrapper>
                 )}
             >