From eaac5c7e395464021e75d399464ff9f4757aa95c Mon Sep 17 00:00:00 2001
From: "marta.sudol" <msudol8@gmail.com>
Date: Wed, 12 Mar 2025 16:20:54 +0100
Subject: [PATCH 1/9] Fix: small gap underneath chat report header

---
 src/components/LoadingBar.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/LoadingBar.tsx b/src/components/LoadingBar.tsx
index e13702517e10..c9a334ade0f0 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';
@@ -11,6 +10,7 @@ type LoadingBarProps = {
 };
 
 function LoadingBar({shouldShow}: LoadingBarProps) {
+    const height = useSharedValue(0);
     const left = useSharedValue(-30);
     const opacity = useSharedValue(0);
     const isAnimating = useSharedValue(false);
@@ -20,6 +20,7 @@ function LoadingBar({shouldShow}: LoadingBarProps) {
         if (shouldShow && !isAnimating.get()) {
             isAnimating.set(true);
             opacity.set(withTiming(1, {duration: CONST.TIMING.SKELETON_FADE_DURATION}));
+            height.set(2);
 
             left.set(
                 withTiming(100, {duration: CONST.TIMING.SKELETON_SLIDE_DURATION}, () => {
@@ -43,10 +44,15 @@ function LoadingBar({shouldShow}: LoadingBarProps) {
                     isAnimating.set(false);
                 }),
             );
+            height.set(0);
         }
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, [shouldShow]);
 
+    const progressBarWrapperStyle = useAnimatedStyle(() => ({
+        height: height.get()
+    }));
+
     const barStyle = useAnimatedStyle(() => ({
         left: `${left.get()}%`,
         width: '30%',
@@ -57,9 +63,9 @@ function LoadingBar({shouldShow}: LoadingBarProps) {
     }));
 
     return (
-        <View style={[styles.progressBarWrapper]}>
+        <Animated.View style={[styles.progressBarWrapper, progressBarWrapperStyle]}>
             <Animated.View style={barStyle} />
-        </View>
+        </Animated.View>
     );
 }
 

From 054e4385d0cd035f18d7b93f8e2b764ef127ab9b Mon Sep 17 00:00:00 2001
From: "marta.sudol" <msudol8@gmail.com>
Date: Wed, 12 Mar 2025 16:36:01 +0100
Subject: [PATCH 2/9] Fix: small gap underneath chat report header

---
 src/components/LoadingBar.tsx | 12 +++---------
 src/styles/index.ts           |  1 -
 2 files changed, 3 insertions(+), 10 deletions(-)

diff --git a/src/components/LoadingBar.tsx b/src/components/LoadingBar.tsx
index c9a334ade0f0..504df02af0f4 100644
--- a/src/components/LoadingBar.tsx
+++ b/src/components/LoadingBar.tsx
@@ -1,4 +1,5 @@
 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';
@@ -10,7 +11,6 @@ type LoadingBarProps = {
 };
 
 function LoadingBar({shouldShow}: LoadingBarProps) {
-    const height = useSharedValue(0);
     const left = useSharedValue(-30);
     const opacity = useSharedValue(0);
     const isAnimating = useSharedValue(false);
@@ -20,7 +20,6 @@ function LoadingBar({shouldShow}: LoadingBarProps) {
         if (shouldShow && !isAnimating.get()) {
             isAnimating.set(true);
             opacity.set(withTiming(1, {duration: CONST.TIMING.SKELETON_FADE_DURATION}));
-            height.set(2);
 
             left.set(
                 withTiming(100, {duration: CONST.TIMING.SKELETON_SLIDE_DURATION}, () => {
@@ -44,15 +43,10 @@ function LoadingBar({shouldShow}: LoadingBarProps) {
                     isAnimating.set(false);
                 }),
             );
-            height.set(0);
         }
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, [shouldShow]);
 
-    const progressBarWrapperStyle = useAnimatedStyle(() => ({
-        height: height.get()
-    }));
-
     const barStyle = useAnimatedStyle(() => ({
         left: `${left.get()}%`,
         width: '30%',
@@ -63,9 +57,9 @@ function LoadingBar({shouldShow}: LoadingBarProps) {
     }));
 
     return (
-        <Animated.View style={[styles.progressBarWrapper, progressBarWrapperStyle]}>
+        <View style={[styles.progressBarWrapper, { height: shouldShow ? 2 : 0 }]}>
             <Animated.View style={barStyle} />
-        </Animated.View>
+        </View>
     );
 }
 
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 93d84af5e60e..5cbf49f3c4fc 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -5432,7 +5432,6 @@ const styles = (theme: ThemeColors) =>
         },
 
         progressBarWrapper: {
-            height: 2,
             overflow: 'hidden',
         },
 

From 1cf99502d5cae86a285593ae65af7899f27665cd Mon Sep 17 00:00:00 2001
From: "marta.sudol" <msudol8@gmail.com>
Date: Wed, 12 Mar 2025 16:43:33 +0100
Subject: [PATCH 3/9] Prettier fix

---
 src/components/LoadingBar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/LoadingBar.tsx b/src/components/LoadingBar.tsx
index 504df02af0f4..63cd8d6bf410 100644
--- a/src/components/LoadingBar.tsx
+++ b/src/components/LoadingBar.tsx
@@ -57,7 +57,7 @@ function LoadingBar({shouldShow}: LoadingBarProps) {
     }));
 
     return (
-        <View style={[styles.progressBarWrapper, { height: shouldShow ? 2 : 0 }]}>
+        <View style={[styles.progressBarWrapper, {height: shouldShow ? 2 : 0}]}>
             <Animated.View style={barStyle} />
         </View>
     );

From d255b9f41b1a2a077d0065b847e646a6ea0826f0 Mon Sep 17 00:00:00 2001
From: "marta.sudol" <msudol8@gmail.com>
Date: Wed, 12 Mar 2025 17:12:57 +0100
Subject: [PATCH 4/9] Prettier fix

---
 src/components/LoadingBar.tsx | 2 +-
 src/styles/index.ts           | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/LoadingBar.tsx b/src/components/LoadingBar.tsx
index 63cd8d6bf410..6a0804876c3d 100644
--- a/src/components/LoadingBar.tsx
+++ b/src/components/LoadingBar.tsx
@@ -57,7 +57,7 @@ function LoadingBar({shouldShow}: LoadingBarProps) {
     }));
 
     return (
-        <View style={[styles.progressBarWrapper, {height: shouldShow ? 2 : 0}]}>
+        <View style={[styles.progressBarWrapper, {opacity: shouldShow ? 1 : 0}]}>
             <Animated.View style={barStyle} />
         </View>
     );
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 5cbf49f3c4fc..f75996312da9 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -5432,7 +5432,13 @@ const styles = (theme: ThemeColors) =>
         },
 
         progressBarWrapper: {
+            height: 2,
             overflow: 'hidden',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            zIndex: 2,
         },
 
         accountSwitcherAnchorPosition: {

From e4f8d0ab4cfe57ddf5d6901a23685b8cfe1de5f1 Mon Sep 17 00:00:00 2001
From: "marta.sudol" <msudol8@gmail.com>
Date: Wed, 12 Mar 2025 17:37:25 +0100
Subject: [PATCH 5/9] Prettier fix

---
 src/components/LoadingBar.tsx | 10 +++++++---
 src/styles/index.ts           |  6 ------
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/LoadingBar.tsx b/src/components/LoadingBar.tsx
index 6a0804876c3d..fb2336b9f6e7 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,6 +46,10 @@ 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%',
@@ -56,10 +59,11 @@ function LoadingBar({shouldShow}: LoadingBarProps) {
         borderRadius: 2,
     }));
 
