Feature: add loading indicator when ReconnectApp is running

src/components/ProgressBar.tsx

@@ -0,0 +1,78 @@
+import React, {useEffect} from 'react';
+import Animated, {cancelAnimation, Easing, runOnJS, useAnimatedStyle, useSharedValue, withDelay, withRepeat, withSequence, withTiming} from 'react-native-reanimated';
+import useThemeStyles from '@hooks/useThemeStyles';
+
+function ProgressBar({shouldShow}: {shouldShow: boolean}) {
+    const left = useSharedValue(0);
+    const width = useSharedValue(0);
+    const opacity = useSharedValue(0);
+    const isVisible = useSharedValue(false);
+    const styles = useThemeStyles();
+
+    useEffect(() => {
+        if (shouldShow) {
+            // eslint-disable-next-line react-compiler/react-compiler
+            isVisible.value = true;
+            left.value = 0;
+            width.value = 0;
+            opacity.value = withTiming(1, {duration: 300});
+            left.value = withDelay(
+                300, // 0.3s delay
+                withRepeat(
+                    withSequence(
+                        withTiming(0, {duration: 0}),
+                        withTiming(0, {duration: 750, easing: Easing.bezier(0.65, 0, 0.35, 1)}),
+                        withTiming(100, {duration: 750, easing: Easing.bezier(0.65, 0, 0.35, 1)}),
+                    ),
+                    -1,
+                    false,
+                ),
+            );
+
+            width.value = withDelay(
+                300, // 0.3s delay
+                withRepeat(
+                    withSequence(
+                        withTiming(0, {duration: 0}),
+                        withTiming(100, {duration: 750, easing: Easing.bezier(0.65, 0, 0.35, 1)}),
+                        withTiming(0, {duration: 750, easing: Easing.bezier(0.65, 0, 0.35, 1)}),
+                    ),
+                    -1,
+                    false,
+                ),
+            );
+        } else if (isVisible.value) {
+            opacity.value = withTiming(0, {duration: 300}, () => {
+                runOnJS(() => {
+                    isVisible.value = false;
+                    cancelAnimation(left);
+                    cancelAnimation(width);
+                });
+            });
+        }
+        // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
+    }, [shouldShow]);
+
+    const animatedIndicatorStyle = useAnimatedStyle(() => {
+        return {
+            left: `${left.value}%`,
+            width: `${width.value}%`,
+        };
+    });
+
+    const animatedContainerStyle = useAnimatedStyle(() => {
+        return {
+            opacity: opacity.value,
+        };
+    });
+
+    return isVisible.value ? (
+        <Animated.View style={[styles.progressBarWrapper, animatedContainerStyle]}>
+            <Animated.View style={[styles.progressBar, animatedIndicatorStyle]} />
+        </Animated.View>
+    ) : null;
+}
+
+ProgressBar.displayName = 'ProgressBar';
+
+export default ProgressBar;

src/pages/home/ReportScreen.tsx

@@ -13,6 +13,7 @@ import DragAndDropProvider from '@components/DragAndDrop/Provider';
 import MoneyReportHeader from '@components/MoneyReportHeader';
 import MoneyRequestHeader from '@components/MoneyRequestHeader';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
+import ProgressBar from '@components/ProgressBar';
 import ReportActionsSkeletonView from '@components/ReportActionsSkeletonView';
 import ScreenWrapper from '@components/ScreenWrapper';
 import TaskHeaderActionButton from '@components/TaskHeaderActionButton';
@@ -128,6 +129,7 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro
     const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP);
     const [workspaceTooltip] = useOnyx(ONYXKEYS.NVP_WORKSPACE_TOOLTIP);
     const wasLoadingApp = usePrevious(isLoadingApp);
+    const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA, {initialValue: true});
     const finishedLoadingApp = wasLoadingApp && !isLoadingApp;
     const isDeletedParentAction = ReportActionsUtils.isDeletedParentAction(parentReportAction);
     const prevIsDeletedParentAction = usePrevious(isDeletedParentAction);
@@ -756,6 +758,7 @@ function ReportScreen({route, currentReportID = '', navigation}: ReportScreenPro
                             needsOffscreenAlphaCompositing
                         >
                             {headerView}
+                            {shouldUseNarrowLayout && <ProgressBar shouldShow={isLoadingReportData ?? false} />}
                             {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 ProgressBar from '@components/ProgressBar';
 import ScreenWrapper from '@components/ScreenWrapper';
 import useActiveWorkspaceFromNavigationState from '@hooks/useActiveWorkspaceFromNavigationState';
 import useLocalize from '@hooks/useLocalize';
@@ -29,6 +30,8 @@ function BaseSidebarScreen() {
     const {translate} = useLocalize();
     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);
@@ -57,6 +60,7 @@ function BaseSidebarScreen() {
                         breadcrumbLabel={translate('common.inbox')}
                         activeWorkspaceID={activeWorkspaceID}
                     />
+                    <ProgressBar shouldShow={isLoadingReportData ?? false} />
                     <View style={[styles.flex1]}>
                         <SidebarLinksData
                             onLinkClick={startTimer}

src/styles/index.ts

@@ -5199,6 +5199,19 @@ const styles = (theme: ThemeColors) =>
             top: 80,
             left: 12,
         },
+        progressBarWrapper: {
+            height: 2,
+            width: '100%',
+            backgroundColor: theme.border,
+            borderRadius: 5,
+            overflow: 'hidden',
+        },
+        progressBar: {
+            height: '100%',
+            backgroundColor: theme.success,
+            borderRadius: 5,
+            width: '100%',
+        },
     } satisfies Styles);
 
 type ThemeStyles = ReturnType<typeof styles>;