New skeleton loader for LHN

src/CONST.js

@@ -613,6 +613,7 @@ const CONST = {
             3: 100,
         },
     },
+    LHN_SKELETON_VIEW_ITEM_HEIGHT: 64,
     EXPENSIFY_PARTNER_NAME: 'expensify.com',
     EMAIL: {
         CONCIERGE: 'concierge@expensify.com',

src/components/LHNSkeletonView.js

@@ -0,0 +1,97 @@
+import React from 'react';
+import {View} from 'react-native';
+import PropTypes from 'prop-types';
+import {Rect, Circle} from 'react-native-svg';
+import SkeletonViewContentLoader from 'react-content-loader/native';
+import CONST from '../CONST';
+import themeColors from '../styles/themes/default';
+import styles from '../styles/styles';
+
+const propTypes = {
+    /** Whether to animate the skeleton view */
+    shouldAnimate: PropTypes.bool,
+};
+
+const defaultTypes = {
+    shouldAnimate: true,
+};
+
+class LHNSkeletonView extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            skeletonViewItems: [],
+        };
+    }
+
+    /**
+     * Generate the skeleton view items.
+     *
+     * @param {Number} numItems
+     */
+    generateSkeletonViewItems(numItems) {
+        if (this.state.skeletonViewItems.length === numItems) {
+            return;
+        }
+
+        if (this.state.skeletonViewItems.length > numItems) {
+            this.setState(prevState => ({
+                skeletonViewItems: prevState.skeletonViewItems.slice(0, numItems),
+            }));
+            return;
+        }
+
+        const skeletonViewItems = [];
+        for (let i = this.state.skeletonViewItems.length; i < numItems; i++) {
+            const step = i % 3;
+            let lineWidth;
+            switch (step) {
+                case 0:
+                    lineWidth = '100%';
+                    break;
+                case 1:
+                    lineWidth = '50%';
+                    break;
+                default:
+                    lineWidth = '25%';
+            }
+            skeletonViewItems.push(
+                <SkeletonViewContentLoader
+                    key={`skeletonViewItems${i}`}
+                    animate={this.props.shouldAnimate}
+                    height={CONST.LHN_SKELETON_VIEW_ITEM_HEIGHT}
+                    backgroundColor={themeColors.borderLighter}
+                    foregroundColor={themeColors.border}
+                    style={styles.mr5}
+                >
+                    <Circle cx="40" cy="32" r="20" />
+                    <Rect x="72" y="18" width="20%" height="8" />
+                    <Rect x="72" y="38" width={lineWidth} height="8" />
+                </SkeletonViewContentLoader>,
+            );
+        }
+
+        this.setState(prevState => ({
+            skeletonViewItems: [...prevState.skeletonViewItems, ...skeletonViewItems],
+        }));
+    }
+
+    render() {
+        return (
+            <View
+                style={styles.flex1}
+                onLayout={(event) => {
+                    const numItems = Math.ceil(event.nativeEvent.layout.height / CONST.LHN_SKELETON_VIEW_ITEM_HEIGHT);
+                    this.generateSkeletonViewItems(numItems);
+                }}
+            >
+                <View>{this.state.skeletonViewItems}</View>
+            </View>
+        );
+    }
+}
+
+LHNSkeletonView.propTypes = propTypes;
+LHNSkeletonView.defaultProps = defaultTypes;
+
+export default LHNSkeletonView;

src/components/ReportActionsSkeletonView/SkeletonViewLines.js