+
     return (
-        <View style={[styles.progressBarWrapper, {opacity: shouldShow ? 1 : 0}]}>
+        <Animated.View style={[styles.progressBarWrapper, wrapperStyle]}>
             <Animated.View style={barStyle} />
-        </View>
+        </Animated.View>
     );
 }
 
diff --git a/src/styles/index.ts b/src/styles/index.ts
index f75996312da9..5cbf49f3c4fc 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -5432,13 +5432,7 @@ const styles = (theme: ThemeColors) =>
         },
 
         progressBarWrapper: {
-            height: 2,
             overflow: 'hidden',
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            right: 0,
-            zIndex: 2,
         },
 
         accountSwitcherAnchorPosition: {

From 170b38a5a3687fbdabbb55a7fe0d8138fae5d351 Mon Sep 17 00:00:00 2001
From: "marta.sudol" <msudol8@gmail.com>
Date: Wed, 12 Mar 2025 17:45:13 +0100
Subject: [PATCH 6/9] Prettier fix

---
 src/components/LoadingBar.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/LoadingBar.tsx b/src/components/LoadingBar.tsx
index fb2336b9f6e7..b96083fa9be7 100644
--- a/src/components/LoadingBar.tsx
+++ b/src/components/LoadingBar.tsx
@@ -59,7 +59,6 @@ function LoadingBar({shouldShow}: LoadingBarProps) {
         borderRadius: 2,
     }));
 
