From eaac5c7e395464021e75d399464ff9f4757aa95c Mon Sep 17 00:00:00 2001 From: "marta.sudol" 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 e13702517e101..c9a334ade0f00 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 ( - + - + ); } From 054e4385d0cd035f18d7b93f8e2b764ef127ab9b Mon Sep 17 00:00:00 2001 From: "marta.sudol" 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 c9a334ade0f00..504df02af0f49 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 ( - + - + ); } diff --git a/src/styles/index.ts b/src/styles/index.ts index 93d84af5e60e0..5cbf49f3c4fc0 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" 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 504df02af0f49..63cd8d6bf4105 100644 --- a/src/components/LoadingBar.tsx +++ b/src/components/LoadingBar.tsx @@ -57,7 +57,7 @@ function LoadingBar({shouldShow}: LoadingBarProps) { })); return ( - + ); From d255b9f41b1a2a077d0065b847e646a6ea0826f0 Mon Sep 17 00:00:00 2001 From: "marta.sudol" 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 63cd8d6bf4105..6a0804876c3d6 100644 --- a/src/components/LoadingBar.tsx +++ b/src/components/LoadingBar.tsx @@ -57,7 +57,7 @@ function LoadingBar({shouldShow}: LoadingBarProps) { })); return ( - + ); diff --git a/src/styles/index.ts b/src/styles/index.ts index 5cbf49f3c4fc0..f75996312da96 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" 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 6a0804876c3d6..fb2336b9f6e71 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 ( - + - + ); } diff --git a/src/styles/index.ts b/src/styles/index.ts index f75996312da96..5cbf49f3c4fc0 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" 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 fb2336b9f6e71..b96083fa9be74 100644 --- a/src/components/LoadingBar.tsx +++ b/src/components/LoadingBar.tsx @@ -59,7 +59,6 @@ function LoadingBar({shouldShow}: LoadingBarProps) { borderRadius: 2, })); - return ( From 867cbb0421b451734d5fe9852862a75a5c686fdb Mon Sep 17 00:00:00 2001 From: "marta.sudol" 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 b96083fa9be74..9491492619e06 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 5cbf49f3c4fc0..ec250e3a3d53d 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" 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 9491492619e06..b96083fa9be74 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" 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 b96083fa9be74..4c523fe43eeb4 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 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 ( @@ -707,8 +711,10 @@ function ReportScreen({route, navigation}: ReportScreenProps) { errors={reportErrors} shouldShowErrorMessages={false} needsOffscreenAlphaCompositing + style={[styles.zIndex10]} > {headerView} + {!!accountManagerReportID && isConciergeChatReport(report) && isBannerVisible && ( 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 ( <> - overflow: 'hidden', width: '100%', position: 'absolute', - top: 0, + top: 'auto', + bottom: -0.5, left: 0, zIndex: 222, },