Add skeleton to loading Accounting options

src/components/AccountingListSkeletonView.tsx

@@ -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;

src/pages/workspace/accounting/PolicyAccountingPage.tsx

@@ -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';
@@ -28,7 +29,7 @@ import {syncConnection} from '@libs/actions/connections/QuickBooksOnline';
 import {findCurrentXeroOrganization, getCurrentXeroOrganizationName, getXeroTenants} from '@libs/PolicyUtils';
 import Navigation from '@navigation/Navigation';
 import AccessOrNotFoundWrapper from '@pages/workspace/AccessOrNotFoundWrapper';
-import type {WithPolicyProps} from '@pages/workspace/withPolicy';
+import type {WithPolicyConnectionsProps} from '@pages/workspace/withPolicyConnections';
 import withPolicyConnections from '@pages/workspace/withPolicyConnections';
 import type {AnchorPosition} from '@styles/index';
 import CONST from '@src/CONST';
@@ -43,7 +44,7 @@ type PolicyAccountingPageOnyxProps = {
     connectionSyncProgress: OnyxEntry<PolicyConnectionSyncProgress>;
 };
 
-type PolicyAccountingPageProps = WithPolicyProps &
+type PolicyAccountingPageProps = WithPolicyConnectionsProps &
     PolicyAccountingPageOnyxProps & {
         // This is not using OnyxEntry<OnyxTypes.Policy> because the HOC withPolicyConnections will only render this component if there is a policy
         policy: Policy;
@@ -100,7 +101,7 @@ function accountingIntegrationData(
     }
 }
 
-function PolicyAccountingPage({policy, connectionSyncProgress}: PolicyAccountingPageProps) {
+function PolicyAccountingPage({policy, connectionSyncProgress, isConnectionDataFetchNeeded}: PolicyAccountingPageProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
@@ -335,22 +336,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]}
-                                >
+                            {isConnectionDataFetchNeeded ? (
+                                <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>
@@ -383,4 +392,5 @@ export default withPolicyConnections(
             key: (props) => `${ONYXKEYS.COLLECTION.POLICY_CONNECTION_SYNC_PROGRESS}${props.route.params.policyID}`,
         },
     })(PolicyAccountingPage),
+    false,
 );

src/pages/workspace/withPolicyConnections.tsx

@@ -9,7 +9,9 @@ import ONYXKEYS from '@src/ONYXKEYS';
 import withPolicy from './withPolicy';
 import type {WithPolicyProps} from './withPolicy';
 
-type WithPolicyConnectionsProps = WithPolicyProps;
+type WithPolicyConnectionsProps = WithPolicyProps & {
+    isConnectionDataFetchNeeded: boolean;
+};
 
 /**
  * Higher-order component that fetches the connections data and populates
@@ -21,24 +23,25 @@ type WithPolicyConnectionsProps = WithPolicyProps;
  * Only the active policy gets the complete policy data upon app start that includes the connections data.
  * For other policies, the connections data needs to be fetched when it's needed.
  */
-function withPolicyConnections<TProps extends WithPolicyConnectionsProps>(WrappedComponent: ComponentType<TProps>) {
+function withPolicyConnections<TProps extends WithPolicyConnectionsProps>(WrappedComponent: ComponentType<TProps>, shouldBlockView = true) {
     function WithPolicyConnections(props: TProps) {
         const {isOffline} = useNetwork();
         const [hasConnectionsDataBeenFetched, {status}] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_HAS_CONNECTIONS_DATA_BEEN_FETCHED}${props.policy?.id ?? '0'}`, {
             initWithStoredValues: false,
         });
+        const isConnectionDataFetchNeeded = !isOffline && props.policy && props.policy.areConnectionsEnabled && !props.policy.connections && hasConnectionsDataBeenFetched === null;
 
         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 (!isConnectionDataFetchNeeded || !props.policy?.id) {
                 return;
             }
 
             openPolicyAccountingPage(props.policy.id);
-        }, [hasConnectionsDataBeenFetched, props.policy, isOffline]);
+        }, [props.policy?.id, isConnectionDataFetchNeeded]);
 
-        if (props.policy?.areConnectionsEnabled && (!props.policy || status === 'loading' || hasConnectionsDataBeenFetched === false)) {
+        if (props.policy?.areConnectionsEnabled && status === 'loading' && shouldBlockView) {
             return (
                 <FullPageOfflineBlockingView>
                     <FullScreenLoadingIndicator />
@@ -50,6 +53,7 @@ function withPolicyConnections<TProps extends WithPolicyConnectionsProps>(Wrappe
             <WrappedComponent
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...props}
+                isConnectionDataFetchNeeded={isConnectionDataFetchNeeded}
             />
         );
     }

src/styles/utils/sizing.ts

@@ -38,6 +38,10 @@ export default {
         minHeight: '100%',
     },
 
+    mnh20: {
+        minHeight: 80,
+    },
+
     mnw2: {
         minWidth: 8,
     },