Skip to content

Fix: small gap underneath chat report header #58296

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
martasudol wants to merge 9 commits into from
Closed

Fix: small gap underneath chat report header #58296

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
eaac5c7
Fix: small gap underneath chat report header
martasudol Mar 12, 2025
054e438
Fix: small gap underneath chat report header
martasudol Mar 12, 2025
1cf9950
Prettier fix
martasudol Mar 12, 2025
d255b9f
Prettier fix
martasudol Mar 12, 2025
e4f8d0a
Prettier fix
martasudol Mar 12, 2025
170b38a
Prettier fix
martasudol Mar 12, 2025
867cbb0
Prettier fix
martasudol Mar 12, 2025
7a90cb8
Prettier fix
martasudol Mar 12, 2025
b0fe121
Modified rounded edges and position of loading bar
martasudol Mar 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions src/components/LoadingBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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>
);
}

Expand Down
6 changes: 6 additions & 0 deletions src/pages/home/ReportScreen.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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}>
Expand All @@ -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
Expand Down
6 changes: 1 addition & 5 deletions src/pages/home/report/ReportActionsView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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) => ({
Expand Down Expand Up @@ -377,7 +374,6 @@ function ReportActionsView({
const shouldEnableAutoScroll = (hasNewestReportAction && (!reportActionID || !isNavigatingToLinkedMessage)) || (transactionThreadReport && !prevTransactionThreadReport);
return (
<>
<LoadingBar shouldShow={showLoadingBar} />
<ReportActionsList
report={report}
transactionThreadReport={transactionThreadReport}
Expand Down
7 changes: 6 additions & 1 deletion src/styles/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5432,8 +5432,13 @@ const styles = (theme: ThemeColors) =>
},

progressBarWrapper: {
height: 2,
overflow: 'hidden',
width: '100%',
position: 'absolute',
top: 'auto',
bottom: -0.5,
Copy link
Contributor

@shawnborton shawnborton Mar 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry, this should be -1px and not a half pixel value.

Copy link
Contributor Author

@martasudol martasudol Mar 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The chat header has a bottom border with a height of 1px. Therefore, if we want the element to align in the middle of the border, we need to set it to -0.5px. Let me attach screenshots to show the difference.

Copy link
Contributor Author

@martasudol martasudol Mar 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With -0.5px:
Zrzut ekranu 2025-03-13 o 17 23 37

With -1px:
Zrzut ekranu 2025-03-13 o 17 24 12

Copy link
Contributor

@shawnborton shawnborton Mar 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, understood, but I don't think we want the half pixel. I think -1px makes sense but I can't remember what we were doing before. Can you check for us and let us know?

left: 0,
zIndex: 222,
},

accountSwitcherAnchorPosition: {
Expand Down
Loading