Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Display loading page for workspace page with section #32903

Merged
merged 4 commits into from
Jan 3, 2024
Merged

Display loading page for workspace page with section #32903

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3bfdf18
display loading page for workspace page with section
dukenv0307 Dec 12, 2023
d23dc99
Merge branch 'main' into fix/32539
dukenv0307 Dec 28, 2023
99b06d5
add should show loading prop
dukenv0307 Dec 28, 2023
c94f137
Merge branch 'main' into fix/32539
dukenv0307 Jan 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 33 additions & 1 deletion src/libs/actions/BankAccounts.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -404,7 +404,39 @@ function verifyIdentityForBankAccount(bankAccountID: number, onfidoData: OnfidoD
}

function openWorkspaceView() {
API.read('OpenWorkspaceView', {}, {});
API.read(
'OpenWorkspaceView',
{},
{
optimisticData: [
{
onyxMethod: Onyx.METHOD.MERGE,
key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
value: {
isLoading: true,
},
},
],
successData: [
{
onyxMethod: Onyx.METHOD.MERGE,
key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
value: {
isLoading: false,
},
},
],
failureData: [
{
onyxMethod: Onyx.METHOD.MERGE,
key: ONYXKEYS.REIMBURSEMENT_ACCOUNT,
value: {
isLoading: false,
},
},
],
},
);
}

function handlePlaidError(bankAccountID: number, error: string, errorDescription: string, plaidRequestID: string) {
Expand Down
53 changes: 42 additions & 11 deletions src/pages/workspace/WorkspacePageWithSections.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import lodashGet from 'lodash/get';
import PropTypes from 'prop-types';
import React, {useEffect} from 'react';
import React, {useEffect, useRef} from 'react';
import {View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
import _ from 'underscore';
import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
import FullScreenLoadingIndicator from '@components/FullscreenLoadingIndicator';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import ScreenWrapper from '@components/ScreenWrapper';
import ScrollViewWithContext from '@components/ScrollViewWithContext';
Expand Down Expand Up @@ -62,6 +63,9 @@ const propTypes = {

/** Option to use the default scroll view */
shouldUseScrollView: PropTypes.bool,

/** Option to show the loading page while the API is calling */
shouldShowLoading: PropTypes.bool,
};

const defaultProps = {
Expand All @@ -73,6 +77,7 @@ const defaultProps = {
shouldUseScrollView: false,
shouldSkipVBBACall: false,
backButtonRoute: '',
shouldShowLoading: true,
};

function fetchData(skipVBBACal) {
Expand All @@ -83,16 +88,36 @@ function fetchData(skipVBBACal) {
BankAccounts.openWorkspaceView();
}

function WorkspacePageWithSections({backButtonRoute, children, footer, guidesCallTaskID, headerText, policy, reimbursementAccount, route, shouldUseScrollView, shouldSkipVBBACall, user}) {
function WorkspacePageWithSections({
backButtonRoute,
children,
footer,
guidesCallTaskID,
headerText,
policy,
reimbursementAccount,
route,
shouldUseScrollView,
shouldSkipVBBACall,
user,
shouldShowLoading,
}) {
const styles = useThemeStyles();
useNetwork({onReconnect: () => fetchData(shouldSkipVBBACall)});

const isLoading = lodashGet(reimbursementAccount, 'isLoading', true);
const achState = lodashGet(reimbursementAccount, 'achData.state', '');
const hasVBA = achState === BankAccount.STATE.OPEN;
const isUsingECard = lodashGet(user, 'isUsingExpensifyCard', false);
const policyID = lodashGet(route, 'params.policyID');
const policyName = lodashGet(policy, 'name');
const content = children(hasVBA, policyID, isUsingECard);
const firstRender = useRef(true);

useEffect(() => {
// Because isLoading is false before merging in Onyx, we need firstRender ref to display loading page as well before isLoading is change to true
firstRender.current = false;
}, []);

useEffect(() => {
fetchData(shouldSkipVBBACall);
Expand All @@ -117,17 +142,23 @@ function WorkspacePageWithSections({backButtonRoute, children, footer, guidesCal
guidesCallTaskID={guidesCallTaskID}
onBackButtonPress={() => Navigation.goBack(backButtonRoute || ROUTES.WORKSPACE_INITIAL.getRoute(policyID))}
/>
{shouldUseScrollView ? (
<ScrollViewWithContext
keyboardShouldPersistTaps="handled"
style={[styles.settingsPageBackground, styles.flex1, styles.w100]}
>
<View style={[styles.w100, styles.flex1]}>{content}</View>
</ScrollViewWithContext>
{(isLoading || firstRender.current) && shouldShowLoading ? (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This caused #36512 where loading appears in WorkspacePageWithSections page when bank account process is going on

<FullScreenLoadingIndicator style={[styles.flex1, styles.pRelative]} />
) : (
content
<>
{shouldUseScrollView ? (
<ScrollViewWithContext
keyboardShouldPersistTaps="handled"
style={[styles.settingsPageBackground, styles.flex1, styles.w100]}
>
<View style={[styles.w100, styles.flex1]}>{content}</View>
</ScrollViewWithContext>
) : (
content
)}
{footer}
</>
)}
{footer}
</FullPageNotFoundView>
</ScreenWrapper>
);
Expand Down
1 change: 1 addition & 0 deletions src/pages/workspace/WorkspaceSettingsPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@ function WorkspaceSettingsPage({policy, currencyList, windowWidth, route}) {
headerText={translate('workspace.common.settings')}
route={route}
guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_SETTINGS}
shouldShowLoading={false}
>
{(hasVBA) => (
<FormProvider
Expand Down
1 change: 1 addition & 0 deletions src/pages/workspace/reimburse/WorkspaceRateAndUnitPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@ function WorkspaceRateAndUnitPage(props) {
guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_REIMBURSE}
shouldSkipVBBACall
backButtonRoute={ROUTES.WORKSPACE_REIMBURSE.getRoute(props.policy.id)}
shouldShowLoading={false}
>
{() => (
<FormProvider
Expand Down
1 change: 1 addition & 0 deletions src/pages/workspace/reimburse/WorkspaceReimbursePage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ function WorkspaceReimbursePage(props) {
route={props.route}
guidesCallTaskID={CONST.GUIDES_CALL_TASK_IDS.WORKSPACE_REIMBURSE}
shouldSkipVBBACall
shouldShowLoading={false}
>
{() => <WorkspaceReimburseView policy={props.policy} />}
</WorkspacePageWithSections>
Expand Down