feature: Add loading indicator when ReconnectApp is running

src/CONST.ts

@@ -326,6 +326,9 @@ const CONST = {
     ANIMATED_HIGHLIGHT_END_DURATION: 2000,
     ANIMATED_TRANSITION: 300,
     ANIMATED_TRANSITION_FROM_VALUE: 100,
+    ANIMATED_PROGRESS_BAR_DELAY: 300,
+    ANIMATED_PROGRESS_BAR_OPACITY_DURATION: 300,
+    ANIMATED_PROGRESS_BAR_DURATION: 750,
     ANIMATION_IN_TIMING: 100,
     ANIMATION_DIRECTION: {
         IN: 'in',

src/components/LoadingBar.tsx

@@ -0,0 +1,83 @@
+import React, {useEffect} from 'react';
+import Animated, {cancelAnimation, Easing, useAnimatedStyle, useSharedValue, withDelay, withRepeat, withSequence, withTiming} from 'react-native-reanimated';
+import useThemeStyles from '@hooks/useThemeStyles';
+import CONST from '@src/CONST';
+
+type LoadingBarProps = {
+    // Whether or not to show the loading bar
+    shouldShow: boolean;
+};
+
+function LoadingBar({shouldShow}: LoadingBarProps) {
+    const left = useSharedValue(0);
+    const width = useSharedValue(0);
+    const opacity = useSharedValue(0);
+    const styles = useThemeStyles();
+
+    useEffect(() => {
+        if (shouldShow) {
+            // eslint-disable-next-line react-compiler/react-compiler
+            left.set(0);
+            width.set(0);
+            opacity.set(withTiming(1, {duration: CONST.ANIMATED_PROGRESS_BAR_OPACITY_DURATION}));
+
+            left.set(
+                withDelay(
+                    CONST.ANIMATED_PROGRESS_BAR_DELAY,
+                    withRepeat(
+                        withSequence(
+                            withTiming(0, {duration: 0}),
+                            withTiming(0, {duration: CONST.ANIMATED_PROGRESS_BAR_DURATION, easing: Easing.bezier(0.65, 0, 0.35, 1)}),
+                            withTiming(100, {duration: CONST.ANIMATED_PROGRESS_BAR_DURATION, easing: Easing.bezier(0.65, 0, 0.35, 1)}),
+                        ),
+                        -1,
+                        false,
+                    ),
+                ),
+            );
+
+            width.set(
+                withDelay(
+                    CONST.ANIMATED_PROGRESS_BAR_DELAY,
+                    withRepeat(
+                        withSequence(
+                            withTiming(0, {duration: 0}),
+                            withTiming(100, {duration: CONST.ANIMATED_PROGRESS_BAR_DURATION, easing: Easing.bezier(0.65, 0, 0.35, 1)}),
+                            withTiming(0, {duration: CONST.ANIMATED_PROGRESS_BAR_DURATION, easing: Easing.bezier(0.65, 0, 0.35, 1)}),
+                        ),
+                        -1,
+                        false,
+                    ),
+                ),
+            );
+        } else {
+            opacity.set(
+                withTiming(0, {duration: CONST.ANIMATED_PROGRESS_BAR_OPACITY_DURATION}, () => {
+                    cancelAnimation(left);
+                    cancelAnimation(width);
+                }),
+            );
+        }
+        // we want to update only when shouldShow changes
+        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
+    }, [shouldShow]);
+
+    const animatedIndicatorStyle = useAnimatedStyle(() => ({
+        left: `${left.get()}%`,
+        width: `${width.get()}%`,
+    }));
+
+    const animatedContainerStyle = useAnimatedStyle(() => ({
+        opacity: opacity.get(),
+    }));
+
+    return (
+        <Animated.View style={[styles.progressBarWrapper, animatedContainerStyle]}>
+            <Animated.View style={[styles.progressBar, animatedIndicatorStyle]} />
+        </Animated.View>
+    );
+}
+
+LoadingBar.displayName = 'ProgressBar';
+
+export default LoadingBar;

src/pages/home/ReportScreen.tsx

@@ -11,6 +11,7 @@ import Banner from '@components/Banner';
 import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import DragAndDropProvider from '@components/DragAndDrop/Provider';
 import * as Expensicons from '@components/Icon/Expensicons';
+import LoadingBar from '@components/LoadingBar';
 import MoneyReportHeader from '@components/MoneyReportHeader';
 import MoneyRequestHeader from '@components/MoneyRequestHeader';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
@@ -135,7 +136,7 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro
     const finishedLoadingApp = wasLoadingApp && !isLoadingApp;
     const isDeletedParentAction = ReportActionsUtils.isDeletedParentAction(parentReportAction);
     const prevIsDeletedParentAction = usePrevious(isDeletedParentAction);
-
+    const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA, {initialValue: true});
     const isLoadingReportOnyx = isLoadingOnyxValue(reportResult);
     const permissions = useDeepCompareRef(reportOnyx?.permissions);
 
@@ -768,6 +769,7 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro
                             needsOffscreenAlphaCompositing
                         >
                             {headerView}
+                            {shouldUseNarrowLayout && !!isLoadingReportData && <LoadingBar shouldShow={!!isLoadingReportData} />}
                             {!!report && ReportUtils.isTaskReport(report) && shouldUseNarrowLayout && ReportUtils.isOpenTaskReport(report, parentReportAction) && (
                                 <View style={[styles.borderBottom]}>
                                     <View style={[styles.appBG, styles.pl0]}>

src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.tsx

@@ -1,6 +1,7 @@
 import React, {useEffect} from 'react';
 import {View} from 'react-native';
 import {useOnyx} from 'react-native-onyx';
+import LoadingBar from '@components/LoadingBar';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useActiveWorkspaceFromNavigationState from '@hooks/useActiveWorkspaceFromNavigationState';
 import useLocalize from '@hooks/useLocalize';
@@ -22,7 +23,7 @@ function BaseSidebarScreen() {
     const {translate} = useLocalize();
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const [activeWorkspace] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY}${activeWorkspaceID ?? -1}`);
-
+    const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA, {initialValue: true});
     useEffect(() => {
         Performance.markStart(CONST.TIMING.SIDEBAR_LOADED);
         Timing.start(CONST.TIMING.SIDEBAR_LOADED);
@@ -54,6 +55,7 @@ function BaseSidebarScreen() {
                         activeWorkspaceID={activeWorkspaceID}
                         shouldDisplaySearch={shouldDisplaySearch}
                     />
+                    <LoadingBar shouldShow={isLoadingReportData ?? false} />
                     <View style={[styles.flex1]}>
                         <SidebarLinksData insets={insets} />
                     </View>

src/styles/index.ts

@@ -5321,6 +5321,20 @@ const styles = (theme: ThemeColors) =>
             width: variables.sideBarWidth - 19,
         },
 
+        progressBarWrapper: {
+            height: 2,
+            width: '100%',
+            backgroundColor: theme.border,
+            borderRadius: 2,
+            overflow: 'hidden',
+        },
+
+        progressBar: {
+            height: '100%',
+            backgroundColor: theme.success,
+            width: '100%',
+        },
+
         accountSwitcherAnchorPosition: {
             top: 80,
             left: 12,