diff --git a/src/components/LoadingBar.tsx b/src/components/LoadingBar.tsx
index e13702517e101..4c523fe43eeb4 100644
--- a/src/components/LoadingBar.tsx
+++ b/src/components/LoadingBar.tsx
@@ -1,5 +1,4 @@
 import React, {useEffect} from 'react';
-import {View} from 'react-native';
 import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import useThemeStyles from '@hooks/useThemeStyles';
 import colors from '@styles/theme/colors';
@@ -47,19 +46,22 @@ function LoadingBar({shouldShow}: LoadingBarProps) {
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, [shouldShow]);
 
+    const wrapperStyle = useAnimatedStyle(() => ({
+        height: withTiming(shouldShow ? 2 : 0, {duration: CONST.TIMING.SKELETON_FADE_DURATION}),
+    }));
+
     const barStyle = useAnimatedStyle(() => ({
         left: `${left.get()}%`,
         width: '30%',
         height: '100%',
         backgroundColor: colors.green,
         opacity: opacity.get(),
-        borderRadius: 2,
     }));
 
     return (
-        <View style={[styles.progressBarWrapper]}>
+        <Animated.View style={[styles.progressBarWrapper, wrapperStyle]}>
             <Animated.View style={barStyle} />
-        </View>
+        </Animated.View>
     );
 }
 
diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx
index 99906a5551d81..133de4b7811f6 100644
--- a/src/pages/home/ReportScreen.tsx
+++ b/src/pages/home/ReportScreen.tsx
@@ -10,6 +10,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';
@@ -682,6 +683,9 @@ function ReportScreen({route, navigation}: ReportScreenProps) {
         return null;
     }
 
+    const {isLoadingInitialReportActions, isLoadingOlderReportActions, isLoadingNewerReportActions} = reportMetadata as OnyxTypes.ReportMetadata;
+    const showLoadingBar = !!isLoadingOlderReportActions || !!isLoadingNewerReportActions || (reportActions.length > 0 && !!isLoadingInitialReportActions);
+
     return (
         <ActionListContext.Provider value={actionListValue}>
             <ReactionListContext.Provider value={reactionListRef}>
@@ -707,8 +711,10 @@ function ReportScreen({route, navigation}: ReportScreenProps) {
                             errors={reportErrors}
                             shouldShowErrorMessages={false}
                             needsOffscreenAlphaCompositing
+                            style={[styles.zIndex10]}
                         >
                             {headerView}
+                            <LoadingBar shouldShow={showLoadingBar} />
                         </OfflineWithFeedback>
                         {!!accountManagerReportID && isConciergeChatReport(report) && isBannerVisible && (
                             <Banner
diff --git a/src/pages/home/report/ReportActionsView.tsx b/src/pages/home/report/ReportActionsView.tsx
index 6bd98e47f8aa5..8ef4fe1033129 100755
--- a/src/pages/home/report/ReportActionsView.tsx
+++ b/src/pages/home/report/ReportActionsView.tsx
@@ -5,7 +5,6 @@ import type {OnyxEntry} from 'react-native-onyx';
 import {useOnyx} from 'react-native-onyx';
 import EmptyStateComponent from '@components/EmptyStateComponent';
 import * as Illustrations from '@components/Icon/Illustrations';
-import LoadingBar from '@components/LoadingBar';
 import ReportActionsSkeletonView from '@components/ReportActionsSkeletonView';
 import SearchRowSkeleton from '@components/Skeletons/SearchRowSkeleton';
 import useCopySelectionHelper from '@hooks/useCopySelectionHelper';
@@ -104,7 +103,7 @@ function ReportActionsView({
     const reportID = report.reportID;
     const isReportFullyVisible = useMemo((): boolean => getIsReportFullyVisible(isFocused), [isFocused]);
 
-    const {isLoadingInitialReportActions, isLoadingOlderReportActions, isLoadingNewerReportActions, hasLoadingNewerReportActionsError} = reportMetadata;
+    const {isLoadingInitialReportActions, hasLoadingNewerReportActionsError} = reportMetadata;
 
     useEffect(() => {
         // When we linked to message - we do not need to wait for initial actions - they already exists
@@ -214,8 +213,6 @@ function ReportActionsView({
         [reportActions, isOffline, canPerformWriteAction],
     );
 
-    const showLoadingBar = !!isLoadingOlderReportActions || !!isLoadingNewerReportActions || !!(visibleReportActions.length > 0 && isLoadingInitialReportActions);
-
     const reportActionIDMap = useMemo(() => {
         const reportActionIDs = allReportActions?.map((action) => action.reportActionID);
         return reportActions.map((action) => ({
@@ -377,7 +374,6 @@ function ReportActionsView({
     const shouldEnableAutoScroll = (hasNewestReportAction && (!reportActionID || !isNavigatingToLinkedMessage)) || (transactionThreadReport && !prevTransactionThreadReport);
     return (
         <>
-            <LoadingBar shouldShow={showLoadingBar} />
             <ReportActionsList
                 report={report}
                 transactionThreadReport={transactionThreadReport}
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 93d84af5e60e0..730c6626f9496 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -5432,8 +5432,13 @@ const styles = (theme: ThemeColors) =>
         },
 
         progressBarWrapper: {
-            height: 2,
             overflow: 'hidden',
+            width: '100%',
+            position: 'absolute',
+            top: 'auto',
+            bottom: -0.5,
+            left: 0,
+            zIndex: 222,
         },
 
         accountSwitcherAnchorPosition: {