Merge pull request Expensify#65707 from linhvovan29546/fix/65480-the-loading-indicator-displayed-when-offline

Fix/65480 the loading indicator displayed when offline

Author: mountiny

src/pages/workspace/WorkspacePageWithSections.tsx

@@ -128,7 +128,7 @@ function WorkspacePageWithSections({
 }: WorkspacePageWithSectionsProps) {
     const styles = useThemeStyles();
     const policyID = route.params?.policyID;
-    useNetwork({onReconnect: () => fetchData(policyID, shouldSkipVBBACall)});
+    const {isOffline} = useNetwork({onReconnect: () => fetchData(policyID, shouldSkipVBBACall)});
 
     const [account] = useOnyx(ONYXKEYS.ACCOUNT, {canBeMissing: false});
     const [reimbursementAccount = CONST.REIMBURSEMENT_ACCOUNT.DEFAULT_DATA] = useOnyx(ONYXKEYS.REIMBURSEMENT_ACCOUNT, {canBeMissing: true});
@@ -218,7 +218,7 @@ function WorkspacePageWithSections({
                 >
                     {headerContent}
                 </HeaderWithBackButton>
-                {(isLoading || firstRender.current) && shouldShowLoading && isFocused ? (
+                {!isOffline && (isLoading || firstRender.current) && shouldShowLoading && isFocused ? (
                     <FullScreenLoadingIndicator style={[styles.flex1, styles.pRelative]} />
                 ) : (
                     <>

tests/ui/WorkspacePageWithSectionsTest.tsx

@@ -0,0 +1,120 @@
+import {render, screen} from '@testing-library/react-native';
+import React from 'react';
+import {View} from 'react-native';
+import Onyx from 'react-native-onyx';
+import ComposeProviders from '@components/ComposeProviders';
+import {LocaleContextProvider} from '@components/LocaleContextProvider';
+import OnyxProvider from '@components/OnyxProvider';
+import type Navigation from '@libs/Navigation/Navigation';
+import WorkspacePageWithSections from '@pages/workspace/WorkspacePageWithSections';
+import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import SCREENS from '@src/SCREENS';
+import type {Policy} from '@src/types/onyx';
+import createRandomPolicy from '../utils/collections/policies';
+import waitForBatchedUpdates from '../utils/waitForBatchedUpdates';
+import waitForBatchedUpdatesWithAct from '../utils/waitForBatchedUpdatesWithAct';
+
+const POLICY_ID = 1;
+
+// Mock navigation hooks
+jest.mock('@react-navigation/native', () => {
+    const actualNav = jest.requireActual<typeof Navigation>('@react-navigation/native');
+    return {
+        ...actualNav,
+        useIsFocused: () => true,
+        useRoute: () => ({
+            key: 'test-route',
+            name: 'WORKSPACE_INITIAL',
+            params: {policyID: POLICY_ID.toString()},
+        }),
+        usePreventRemove: jest.fn(),
+    };
+});
+
+// Mock useResponsiveLayout hook
+jest.mock('@src/hooks/useResponsiveLayout');
+
+// Mock FullScreenLoadingIndicator
+jest.mock('@components/FullscreenLoadingIndicator', () => {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    const ReactNative = require('react-native');
+    return () => {
+        return <ReactNative.View testID="FullScreenLoadingIndicator" />;
+    };
+});
+
+const mockPolicy: Policy = {...createRandomPolicy(POLICY_ID), type: CONST.POLICY.TYPE.CORPORATE, pendingAction: null, role: CONST.POLICY.ROLE.ADMIN};
+
+const renderWorkspacePageWithSections = (props = {}) => {
+    const defaultProps = {
+        headerText: 'Test Workspace',
+        route: {
+            key: 'test-route',
+            name: SCREENS.WORKSPACE.INITIAL,
+            params: {policyID: POLICY_ID.toString()},
+        },
+        policy: mockPolicy,
+        ...props,
+    };
+
+    return render(
+        <ComposeProviders components={[OnyxProvider, LocaleContextProvider]}>
+            <WorkspacePageWithSections
+                // eslint-disable-next-line react/jsx-props-no-spreading
+                {...defaultProps}
+            >
+                <View />
+            </WorkspacePageWithSections>
+        </ComposeProviders>,
+    );
+};
+
+describe('WorkspacePageWithSections', () => {
+    describe('FullScreenLoadingIndicator behavior', () => {
+        beforeAll(() => {
+            Onyx.init({
+                keys: ONYXKEYS,
+            });
+            Onyx.merge(`${ONYXKEYS.COLLECTION.POLICY}${POLICY_ID}`, mockPolicy);
+            return waitForBatchedUpdates();
+        });
+
+        afterEach(() => {
+            jest.clearAllMocks();
+            return Onyx.clear();
+        });
+
+        it('should not display FullScreenLoadingIndicator when user is offline', async () => {
+            // Given the network state is offline
+            await Onyx.merge(ONYXKEYS.NETWORK, {isOffline: true});
+
+            // When render the component with loading enabled
+            renderWorkspacePageWithSections({
+                shouldShowLoading: true,
+                isLoading: true,
+            });
+
+            await waitForBatchedUpdatesWithAct();
+
+            // Then the FullScreenLoadingIndicator should not be displayed
+            expect(screen.queryByTestId('FullScreenLoadingIndicator')).toBeNull();
+        });
+
+        it('should display FullScreenLoadingIndicator when user is online and loading', async () => {
+            // Given the network state is online
+            await Onyx.merge(ONYXKEYS.NETWORK, {isOffline: false});
+
+            // When render the component with loading enabled
+            renderWorkspacePageWithSections({
+                shouldShowLoading: true,
+                isLoading: true,
+            });
+
+            await waitForBatchedUpdatesWithAct();
+
+            // Then the FullScreenLoadingIndicator should be displayed
+            expect(screen.getByTestId('FullScreenLoadingIndicator')).toBeTruthy();
+        });
+    });
+});