-
     return (
         <Animated.View style={[styles.progressBarWrapper, wrapperStyle]}>
             <Animated.View style={barStyle} />

From 867cbb0421b451734d5fe9852862a75a5c686fdb Mon Sep 17 00:00:00 2001
From: "marta.sudol" <msudol8@gmail.com>
Date: Wed, 12 Mar 2025 18:20:16 +0100
Subject: [PATCH 7/9] Prettier fix

---
 src/components/LoadingBar.tsx | 6 +++---
 src/styles/index.ts           | 5 +++++
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/components/LoadingBar.tsx b/src/components/LoadingBar.tsx
index b96083fa9be7..9491492619e0 100644
--- a/src/components/LoadingBar.tsx
+++ b/src/components/LoadingBar.tsx
@@ -1,5 +1,5 @@
-import React, {useEffect} from 'react';
-import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
+import React, { useEffect } from 'react';
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
 import useThemeStyles from '@hooks/useThemeStyles';
 import colors from '@styles/theme/colors';
 import CONST from '@src/CONST';
@@ -47,7 +47,7 @@ function LoadingBar({shouldShow}: LoadingBarProps) {
     }, [shouldShow]);
 
     const wrapperStyle = useAnimatedStyle(() => ({
-        height: withTiming(shouldShow ? 2 : 0, {duration: CONST.TIMING.SKELETON_FADE_DURATION}),
+        height: withTiming(shouldShow ? 2 : 0, { duration: CONST.TIMING.SKELETON_FADE_DURATION }), // Płynna zmiana wysokości
     }));
 
     const barStyle = useAnimatedStyle(() => ({
diff --git a/src/styles/index.ts b/src/styles/index.ts
index 5cbf49f3c4fc..ec250e3a3d53 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -5433,6 +5433,11 @@ const styles = (theme: ThemeColors) =>
 
         progressBarWrapper: {
             overflow: 'hidden',
+            width: '100%',
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            zIndex: 222,
         },
 
         accountSwitcherAnchorPosition: {

From 7a90cb830953b58e5627ad0f3d7164de22177462 Mon Sep 17 00:00:00 2001
From: "marta.sudol" <msudol8@gmail.com>
Date: Wed, 12 Mar 2025 18:24:01 +0100
Subject: [PATCH 8/9] Prettier fix

---
 src/components/LoadingBar.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/LoadingBar.tsx b/src/components/LoadingBar.tsx
index 9491492619e0..b96083fa9be7 100644
--- a/src/components/LoadingBar.tsx
+++ b/src/components/LoadingBar.tsx
@@ -1,5 +1,5 @@
-import React, { useEffect } from 'react';
-import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-native-reanimated';
+import React, {useEffect} from 'react';
+import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
 import useThemeStyles from '@hooks/useThemeStyles';
 import colors from '@styles/theme/colors';
 import CONST from '@src/CONST';
@@ -47,7 +47,7 @@ function LoadingBar({shouldShow}: LoadingBarProps) {
     }, [shouldShow]);
 
     const wrapperStyle = useAnimatedStyle(() => ({
-        height: withTiming(shouldShow ? 2 : 0, { duration: CONST.TIMING.SKELETON_FADE_DURATION }), // Płynna zmiana wysokości
+        height: withTiming(shouldShow ? 2 : 0, {duration: CONST.TIMING.SKELETON_FADE_DURATION}),
     }));
 
     const barStyle = useAnimatedStyle(() => ({

From b0fe12116163e7a89208bd519039072e6f0ce347 Mon Sep 17 00:00:00 2001
From: "marta.sudol" <msudol8@gmail.com>
Date: Thu, 13 Mar 2025 13:13:06 +0100
Subject: [PATCH 9/9] Modified rounded edges and position of loading bar

---
 src/components/LoadingBar.tsx               | 1 -
 src/pages/home/ReportScreen.tsx             | 6 ++++++
 src/pages/home/report/ReportActionsView.tsx | 6 +-----
 src/styles/index.ts                         | 3 ++-
 4 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/components/LoadingBar.tsx b/src/components/LoadingBar.tsx
index b96083fa9be7..4c523fe43eeb 100644
--- a/src/components/LoadingBar.tsx
+++ b/src/components/LoadingBar.tsx
@@ -56,7 +56,6 @@ function LoadingBar({shouldShow}: LoadingBarProps) {
         height: '100%',
         backgroundColor: colors.green,
         opacity: opacity.get(),
-        borderRadius: 2,
     }));
 
     return (
diff --git a/src/pages/home/ReportScreen.tsx b/src/pages/home/ReportScreen.tsx
index 99906a5551d8..133de4b7811f 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 6bd98e47f8aa..8ef4fe103312 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 ec250e3a3d53..730c6626f949 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -5435,7 +5435,8 @@ const styles = (theme: ThemeColors) =>
             overflow: 'hidden',
             width: '100%',
             position: 'absolute',
-            top: 0,
+            top: 'auto',
+            bottom: -0.5,
             left: 0,
             zIndex: 222,
         },
