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

Jump to bottom

Add skeleton to loading Accounting options #41980

Merged
merged 16 commits into from
May 15, 2024
Merged

Add skeleton to loading Accounting options #41980

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
e302bcd
Add skeleton to loading Accounting options
narefyev91 May 10, 2024
9f07b73
updates after design review + add logic to support offline
narefyev91 May 13, 2024
05fa9bc
updates after c+ review
narefyev91 May 13, 2024
3b02297
add more width for lines
narefyev91 May 13, 2024
d2511d6
updates after c+ review
narefyev91 May 14, 2024
18dffb0
Merge branch 'refs/heads/main' into add-skeleton-for-loading-accounting
narefyev91 May 14, 2024
6725691
updates after c+ review
narefyev91 May 14, 2024
9a5e596
updates after c+ review
narefyev91 May 14, 2024
0101ec0
Update src/pages/workspace/withPolicyConnections.tsx
narefyev91 May 14, 2024
0a5d79e
Update src/pages/workspace/withPolicyConnections.tsx
narefyev91 May 14, 2024
7f3f860
Update src/pages/workspace/withPolicyConnections.tsx
narefyev91 May 14, 2024
695c947
updates after c+ review
narefyev91 May 14, 2024
8392a21
updates after c+ review
narefyev91 May 14, 2024
83f966b
updates after c+ review
narefyev91 May 14, 2024
9e84439
Update src/pages/workspace/withPolicyConnections.tsx
narefyev91 May 14, 2024
b6dbb99
Update src/pages/workspace/withPolicyConnections.tsx
narefyev91 May 14, 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: 34 additions & 0 deletions src/components/AccountingListSkeletonView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import React from 'react';
import {Circle, Rect} from 'react-native-svg';
import ItemListSkeletonView from './Skeletons/ItemListSkeletonView';

type AccountingListSkeletonViewProps = {
shouldAnimate?: boolean;
};

function AccountingListSkeletonView({shouldAnimate = true}: AccountingListSkeletonViewProps) {
return (
<ItemListSkeletonView
shouldAnimate={shouldAnimate}
renderSkeletonItem={() => (
<>
<Circle
cx="20"
cy="32"
r="20"
/>
<Rect
x="54"
y="28"
width="40%"
height="8"
/>
</>
)}
/>
);
}

AccountingListSkeletonView.displayName = 'AccountingListSkeletonView';