@@ -9,16 +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,
+    shouldAnimate: PropTypes.bool,
 };
 
 const defaultTypes = {
-    animate: true,
+    shouldAnimate: true,
 };
 
 const SkeletonViewLines = props => (
     <SkeletonViewContentLoader
-        animate={props.animate}
+        animate={props.shouldAnimate}
         height={CONST.CHAT_SKELETON_VIEW.HEIGHT_FOR_ROW_COUNT[props.numberOfRows]}
         backgroundColor={themeColors.highlightBG}
         foregroundColor={themeColors.border}

src/components/ReportActionsSkeletonView/index.js

@@ -8,11 +8,11 @@ const propTypes = {
     containerHeight: PropTypes.number.isRequired,
 
     /** Whether to animate the skeleton view */
-    animate: PropTypes.bool,
+    shouldAnimate: PropTypes.bool,
 };
 
 const defaultProps = {
-    animate: true,
+    shouldAnimate: true,
 };
 
 const ReportActionsSkeletonView = (props) => {
@@ -23,13 +23,13 @@ const ReportActionsSkeletonView = (props) => {
         const iconIndex = (index + 1) % 4;
         switch (iconIndex) {
             case 2:
-                skeletonViewLines.push(<SkeletonViewLines animate={props.animate} numberOfRows={2} key={`skeletonViewLines${index}`} />);
+                skeletonViewLines.push(<SkeletonViewLines shouldAnimate={props.shouldAnimate} numberOfRows={2} key={`skeletonViewLines${index}`} />);
                 break;
             case 0:
-                skeletonViewLines.push(<SkeletonViewLines animate={props.animate} numberOfRows={3} key={`skeletonViewLines${index}`} />);
+                skeletonViewLines.push(<SkeletonViewLines shouldAnimate={props.shouldAnimate} numberOfRows={3} key={`skeletonViewLines${index}`} />);
                 break;
             default:
-                skeletonViewLines.push(<SkeletonViewLines animate={props.animate} numberOfRows={1} key={`skeletonViewLines${index}`} />);
+                skeletonViewLines.push(<SkeletonViewLines shouldAnimate={props.shouldAnimate} numberOfRows={1} key={`skeletonViewLines${index}`} />);
         }
     }
     return <>{skeletonViewLines}</>;

src/components/ReportHeaderSkeletonView.js

@@ -12,24 +12,26 @@ import themeColors from '../styles/themes/default';
 
 const propTypes = {
     ...windowDimensionsPropTypes,
-    animate: PropTypes.bool,
+    shouldAnimate: PropTypes.bool,
 };
 
 const defaultProps = {
-    animate: true,
+    shouldAnimate: true,
 };
 
 const ReportHeaderSkeletonView = props => (
     <View style={[styles.appContentHeader]}>
         <View style={[styles.appContentHeaderTitle, !props.isSmallScreenWidth && styles.pl5]}>
-            <Pressable
-                onPress={() => {}}
-                style={[styles.LHNToggle]}
-            >
-                <Icon src={Expensicons.BackArrow} />
-            </Pressable>
+            {props.isSmallScreenWidth && (
+                <Pressable
+                    onPress={() => {}}
+                    style={[styles.LHNToggle]}
+                >
+                    <Icon src={Expensicons.BackArrow} />
+                </Pressable>
+            )}
             <SkeletonViewContentLoader
-                animate={props.animate}
+                animate={props.shouldAnimate}
                 width={styles.w100.width}
                 height={variables.contentHeaderHeight}
                 backgroundColor={themeColors.highlightBG}

src/libs/Navigation/AppNavigator/MainDrawerNavigator.js

@@ -4,7 +4,6 @@ import lodashGet from 'lodash/get';
 import {withOnyx} from 'react-native-onyx';
 import _ from 'underscore';
 
-import FullScreenLoadingIndicator from '../../../components/FullscreenLoadingIndicator';
 import ONYXKEYS from '../../../ONYXKEYS';
 import SCREENS from '../../../SCREENS';
 import Permissions from '../../Permissions';
@@ -17,6 +16,8 @@ import SidebarScreen from '../../../pages/home/sidebar/SidebarScreen';
 import BaseDrawerNavigator from './BaseDrawerNavigator';
 import * as ReportUtils from '../../ReportUtils';
 import reportPropTypes from '../../../pages/reportPropTypes';
+import Navigation from '../Navigation';
+import {withNavigationPropTypes} from '../../../components/withNavigation';
 
 const propTypes = {
     /** Available reports that would be displayed in this navigator */
@@ -39,6 +40,8 @@ const propTypes = {
             openOnAdminRoom: PropTypes.bool,
         }),
     }).isRequired,
+
+    ...withNavigationPropTypes,
 };
 
 const defaultProps = {
@@ -91,6 +94,14 @@ class MainDrawerNavigator extends Component {
             return false;
         }
 
+        // Update the report screen initial params after the reports are available
+        // to show the correct report instead of the "no access" report.
+        // https://github.com/Expensify/App/issues/12698#issuecomment-1352632883
+        if (!this.initialParams.reportID) {
+            const state = this.props.navigation.getState();
+            const reportScreenKey = lodashGet(state, 'routes[0].state.routes[0].key', '');
+            Navigation.setParams(initialNextParams, reportScreenKey);
+        }
         this.initialParams = initialNextParams;
         return true;
     }
@@ -105,14 +116,6 @@ class MainDrawerNavigator extends Component {
     }
 
     render() {
-        // Wait until reports are fetched and there is a reportID in initialParams
-        if (!this.initialParams.reportID) {
-            return <FullScreenLoadingIndicator />;
-        }
-
-        // After the app initializes and reports are available the home navigation is mounted
-        // This way routing information is updated (if needed) based on the initial report ID resolved.
-        // This is usually needed after login/create account and re-launches
         return (
             <BaseDrawerNavigator
                 drawerContent={({navigation, state}) => {

src/libs/Navigation/Navigation.js

@@ -186,6 +186,19 @@ function navigate(route = ROUTES.HOME) {
     linkTo(navigationRef.current, route);
 }
 
+/**
+ * Update route params for the specified route.
+ *
+ * @param {Object} params
+ * @param {String} routeKey
+ */
+function setParams(params, routeKey) {
+    navigationRef.current.dispatch({
+        ...CommonActions.setParams(params),
+        source: routeKey,
+    });
+}
+
 /**
  * Dismisses a screen presented modally and returns us back to the previous view.
  *
@@ -296,6 +309,7 @@ function setIsReportScreenIsReady() {
 export default {
     canNavigate,
     navigate,
+    setParams,
     dismissModal,
     isActiveRoute,
     getActiveRoute,