From 0c38b1bde78a1686e8775a05861367a289b65b9b Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Fri, 20 Jan 2023 19:30:58 -0800 Subject: [PATCH 01/26] show skeleton instead of activity indicator while loading the app --- src/CONST.js | 1 + .../LHNOptionsList/LHNOptionsList.js | 37 +++++----- src/components/LHNSkeletonView.js | 60 +++++++++++++++ .../AppNavigator/MainDrawerNavigator.js | 13 +--- src/libs/Navigation/Navigation.js | 12 ++- src/pages/home/ReportScreen.js | 62 ++++++++-------- src/pages/home/report/ReportActionCompose.js | 5 -- src/pages/home/sidebar/SidebarLinks.js | 73 +++++++++++++------ src/styles/colors.js | 1 + src/styles/themes/default.js | 1 + 10 files changed, 179 insertions(+), 86 deletions(-) create mode 100644 src/components/LHNSkeletonView.js diff --git a/src/CONST.js b/src/CONST.js index 9c05e4d716aa..f94a3f9291be 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -522,6 +522,7 @@ const CONST = { 3: 100, }, }, + LHN_SKELETON_VIEW_HEIGHT: 64, EXPENSIFY_PARTNER_NAME: 'expensify.com', EMAIL: { CONCIERGE: 'concierge@expensify.com', diff --git a/src/components/LHNOptionsList/LHNOptionsList.js b/src/components/LHNOptionsList/LHNOptionsList.js index c8bad6668426..e85ea271c77a 100644 --- a/src/components/LHNOptionsList/LHNOptionsList.js +++ b/src/components/LHNOptionsList/LHNOptionsList.js @@ -1,8 +1,7 @@ import _ from 'underscore'; import React, {Component} from 'react'; -import {View, FlatList} from 'react-native'; +import {FlatList} from 'react-native'; import PropTypes from 'prop-types'; -import styles from '../../styles/styles'; import OptionRowLHN from './OptionRowLHN'; import variables from '../../styles/variables'; import CONST from '../../CONST'; @@ -84,24 +83,22 @@ class LHNOptionsList extends Component { render() { return ( - - item} - stickySectionHeadersEnabled={false} - renderItem={this.renderItem} - getItemLayout={this.getItemLayout} - extraData={this.props.focusedIndex} - initialNumToRender={5} - maxToRenderPerBatch={5} - windowSize={5} - onLayout={this.props.onLayout} - /> - + item} + stickySectionHeadersEnabled={false} + renderItem={this.renderItem} + getItemLayout={this.getItemLayout} + extraData={this.props.focusedIndex} + initialNumToRender={5} + maxToRenderPerBatch={5} + windowSize={5} + onLayout={this.props.onLayout} + /> ); } } diff --git a/src/components/LHNSkeletonView.js b/src/components/LHNSkeletonView.js new file mode 100644 index 000000000000..5afca7400b3e --- /dev/null +++ b/src/components/LHNSkeletonView.js @@ -0,0 +1,60 @@ +import React from 'react'; +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 = { + /** Height of the container component */ + containerHeight: PropTypes.number.isRequired, + + /** Whether to animate the skeleton view */ + animate: PropTypes.bool, +}; + +const defaultTypes = { + animate: true, +}; + +const LHNSkeletonView = props => { + const skeletonHeight = CONST.LHN_SKELETON_VIEW_HEIGHT; + const possibleVisibleContentItems = Math.round(props.containerHeight / skeletonHeight); + const skeletonViewLines = []; + + for (let index = 0; index < possibleVisibleContentItems; index++) { + const lengthIndex = index % 3; + let lineWidth; + switch (lengthIndex) { + case 0: + lineWidth = "100%"; + break; + case 1: + lineWidth = "50%"; + break; + default: + lineWidth = "65%"; + } + skeletonViewLines.push( + + + + + + ) + } + return <>{skeletonViewLines}; +}; + +LHNSkeletonView.displayName = 'LHNSkeletonView'; +LHNSkeletonView.propTypes = propTypes; +LHNSkeletonView.defaultProps = defaultTypes; +export default LHNSkeletonView; diff --git a/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js b/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js index ecc67769e8b8..ac3b0637b1bb 100644 --- a/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js +++ b/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js @@ -3,7 +3,6 @@ import PropTypes from 'prop-types'; import lodashGet from 'lodash/get'; import {withOnyx} from 'react-native-onyx'; -import FullScreenLoadingIndicator from '../../../components/FullscreenLoadingIndicator'; import ONYXKEYS from '../../../ONYXKEYS'; import SCREENS from '../../../SCREENS'; import Permissions from '../../Permissions'; @@ -14,6 +13,7 @@ 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'; const propTypes = { /** Available reports that would be displayed in this navigator */ @@ -66,19 +66,14 @@ class MainDrawerNavigator extends Component { return false; } + if (!this.initialParams.reportID) { + Navigation.setParams(initialNextParams); + } this.initialParams = initialNextParams; return true; } render() { - // Wait until reports are fetched and there is a reportID in initialParams - if (!this.initialParams.reportID) { - return ; - } - - // 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 ( { diff --git a/src/libs/Navigation/Navigation.js b/src/libs/Navigation/Navigation.js index e937e501597a..1090063d3c7e 100644 --- a/src/libs/Navigation/Navigation.js +++ b/src/libs/Navigation/Navigation.js @@ -1,7 +1,7 @@ import _ from 'underscore'; import lodashGet from 'lodash/get'; import {Keyboard} from 'react-native'; -import {DrawerActions, getPathFromState, StackActions} from '@react-navigation/native'; +import {DrawerActions, getPathFromState, StackActions, CommonActions} from '@react-navigation/native'; import Onyx from 'react-native-onyx'; import Log from '../Log'; import linkTo from './linkTo'; @@ -160,6 +160,15 @@ function navigate(route = ROUTES.HOME) { linkTo(navigationRef.current, route); } +/** + * Update route params for the currently focused route. + * + * @param {Object} params + */ +function setParams(params) { + navigationRef.current.dispatch(CommonActions.setParams(params)); +} + /** * Dismisses a screen presented modally and returns us back to the previous view. * @@ -256,6 +265,7 @@ function setIsDrawerReady() { export default { canNavigate, navigate, + setParams, dismissModal, isActiveRoute, getActiveRoute, diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index 5b665c525b38..010efff80401 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -156,7 +156,7 @@ class ReportScreen extends React.Component { // This is necessary so that when we are retrieving the next report data from Onyx the ReportActionsView will remount completely const isTransitioning = this.props.report && this.props.report.reportID !== reportIDFromPath; - return reportIDFromPath && this.props.report.reportID && !isTransitioning; + return reportIDFromPath !== '' && this.props.report.reportID && !isTransitioning; } fetchReportIfNeeded() { @@ -189,10 +189,6 @@ class ReportScreen extends React.Component { } render() { - if (!this.props.isSidebarLoaded || _.isEmpty(this.props.personalDetails)) { - return null; - } - // We create policy rooms for all policies, however we don't show them unless // - It's a free plan workspace // - The report includes guides participants (@team.expensify.com) for 1:1 Assigned @@ -223,6 +219,8 @@ class ReportScreen extends React.Component { // 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; + const isLoading = !reportID || !this.props.isSidebarLoaded || _.isEmpty(this.props.personalDetails) || isLoadingInitialReportActions; + // 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; @@ -244,7 +242,7 @@ class ReportScreen extends React.Component { )} > - - Navigation.navigate(ROUTES.HOME)} - personalDetails={this.props.personalDetails} - report={this.props.report} - policies={this.props.policies} - /> - - {this.props.accountManagerReportID && ReportUtils.isConciergeChatReport(this.props.report) && this.state.isBannerVisible && ( - + {(isLoading && !isLoadingInitialReportActions) ? : ( + <> + + Navigation.navigate(ROUTES.HOME)} + personalDetails={this.props.personalDetails} + report={this.props.report} + policies={this.props.policies} + /> + + {this.props.accountManagerReportID && ReportUtils.isConciergeChatReport(this.props.report) && this.state.isBannerVisible && ( + + )} + )} - {(this.isReportReadyForDisplay() && !isLoadingInitialReportActions) && ( + {(this.isReportReadyForDisplay() && !isLoading) && ( <> diff --git a/src/pages/home/report/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose.js index f88ea64b4fc4..b2de79669869 100644 --- a/src/pages/home/report/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose.js @@ -514,11 +514,6 @@ class ReportActionCompose extends React.Component { } render() { - // Waiting until ONYX variables are loaded before displaying the component - if (_.isEmpty(this.props.personalDetails)) { - return null; - } - const reportParticipants = _.without(lodashGet(this.props.report, 'participants', []), this.props.currentUserPersonalDetails.login); const participantsWithoutExpensifyEmails = _.difference(reportParticipants, CONST.EXPENSIFY_EMAILS); const reportRecipient = this.props.personalDetails[participantsWithoutExpensifyEmails[0]]; diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index fe2813db03eb..9618ab7f6b91 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -29,6 +29,7 @@ import LHNOptionsList from '../../../components/LHNOptionsList/LHNOptionsList'; import SidebarUtils from '../../../libs/SidebarUtils'; import reportPropTypes from '../../reportPropTypes'; import OfflineWithFeedback from '../../../components/OfflineWithFeedback'; +import LHNSkeletonView from '../../../components/LHNSkeletonView'; const propTypes = { /** Toggles the navigation menu open and closed */ @@ -81,6 +82,9 @@ const defaultProps = { priorityMode: CONST.PRIORITY_MODE.DEFAULT, }; +// Keep a reference to the screen height so we can use it when a new SidebarLinks component mounts +let lhnListHeight = 0; + class SidebarLinks extends React.Component { constructor(props) { super(props); @@ -88,6 +92,10 @@ class SidebarLinks extends React.Component { this.showSearchPage = this.showSearchPage.bind(this); this.showSettingsPage = this.showSettingsPage.bind(this); this.showReportPage = this.showReportPage.bind(this); + + this.state = { + skeletonViewContainerHeight: lhnListHeight, + } } showSearchPage() { @@ -122,11 +130,13 @@ class SidebarLinks extends React.Component { } render() { - // Wait until the personalDetails are actually loaded before displaying the LHN - if (_.isEmpty(this.props.personalDetails)) { - return null; - } + const isLoading = _.isEmpty(this.props.personalDetails) || _.isEmpty(this.props.chatReports); + const freeze = this.props.isSmallScreenWidth && !this.props.isDrawerOpen && this.isSidebarLoaded; + const animatePlaceholder = !freeze; const optionListItems = SidebarUtils.getOrderedReportIDs(this.props.reportIDFromRoute); + + const skeletonPlaceholder = ; + return ( @@ -164,6 +175,7 @@ class SidebarLinks extends React.Component { accessibilityLabel={this.props.translate('sidebarScreen.buttonMySettings')} accessibilityRole="button" onPress={this.showSettingsPage} + disabled={isLoading} > - - option.toString() === this.props.reportIDFromRoute - ))} - onSelectRow={this.showReportPage} - shouldDisableFocusOptions={this.props.isSmallScreenWidth} - optionMode={this.props.priorityMode === CONST.PRIORITY_MODE.GSD ? 'compact' : 'default'} - onLayout={() => { - App.setSidebarLoaded(); - this.isSidebarLoaded = true; + + { + const skeletonViewContainerHeight = event.nativeEvent.layout.height; + + // 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. + if (skeletonViewContainerHeight === 0) { + return; + } + lhnListHeight = skeletonViewContainerHeight; + this.setState({skeletonViewContainerHeight}); }} - /> + > + {isLoading ? skeletonPlaceholder : ( + option.toString() === this.props.reportIDFromRoute + ))} + onSelectRow={this.showReportPage} + shouldDisableFocusOptions={this.props.isSmallScreenWidth} + optionMode={this.props.priorityMode === CONST.PRIORITY_MODE.GSD ? CONST.OPTION_MODE.COMPACT : CONST.OPTION_MODE.DEFAULT} + onLayout={() => { + App.setSidebarLoaded(); + this.isSidebarLoaded = true; + }} + /> + )} + ); diff --git a/src/styles/colors.js b/src/styles/colors.js index 7af4003a67f6..2d6d469e5181 100644 --- a/src/styles/colors.js +++ b/src/styles/colors.js @@ -24,6 +24,7 @@ export default { greenAppBackground: '#061B09', greenHighlightBackground: '#07271F', greenBorders: '#1A3D32', + greenBordersLighter: '#2B5548', greenIcons: '#8B9C8F', greenSupportingText: '#AFBBB0', white: '#E7ECE9', diff --git a/src/styles/themes/default.js b/src/styles/themes/default.js index 823f58c598ce..75f470324118 100644 --- a/src/styles/themes/default.js +++ b/src/styles/themes/default.js @@ -6,6 +6,7 @@ const darkTheme = { appBG: colors.greenAppBackground, highlightBG: colors.greenHighlightBackground, border: colors.greenBorders, + borderLighter: colors.greenBordersLighter, borderFocus: colors.green, icon: colors.greenIcons, iconMenu: colors.green, From a430364df32f860900eb8e30e30c44b86b32c812 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Fri, 20 Jan 2023 19:31:17 -0800 Subject: [PATCH 02/26] only show back button on small screen --- src/components/ReportHeaderSkeletonView.js | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/ReportHeaderSkeletonView.js b/src/components/ReportHeaderSkeletonView.js index 6196fca054fd..fc303aad46db 100644 --- a/src/components/ReportHeaderSkeletonView.js +++ b/src/components/ReportHeaderSkeletonView.js @@ -22,12 +22,14 @@ const defaultProps = { const ReportHeaderSkeletonView = props => ( - {}} - style={[styles.LHNToggle]} - > - - + {props.isSmallScreenWidth && ( + {}} + style={[styles.LHNToggle]} + > + + + )} Date: Fri, 20 Jan 2023 20:21:18 -0800 Subject: [PATCH 03/26] move around the loading state --- src/pages/home/ReportScreen.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index 010efff80401..7f2b33438704 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -219,7 +219,7 @@ class ReportScreen extends React.Component { // 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; - const isLoading = !reportID || !this.props.isSidebarLoaded || _.isEmpty(this.props.personalDetails) || isLoadingInitialReportActions; + const isLoading = !reportID || !this.props.isSidebarLoaded || _.isEmpty(this.props.personalDetails); // 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) @@ -250,7 +250,7 @@ class ReportScreen extends React.Component { Navigation.navigate(ROUTES.HOME); }} > - {(isLoading && !isLoadingInitialReportActions) ? : ( + {isLoading ? : ( <> - {(this.isReportReadyForDisplay() && !isLoading) && ( + {(this.isReportReadyForDisplay() && !isLoadingInitialReportActions && !isLoading) && ( <> From 5a93cecd400f3258d6011707ca62a4c21462c419 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Fri, 20 Jan 2023 20:52:37 -0800 Subject: [PATCH 04/26] fix lint --- src/components/LHNSkeletonView.js | 10 +++++----- src/libs/Navigation/Navigation.js | 8 +++++--- src/pages/home/sidebar/SidebarLinks.js | 11 ++++++----- 3 files changed, 16 insertions(+), 13 deletions(-) diff --git a/src/components/LHNSkeletonView.js b/src/components/LHNSkeletonView.js index 5afca7400b3e..ec8b02d71a6b 100644 --- a/src/components/LHNSkeletonView.js +++ b/src/components/LHNSkeletonView.js @@ -18,7 +18,7 @@ const defaultTypes = { animate: true, }; -const LHNSkeletonView = props => { +const LHNSkeletonView = (props) => { const skeletonHeight = CONST.LHN_SKELETON_VIEW_HEIGHT; const possibleVisibleContentItems = Math.round(props.containerHeight / skeletonHeight); const skeletonViewLines = []; @@ -28,13 +28,13 @@ const LHNSkeletonView = props => { let lineWidth; switch (lengthIndex) { case 0: - lineWidth = "100%"; + lineWidth = '100%'; break; case 1: - lineWidth = "50%"; + lineWidth = '50%'; break; default: - lineWidth = "65%"; + lineWidth = '65%'; } skeletonViewLines.push( { - ) + ); } return <>{skeletonViewLines}; }; diff --git a/src/libs/Navigation/Navigation.js b/src/libs/Navigation/Navigation.js index 1090063d3c7e..bf178189a981 100644 --- a/src/libs/Navigation/Navigation.js +++ b/src/libs/Navigation/Navigation.js @@ -1,7 +1,9 @@ import _ from 'underscore'; import lodashGet from 'lodash/get'; import {Keyboard} from 'react-native'; -import {DrawerActions, getPathFromState, StackActions, CommonActions} from '@react-navigation/native'; +import { + DrawerActions, getPathFromState, StackActions, CommonActions, +} from '@react-navigation/native'; import Onyx from 'react-native-onyx'; import Log from '../Log'; import linkTo from './linkTo'; @@ -162,8 +164,8 @@ function navigate(route = ROUTES.HOME) { /** * Update route params for the currently focused route. - * - * @param {Object} params + * + * @param {Object} params */ function setParams(params) { navigationRef.current.dispatch(CommonActions.setParams(params)); diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index 9618ab7f6b91..d20b17e091bd 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -95,7 +95,7 @@ class SidebarLinks extends React.Component { this.state = { skeletonViewContainerHeight: lhnListHeight, - } + }; } showSearchPage() { @@ -136,7 +136,7 @@ class SidebarLinks extends React.Component { const optionListItems = SidebarUtils.getOrderedReportIDs(this.props.reportIDFromRoute); const skeletonPlaceholder = ; - + return ( - + placeholder={skeletonPlaceholder} + > { const skeletonViewContainerHeight = event.nativeEvent.layout.height; - + // 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. if (skeletonViewContainerHeight === 0) { From 3574120e9282020f38d64d6233d2f56023022a0a Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Fri, 20 Jan 2023 22:21:36 -0800 Subject: [PATCH 05/26] fix lint --- src/components/LHNSkeletonView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/LHNSkeletonView.js b/src/components/LHNSkeletonView.js index ec8b02d71a6b..0e930e9eedcd 100644 --- a/src/components/LHNSkeletonView.js +++ b/src/components/LHNSkeletonView.js @@ -48,7 +48,7 @@ const LHNSkeletonView = (props) => { - + , ); } return <>{skeletonViewLines}; From 60011ae6948a01330d75b2f28cfda8d3836d73d6 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Sat, 21 Jan 2023 17:07:19 -0800 Subject: [PATCH 06/26] update skeleton line position --- src/components/LHNSkeletonView.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/LHNSkeletonView.js b/src/components/LHNSkeletonView.js index 0e930e9eedcd..2eaa3a36c0ae 100644 --- a/src/components/LHNSkeletonView.js +++ b/src/components/LHNSkeletonView.js @@ -46,8 +46,8 @@ const LHNSkeletonView = (props) => { style={styles.mr5} > - - + + , ); } From f2f5c25b29d40b1f2628c50bc06b14ef934938a1 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Sun, 22 Jan 2023 20:35:27 -0800 Subject: [PATCH 07/26] set the params to the specific route --- .../Navigation/AppNavigator/MainDrawerNavigator.js | 4 +++- src/libs/Navigation/Navigation.js | 10 +++++++--- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js b/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js index ac3b0637b1bb..9752c1ca493b 100644 --- a/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js +++ b/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js @@ -67,7 +67,9 @@ class MainDrawerNavigator extends Component { } if (!this.initialParams.reportID) { - Navigation.setParams(initialNextParams); + 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; diff --git a/src/libs/Navigation/Navigation.js b/src/libs/Navigation/Navigation.js index bf178189a981..3635a78402f5 100644 --- a/src/libs/Navigation/Navigation.js +++ b/src/libs/Navigation/Navigation.js @@ -163,12 +163,16 @@ function navigate(route = ROUTES.HOME) { } /** - * Update route params for the currently focused route. + * Update route params for the specified route. * * @param {Object} params + * @param {String} routeKey */ -function setParams(params) { - navigationRef.current.dispatch(CommonActions.setParams(params)); +function setParams(params, routeKey) { + navigationRef.current.dispatch({ + ...CommonActions.setParams(params), + source: routeKey, + }); } /** From 27c99ef044e49832fef8729a099cd17ba5919602 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Sun, 22 Jan 2023 20:55:52 -0800 Subject: [PATCH 08/26] fix lint --- src/libs/Navigation/AppNavigator/MainDrawerNavigator.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js b/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js index 9752c1ca493b..cffd83a6d142 100644 --- a/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js +++ b/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js @@ -14,6 +14,7 @@ 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 */ @@ -30,6 +31,8 @@ const propTypes = { /** The type of the policy */ type: PropTypes.string, })), + + ...withNavigationPropTypes, }; const defaultProps = { From efbfd4db9c9269c28698d75575717cfad1951b74 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Mon, 23 Jan 2023 19:55:49 -0800 Subject: [PATCH 09/26] undisable header buttons --- src/pages/home/sidebar/SidebarLinks.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index d20b17e091bd..7c0022815af0 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -166,7 +166,6 @@ class SidebarLinks extends React.Component { accessibilityRole="button" style={[styles.flexRow, styles.ph5]} onPress={this.showSearchPage} - disabled={isLoading} > @@ -175,7 +174,6 @@ class SidebarLinks extends React.Component { accessibilityLabel={this.props.translate('sidebarScreen.buttonMySettings')} accessibilityRole="button" onPress={this.showSettingsPage} - disabled={isLoading} > Date: Thu, 26 Jan 2023 02:46:13 -0800 Subject: [PATCH 10/26] hide new workspace menu while loading --- .../sidebar/SidebarScreen/FloatingActionButtonAndPopover.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js index 6fe0447ef495..4520dda297ed 100644 --- a/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js +++ b/src/pages/home/sidebar/SidebarScreen/FloatingActionButtonAndPopover.js @@ -207,7 +207,7 @@ class FloatingActionButtonAndPopover extends React.Component { onSelected: () => Navigation.navigate(ROUTES.IOU_BILL), }, ] : []), - ...(!Policy.hasActiveFreePolicy(this.props.allPolicies) ? [ + ...(!this.props.isLoading && !Policy.hasActiveFreePolicy(this.props.allPolicies) ? [ { icon: Expensicons.NewWorkspace, iconWidth: 46, @@ -247,5 +247,8 @@ export default compose( betas: { key: ONYXKEYS.BETAS, }, + isLoading: { + key: ONYXKEYS.IS_LOADING_REPORT_DATA, + }, }), )(FloatingActionButtonAndPopover); From 5fc592166fdc78f0dc925ca8b695450234fa4613 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 26 Jan 2023 08:49:41 -0800 Subject: [PATCH 11/26] add animation for popover menu item --- src/components/PopoverMenu/index.js | 23 +++++++++++++---------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/src/components/PopoverMenu/index.js b/src/components/PopoverMenu/index.js index 0dabaa332417..a1d63e79c5c5 100644 --- a/src/components/PopoverMenu/index.js +++ b/src/components/PopoverMenu/index.js @@ -1,6 +1,7 @@ import _ from 'underscore'; import React, {PureComponent} from 'react'; import {View} from 'react-native'; +import Animated, {FadeIn} from 'react-native-reanimated'; import Popover from '../Popover'; import styles from '../../styles/styles'; import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions'; @@ -112,16 +113,18 @@ class PopoverMenu extends PureComponent { onFocusedIndexChanged={index => this.setState({focusedIndex: index})} > {_.map(this.props.menuItems, (item, menuIndex) => ( - this.selectItem(item)} - focused={this.state.focusedIndex === menuIndex} - /> + + this.selectItem(item)} + focused={this.state.focusedIndex === menuIndex} + /> + ))} From 18775b1544f41741c48b238d44df8de3b81746bf Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 26 Jan 2023 08:50:18 -0800 Subject: [PATCH 12/26] remove key --- src/components/PopoverMenu/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/PopoverMenu/index.js b/src/components/PopoverMenu/index.js index a1d63e79c5c5..cf4a2e140637 100644 --- a/src/components/PopoverMenu/index.js +++ b/src/components/PopoverMenu/index.js @@ -115,7 +115,6 @@ class PopoverMenu extends PureComponent { {_.map(this.props.menuItems, (item, menuIndex) => ( Date: Fri, 10 Feb 2023 19:32:18 -0800 Subject: [PATCH 13/26] fix open report is called on existing report --- 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 3c455087f29a..ec63e2418c99 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -127,7 +127,7 @@ class ReportScreen extends React.Component { } componentDidUpdate(prevProps) { - if (this.props.route.params.reportID === prevProps.route.params.reportID) { + if (this.props.report.reportID === prevProps.report.reportID) { return; } @@ -162,6 +162,10 @@ class ReportScreen extends React.Component { fetchReportIfNeeded() { const reportIDFromPath = getReportID(this.props.route); + if (!reportIDFromPath) { + return; + } + // It possible that we may not have the report object yet in Onyx yet e.g. we navigated to a URL for an accessible report that // is not stored locally yet. If props.report.reportID exists, then the report has been stored locally and nothing more needs to be done. // If it doesn't exist, then we fetch the report from the API. From 733c0f8d5f08df78d3f2651fa007397a8f78ad91 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Fri, 10 Feb 2023 20:12:18 -0800 Subject: [PATCH 14/26] add comment --- src/pages/home/ReportScreen.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index 0f1a269211fa..b84f83d93c7f 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -155,6 +155,8 @@ class ReportScreen extends React.Component { fetchReportIfNeeded() { const reportIDFromPath = getReportID(this.props.route); + // Report ID will be empty when the reports collection is empty. + // This could happen when we are loading the collection for the first time after logging in. if (!reportIDFromPath) { return; } From 1e2ff6c7a29e39047b3b9e01c2e4b4e144919201 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Mon, 20 Feb 2023 00:08:48 -0800 Subject: [PATCH 15/26] revert animation --- src/components/PopoverMenu/index.js | 21 ++++++++++----------- 1 file changed, 10 insertions(+), 11 deletions(-) diff --git a/src/components/PopoverMenu/index.js b/src/components/PopoverMenu/index.js index cf4a2e140637..16f03ffa951b 100644 --- a/src/components/PopoverMenu/index.js +++ b/src/components/PopoverMenu/index.js @@ -113,17 +113,16 @@ class PopoverMenu extends PureComponent { onFocusedIndexChanged={index => this.setState({focusedIndex: index})} > {_.map(this.props.menuItems, (item, menuIndex) => ( - - this.selectItem(item)} - focused={this.state.focusedIndex === menuIndex} - /> - + this.selectItem(item)} + focused={this.state.focusedIndex === menuIndex} + /> ))} From 33140fb03f086957716c83494b30d00f420e67da Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Mon, 20 Feb 2023 00:11:22 -0800 Subject: [PATCH 16/26] fix lint --- src/components/PopoverMenu/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/PopoverMenu/index.js b/src/components/PopoverMenu/index.js index 16f03ffa951b..0dabaa332417 100644 --- a/src/components/PopoverMenu/index.js +++ b/src/components/PopoverMenu/index.js @@ -1,7 +1,6 @@ import _ from 'underscore'; import React, {PureComponent} from 'react'; import {View} from 'react-native'; -import Animated, {FadeIn} from 'react-native-reanimated'; import Popover from '../Popover'; import styles from '../../styles/styles'; import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions'; From 4abf178e4cc5b10889195ed29d69a33cf975d7e1 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Wed, 1 Mar 2023 19:24:32 -0800 Subject: [PATCH 17/26] fix inconsistent skeleton height --- src/components/LHNSkeletonView.js | 5 +++-- src/pages/home/sidebar/SidebarLinks.js | 2 +- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/LHNSkeletonView.js b/src/components/LHNSkeletonView.js index 2eaa3a36c0ae..48e8c829204a 100644 --- a/src/components/LHNSkeletonView.js +++ b/src/components/LHNSkeletonView.js @@ -1,4 +1,5 @@ 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'; @@ -20,7 +21,7 @@ const defaultTypes = { const LHNSkeletonView = (props) => { const skeletonHeight = CONST.LHN_SKELETON_VIEW_HEIGHT; - const possibleVisibleContentItems = Math.round(props.containerHeight / skeletonHeight); + const possibleVisibleContentItems = Math.ceil(props.containerHeight / skeletonHeight); const skeletonViewLines = []; for (let index = 0; index < possibleVisibleContentItems; index++) { @@ -51,7 +52,7 @@ const LHNSkeletonView = (props) => { , ); } - return <>{skeletonViewLines}; + return {skeletonViewLines}; }; LHNSkeletonView.displayName = 'LHNSkeletonView'; diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index 6dbe4c561fd7..670c8fa13e8d 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -137,7 +137,7 @@ class SidebarLinks extends React.Component { } render() { - const isLoading = _.isEmpty(this.props.personalDetails) || _.isEmpty(this.props.chatReports); + const isLoading = _.isEmpty(this.props.personalDetails) || _.isEmpty(this.props.chatReports) || true; const freeze = this.props.isSmallScreenWidth && !this.props.isDrawerOpen && this.isSidebarLoaded; const animatePlaceholder = !freeze; const optionListItems = SidebarUtils.getOrderedReportIDs(this.props.reportIDFromRoute); From 9f7df797710cb9f9cf3b5dba2f821e69226a431c Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Wed, 1 Mar 2023 19:29:39 -0800 Subject: [PATCH 18/26] fix lint --- src/components/LHNSkeletonView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/LHNSkeletonView.js b/src/components/LHNSkeletonView.js index 48e8c829204a..b9727f685c15 100644 --- a/src/components/LHNSkeletonView.js +++ b/src/components/LHNSkeletonView.js @@ -1,5 +1,5 @@ import React from 'react'; -import { View } from 'react-native'; +import {View} from 'react-native'; import PropTypes from 'prop-types'; import {Rect, Circle} from 'react-native-svg'; import SkeletonViewContentLoader from 'react-content-loader/native'; From e2f63dbb58a6c5993e047e964b96a1a9cc57ca3a Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Wed, 1 Mar 2023 21:22:04 -0800 Subject: [PATCH 19/26] Revert "fix inconsistent skeleton height" This reverts commit 4abf178e4cc5b10889195ed29d69a33cf975d7e1. --- src/components/LHNSkeletonView.js | 5 ++--- src/pages/home/sidebar/SidebarLinks.js | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/LHNSkeletonView.js b/src/components/LHNSkeletonView.js index b9727f685c15..2eaa3a36c0ae 100644 --- a/src/components/LHNSkeletonView.js +++ b/src/components/LHNSkeletonView.js @@ -1,5 +1,4 @@ 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'; @@ -21,7 +20,7 @@ const defaultTypes = { const LHNSkeletonView = (props) => { const skeletonHeight = CONST.LHN_SKELETON_VIEW_HEIGHT; - const possibleVisibleContentItems = Math.ceil(props.containerHeight / skeletonHeight); + const possibleVisibleContentItems = Math.round(props.containerHeight / skeletonHeight); const skeletonViewLines = []; for (let index = 0; index < possibleVisibleContentItems; index++) { @@ -52,7 +51,7 @@ const LHNSkeletonView = (props) => { , ); } - return {skeletonViewLines}; + return <>{skeletonViewLines}; }; LHNSkeletonView.displayName = 'LHNSkeletonView'; diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index 670c8fa13e8d..6dbe4c561fd7 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -137,7 +137,7 @@ class SidebarLinks extends React.Component { } render() { - const isLoading = _.isEmpty(this.props.personalDetails) || _.isEmpty(this.props.chatReports) || true; + const isLoading = _.isEmpty(this.props.personalDetails) || _.isEmpty(this.props.chatReports); const freeze = this.props.isSmallScreenWidth && !this.props.isDrawerOpen && this.isSidebarLoaded; const animatePlaceholder = !freeze; const optionListItems = SidebarUtils.getOrderedReportIDs(this.props.reportIDFromRoute); From 4b0dbef176f0c59b9e484b3f088b133c20089413 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Wed, 1 Mar 2023 21:24:07 -0800 Subject: [PATCH 20/26] fix inconsistent skeleton height --- src/components/LHNSkeletonView.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/LHNSkeletonView.js b/src/components/LHNSkeletonView.js index 2eaa3a36c0ae..cbcf6f8ccff7 100644 --- a/src/components/LHNSkeletonView.js +++ b/src/components/LHNSkeletonView.js @@ -1,4 +1,5 @@ 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'; @@ -51,7 +52,7 @@ const LHNSkeletonView = (props) => { , ); } - return <>{skeletonViewLines}; + return {skeletonViewLines}; }; LHNSkeletonView.displayName = 'LHNSkeletonView'; From d080b578a3afc6be7d53077f54808323d567e881 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 2 Mar 2023 00:59:55 -0800 Subject: [PATCH 21/26] use ceil to get the number of skeleton --- src/components/LHNSkeletonView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/LHNSkeletonView.js b/src/components/LHNSkeletonView.js index cbcf6f8ccff7..b9727f685c15 100644 --- a/src/components/LHNSkeletonView.js +++ b/src/components/LHNSkeletonView.js @@ -21,7 +21,7 @@ const defaultTypes = { const LHNSkeletonView = (props) => { const skeletonHeight = CONST.LHN_SKELETON_VIEW_HEIGHT; - const possibleVisibleContentItems = Math.round(props.containerHeight / skeletonHeight); + const possibleVisibleContentItems = Math.ceil(props.containerHeight / skeletonHeight); const skeletonViewLines = []; for (let index = 0; index < possibleVisibleContentItems; index++) { From 22249d22631468afec0e0dd3371474527165064c Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 2 Mar 2023 18:47:47 -0800 Subject: [PATCH 22/26] move the height calculation to the skeleton component --- src/CONST.js | 2 +- .../LHNOptionsList/LHNOptionsList.js | 37 +++--- src/components/LHNSkeletonView.js | 110 ++++++++++++------ src/pages/home/sidebar/SidebarLinks.js | 65 ++++------- 4 files changed, 115 insertions(+), 99 deletions(-) diff --git a/src/CONST.js b/src/CONST.js index 275039a5cc94..55ff2f49990b 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -561,7 +561,7 @@ const CONST = { 3: 100, }, }, - LHN_SKELETON_VIEW_HEIGHT: 64, + LHN_SKELETON_VIEW_ITEM_HEIGHT: 64, EXPENSIFY_PARTNER_NAME: 'expensify.com', EMAIL: { CONCIERGE: 'concierge@expensify.com', diff --git a/src/components/LHNOptionsList/LHNOptionsList.js b/src/components/LHNOptionsList/LHNOptionsList.js index e85ea271c77a..c8bad6668426 100644 --- a/src/components/LHNOptionsList/LHNOptionsList.js +++ b/src/components/LHNOptionsList/LHNOptionsList.js @@ -1,7 +1,8 @@ import _ from 'underscore'; import React, {Component} from 'react'; -import {FlatList} from 'react-native'; +import {View, FlatList} from 'react-native'; import PropTypes from 'prop-types'; +import styles from '../../styles/styles'; import OptionRowLHN from './OptionRowLHN'; import variables from '../../styles/variables'; import CONST from '../../CONST'; @@ -83,22 +84,24 @@ class LHNOptionsList extends Component { render() { return ( - item} - stickySectionHeadersEnabled={false} - renderItem={this.renderItem} - getItemLayout={this.getItemLayout} - extraData={this.props.focusedIndex} - initialNumToRender={5} - maxToRenderPerBatch={5} - windowSize={5} - onLayout={this.props.onLayout} - /> + + item} + stickySectionHeadersEnabled={false} + renderItem={this.renderItem} + getItemLayout={this.getItemLayout} + extraData={this.props.focusedIndex} + initialNumToRender={5} + maxToRenderPerBatch={5} + windowSize={5} + onLayout={this.props.onLayout} + /> + ); } } diff --git a/src/components/LHNSkeletonView.js b/src/components/LHNSkeletonView.js index b9727f685c15..dfc03df482c5 100644 --- a/src/components/LHNSkeletonView.js +++ b/src/components/LHNSkeletonView.js @@ -8,54 +8,90 @@ import themeColors from '../styles/themes/default'; import styles from '../styles/styles'; const propTypes = { - /** Height of the container component */ - containerHeight: PropTypes.number.isRequired, - /** Whether to animate the skeleton view */ - animate: PropTypes.bool, + shouldAnimate: PropTypes.bool, }; const defaultTypes = { - animate: true, + shouldAnimate: true, }; -const LHNSkeletonView = (props) => { - const skeletonHeight = CONST.LHN_SKELETON_VIEW_HEIGHT; - const possibleVisibleContentItems = Math.ceil(props.containerHeight / skeletonHeight); - const skeletonViewLines = []; - - for (let index = 0; index < possibleVisibleContentItems; index++) { - const lengthIndex = index % 3; - let lineWidth; - switch (lengthIndex) { - case 0: - lineWidth = '100%'; - break; - case 1: - lineWidth = '50%'; - break; - default: - lineWidth = '65%'; +class LHNSkeletonView extends React.Component { + constructor(props) { + super(props); + this.state = { + skeletonViewItems: [], + }; + } + + /** + * Generate the skeleton view items. + * + * @param 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( + + + + + , + ); } - skeletonViewLines.push( - ({ + skeletonViewItems: [...prevState.skeletonViewItems, ...skeletonViewItems], + })); + } + + render() { + return ( + { + const numItems = Math.ceil(event.nativeEvent.layout.height / CONST.LHN_SKELETON_VIEW_ITEM_HEIGHT); + this.generateSkeletonViewItems(numItems); + }} > - - - - , + {this.state.skeletonViewItems} + ); } - return {skeletonViewLines}; -}; +} -LHNSkeletonView.displayName = 'LHNSkeletonView'; LHNSkeletonView.propTypes = propTypes; LHNSkeletonView.defaultProps = defaultTypes; + export default LHNSkeletonView; diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index 6dbe4c561fd7..db84795d4177 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -89,9 +89,6 @@ const defaultProps = { priorityMode: CONST.PRIORITY_MODE.DEFAULT, }; -// Keep a reference to the screen height so we can use it when a new SidebarLinks component mounts -let lhnListHeight = 0; - class SidebarLinks extends React.Component { constructor(props) { super(props); @@ -99,10 +96,6 @@ class SidebarLinks extends React.Component { this.showSearchPage = this.showSearchPage.bind(this); this.showSettingsPage = this.showSettingsPage.bind(this); this.showReportPage = this.showReportPage.bind(this); - - this.state = { - skeletonViewContainerHeight: lhnListHeight, - }; } showSearchPage() { @@ -139,10 +132,9 @@ class SidebarLinks extends React.Component { render() { const isLoading = _.isEmpty(this.props.personalDetails) || _.isEmpty(this.props.chatReports); const freeze = this.props.isSmallScreenWidth && !this.props.isDrawerOpen && this.isSidebarLoaded; - const animatePlaceholder = !freeze; const optionListItems = SidebarUtils.getOrderedReportIDs(this.props.reportIDFromRoute); - const skeletonPlaceholder = ; + const skeletonPlaceholder = ; return ( - { - const skeletonViewContainerHeight = event.nativeEvent.layout.height; - - // 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. - if (skeletonViewContainerHeight === 0) { - return; - } - lhnListHeight = skeletonViewContainerHeight; - this.setState({skeletonViewContainerHeight}); - }} - > - {isLoading ? skeletonPlaceholder : ( - option.toString() === this.props.reportIDFromRoute - ))} - onSelectRow={this.showReportPage} - shouldDisableFocusOptions={this.props.isSmallScreenWidth} - optionMode={this.props.priorityMode === CONST.PRIORITY_MODE.GSD ? CONST.OPTION_MODE.COMPACT : CONST.OPTION_MODE.DEFAULT} - onLayout={() => { - this.props.onLayout(); - App.setSidebarLoaded(); - this.isSidebarLoaded = true; - }} - /> - )} - + {isLoading ? skeletonPlaceholder : ( + option.toString() === this.props.reportIDFromRoute + ))} + onSelectRow={this.showReportPage} + shouldDisableFocusOptions={this.props.isSmallScreenWidth} + optionMode={this.props.priorityMode === CONST.PRIORITY_MODE.GSD ? CONST.OPTION_MODE.COMPACT : CONST.OPTION_MODE.DEFAULT} + onLayout={() => { + this.props.onLayout(); + App.setSidebarLoaded(); + this.isSidebarLoaded = true; + }} + /> + )} ); From bbc9a66376ae039be88cefee05f2862fafb74fcb Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Thu, 2 Mar 2023 18:58:01 -0800 Subject: [PATCH 23/26] fix lint --- src/components/LHNSkeletonView.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/LHNSkeletonView.js b/src/components/LHNSkeletonView.js index dfc03df482c5..efa7a629fe82 100644 --- a/src/components/LHNSkeletonView.js +++ b/src/components/LHNSkeletonView.js @@ -27,7 +27,7 @@ class LHNSkeletonView extends React.Component { /** * Generate the skeleton view items. * - * @param numItems + * @param {Number} numItems */ generateSkeletonViewItems(numItems) { if (this.state.skeletonViewItems.length === numItems) { From 3a660a53ca30f754d1b9875d96ae53e9c150e508 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Fri, 3 Mar 2023 22:18:03 -0800 Subject: [PATCH 24/26] add comment --- src/libs/Navigation/AppNavigator/MainDrawerNavigator.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js b/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js index e1c93d7543c5..9c8ae24a2749 100644 --- a/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js +++ b/src/libs/Navigation/AppNavigator/MainDrawerNavigator.js @@ -94,6 +94,9 @@ 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', ''); From 829b20efd9a6110968a45eebfaa82da4bcb68bef Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Mon, 6 Mar 2023 19:56:37 -0800 Subject: [PATCH 25/26] change variable name --- src/pages/home/sidebar/SidebarLinks.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index db84795d4177..8efd0412c9f9 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -131,10 +131,10 @@ class SidebarLinks extends React.Component { render() { const isLoading = _.isEmpty(this.props.personalDetails) || _.isEmpty(this.props.chatReports); - const freeze = this.props.isSmallScreenWidth && !this.props.isDrawerOpen && this.isSidebarLoaded; + const shouldFreeze = this.props.isSmallScreenWidth && !this.props.isDrawerOpen && this.isSidebarLoaded; const optionListItems = SidebarUtils.getOrderedReportIDs(this.props.reportIDFromRoute); - const skeletonPlaceholder = ; + const skeletonPlaceholder = ; return ( {isLoading ? skeletonPlaceholder : ( From 5a8363ce11373a72ef09267857988db75a0e2386 Mon Sep 17 00:00:00 2001 From: Bernhard Owen Josephus Date: Mon, 13 Mar 2023 19:28:50 -0700 Subject: [PATCH 26/26] change variable name --- .../ReportActionsSkeletonView/SkeletonViewLines.js | 6 +++--- src/components/ReportActionsSkeletonView/index.js | 10 +++++----- src/components/ReportHeaderSkeletonView.js | 6 +++--- src/pages/home/ReportScreen.js | 12 ++++++------ 4 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js b/src/components/ReportActionsSkeletonView/SkeletonViewLines.js index 30e96d5784dd..464bdffa6f53 100644 --- a/src/components/ReportActionsSkeletonView/SkeletonViewLines.js +++ b/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 => ( { @@ -23,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}; diff --git a/src/components/ReportHeaderSkeletonView.js b/src/components/ReportHeaderSkeletonView.js index fc303aad46db..040d883ca0b5 100644 --- a/src/components/ReportHeaderSkeletonView.js +++ b/src/components/ReportHeaderSkeletonView.js @@ -12,11 +12,11 @@ import themeColors from '../styles/themes/default'; const propTypes = { ...windowDimensionsPropTypes, - animate: PropTypes.bool, + shouldAnimate: PropTypes.bool, }; const defaultProps = { - animate: true, + shouldAnimate: true, }; const ReportHeaderSkeletonView = props => ( @@ -31,7 +31,7 @@ const ReportHeaderSkeletonView = props => ( )} - + - + @@ -233,7 +233,7 @@ class ReportScreen extends React.Component { Navigation.navigate(ROUTES.HOME); }} > - {isLoading ? : ( + {isLoading ? : ( <>