export default AccountingListSkeletonView;
38 changes: 24 additions & 14 deletions src/pages/workspace/accounting/PolicyAccountingPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, {useMemo, useRef, useState} from 'react';
import {ActivityIndicator, View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
import type {OnyxEntry} from 'react-native-onyx';
import AccountingListSkeletonView from '@components/AccountingListSkeletonView';
import CollapsibleSection from '@components/CollapsibleSection';
import ConfirmModal from '@components/ConfirmModal';
import ConnectToQuickbooksOnlineButton from '@components/ConnectToQuickbooksOnlineButton';
Expand Down Expand Up @@ -47,6 +48,7 @@ type PolicyAccountingPageProps = WithPolicyProps &
PolicyAccountingPageOnyxProps & {
// This is not using OnyxEntry<OnyxTypes.Policy> because the HOC withPolicyConnections will only render this component if there is a policy
policy: Policy;
isConnectionDataFetchNotNeeded: boolean;
};

type AccountingIntegration = {
Expand Down Expand Up @@ -100,7 +102,7 @@ function accountingIntegrationData(
}
}

function PolicyAccountingPage({policy, connectionSyncProgress}: PolicyAccountingPageProps) {
function PolicyAccountingPage({policy, connectionSyncProgress, isConnectionDataFetchNotNeeded}: PolicyAccountingPageProps) {
const theme = useTheme();
const styles = useThemeStyles();
const {translate} = useLocalize();
Expand Down Expand Up @@ -335,22 +337,30 @@ function PolicyAccountingPage({policy, connectionSyncProgress}: PolicyAccounting
titleStyles={styles.accountSettingsSectionTitle}
childrenStyles={styles.pt5}
>
<MenuItemList
menuItems={connectionsMenuItems}
shouldUseSingleExecution
/>
{otherIntegrationsItems && (
<CollapsibleSection
title={translate('workspace.accounting.other')}
wrapperStyle={[styles.pr3, styles.mt5, styles.pv3]}
titleStyle={[styles.textNormal, styles.colorMuted]}
textStyle={[styles.flex1, styles.userSelectNone, styles.textNormal, styles.colorMuted]}
>
{!isConnectionDataFetchNotNeeded ? (
<View style={styles.mnh20}>
<AccountingListSkeletonView shouldAnimate />
</View>
) : (
<>
<MenuItemList
menuItems={otherIntegrationsItems}
menuItems={connectionsMenuItems}
shouldUseSingleExecution
/>
</CollapsibleSection>
{otherIntegrationsItems && (
<CollapsibleSection
title={translate('workspace.accounting.other')}
wrapperStyle={[styles.pr3, styles.mt5, styles.pv3]}
titleStyle={[styles.textNormal, styles.colorMuted]}
textStyle={[styles.flex1, styles.userSelectNone, styles.textNormal, styles.colorMuted]}
>
<MenuItemList
menuItems={otherIntegrationsItems}
shouldUseSingleExecution
/>
</CollapsibleSection>
)}
</>
)}
</Section>
</View>
Expand Down
9 changes: 6 additions & 3 deletions src/pages/workspace/withPolicyConnections.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,18 +27,20 @@ function withPolicyConnections<TProps extends WithPolicyConnectionsProps>(Wrappe
const [hasConnectionsDataBeenFetched, {status}] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_HAS_CONNECTIONS_DATA_BEEN_FETCHED}${props.policy?.id ?? '0'}`, {
initWithStoredValues: false,
});
// eslint-disable-next-line rulesdir/no-negated-variables
const isConnectionDataFetchNotNeeded = isOffline || !props.policy || !props.policy.areConnectionsEnabled || !!hasConnectionsDataBeenFetched || !!props.policy.connections;
narefyev91 marked this conversation as resolved.
Show resolved Hide resolved

useEffect(() => {
// When the accounting feature is not enabled, or if the connections data already exists,
// there is no need to fetch the connections data.
if (!props.policy || !props.policy.areConnectionsEnabled || !!hasConnectionsDataBeenFetched || !!props.policy.connections) {
if (isConnectionDataFetchNotNeeded || !props?.policy?.id) {
return;
}

openPolicyAccountingPage(props.policy.id);
}, [hasConnectionsDataBeenFetched, props.policy, isOffline]);
}, [hasConnectionsDataBeenFetched, props.policy, isOffline, isConnectionDataFetchNotNeeded]);

if (props.policy?.areConnectionsEnabled && (!props.policy || status === 'loading' || hasConnectionsDataBeenFetched === false)) {
narefyev91 marked this conversation as resolved.
Show resolved Hide resolved
narefyev91 marked this conversation as resolved.
Show resolved Hide resolved
if (props.policy?.areConnectionsEnabled && (!props.policy || status === 'loading')) {
narefyev91 marked this conversation as resolved.
Show resolved Hide resolved
return (
<FullPageOfflineBlockingView>
Copy link
Contributor

Choose a reason for hiding this comment

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

Remove <FullPageOfflineBlockingView /> The accounting pages are accessible offline. Also since we are using isConnectionDataFetchNeeded we will render this only when online afterall. However we need to disable the Set up buttons on the connections (QBO and Xero) since the setup requires connection

<FullScreenLoadingIndicator />
Expand All @@ -50,6 +52,7 @@ function withPolicyConnections<TProps extends WithPolicyConnectionsProps>(Wrappe
<WrappedComponent
// eslint-disable-next-line react/jsx-props-no-spreading
{...props}
isConnectionDataFetchNotNeeded={isConnectionDataFetchNotNeeded}
/>
);
}
Expand Down
4 changes: 4 additions & 0 deletions src/styles/utils/sizing.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,10 @@ export default {
minHeight: '100%',
},

mnh20: {
minHeight: 80,
},

mnw2: {
minWidth: 8,
},
Expand Down
Loading