Web - The horizontal line separating the header and the messages

src/components/ReportActionItem/MoneyReportView.js

@@ -14,6 +14,7 @@ import variables from '../../styles/variables';
 import * as CurrencyUtils from '../../libs/CurrencyUtils';
 import EmptyStateBackgroundImage from '../../../assets/images/empty-state_background-fade.png';
 import useLocalize from '../../hooks/useLocalize';
+import SpacerView from '../SpacerView';
 
 const propTypes = {
     /** The report currently being looked at */
@@ -65,7 +66,10 @@ function MoneyReportView(props) {
                     </Text>
                 </View>
             </View>
-            {props.shouldShowHorizontalRule && <View style={styles.reportHorizontalRule} />}
+            <SpacerView
+                shouldShow={props.shouldShowHorizontalRule}
+                style={[props.shouldShowHorizontalRule ? styles.reportHorizontalRule : {}]}
+            />
         </View>
     );
 }

src/components/ReportActionItem/MoneyRequestView.js

@@ -27,6 +27,7 @@ import Image from '../Image';
 import ReportActionItemImage from './ReportActionItemImage';
 import * as TransactionUtils from '../../libs/TransactionUtils';
 import OfflineWithFeedback from '../OfflineWithFeedback';
+import SpacerView from '../SpacerView';
 
 const propTypes = {
     /** The report currently being looked at */
@@ -165,7 +166,10 @@ function MoneyRequestView({report, parentReport, shouldShowHorizontalRule, trans
                     subtitleTextStyle={styles.textLabelError}
                 />
             </OfflineWithFeedback>
-            {shouldShowHorizontalRule && <View style={styles.reportHorizontalRule} />}
+            <SpacerView
+                shouldShow={shouldShowHorizontalRule}
+                style={[shouldShowHorizontalRule ? styles.reportHorizontalRule : {}]}
+            />
         </View>
     );
 }

src/components/ReportActionItem/TaskView.js

@@ -27,6 +27,7 @@ import getButtonState from '../../libs/getButtonState';
 import PressableWithSecondaryInteraction from '../PressableWithSecondaryInteraction';
 import * as Session from '../../libs/actions/Session';
 import * as Expensicons from '../Icon/Expensicons';
+import SpacerView from '../SpacerView';
 
 const propTypes = {
     /** The report currently being looked at */
@@ -157,7 +158,10 @@ function TaskView(props) {
                     />
                 )}
             </OfflineWithFeedback>
-            {props.shouldShowHorizontalRule && <View style={styles.reportHorizontalRule} />}
+            <SpacerView
+                shouldShow={props.shouldShowHorizontalRule}
+                style={[props.shouldShowHorizontalRule ? styles.reportHorizontalRule : {}]}
+            />
         </View>
     );
 }

src/components/SpacerView.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import Animated, {useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
+import PropTypes from 'prop-types';
+import * as StyleUtils from '../styles/StyleUtils';
+
+const propTypes = {
+    /**
+     * Should we show the spacer
+     */
+    shouldShow: PropTypes.bool.isRequired,
+
+    /**
+     * Array of style objects
+     * @default []
+     */
+    // eslint-disable-next-line react/forbid-prop-types
+    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+};
+
+const defaultProps = {
+    style: [],
+};
+
+function SpacerView({shouldShow, style}) {
+    const marginVertical = useSharedValue(8);
+    const borderBottomWidth = useSharedValue(1);
+    const animatedStyles = useAnimatedStyle(() => ({
+        marginVertical: marginVertical.value,
+        borderBottomWidth: borderBottomWidth.value,
+    }));
+
+    React.useEffect(() => {
+        const duration = 300;
+        const values = {
+            marginVertical: shouldShow ? 8 : 0,
+            borderBottomWidth: shouldShow ? 1 : 0,
+        };
+        marginVertical.value = withTiming(values.marginVertical, {duration});
+        borderBottomWidth.value = withTiming(values.borderBottomWidth, {duration});
+    }, [shouldShow, borderBottomWidth, marginVertical]);
+
+    return <Animated.View style={[animatedStyles, ...StyleUtils.parseStyleAsArray(style)]} />;
+}
+
+SpacerView.displayName = 'SpacerView';
+SpacerView.propTypes = propTypes;
+SpacerView.defaultProps = defaultProps;
+export default SpacerView;

src/pages/home/report/ReportActionsList.js

@@ -109,7 +109,7 @@ function ReportActionsList({
     const {isOffline} = useNetwork();
     const opacity = useSharedValue(0);
     const userActiveSince = useRef(null);
-    const currentUnreadMarker = useRef(null);
+    const [currentUnreadMarker, setCurrentUnreadMarker] = useState(null);
     const scrollingVerticalOffset = useRef(0);
     const readActionSkipped = useRef(false);
     const reportActionSize = useRef(sortedReportActions.length);
@@ -152,12 +152,12 @@ function ReportActionsList({
             }
         }
 
-        if (currentUnreadMarker.current || reportActionSize.current === sortedReportActions.length) {
+        if (currentUnreadMarker || reportActionSize.current === sortedReportActions.length) {
             return;
         }
 
         reportActionSize.current = sortedReportActions.length;
-        currentUnreadMarker.current = null;
+        setCurrentUnreadMarker(null);
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [sortedReportActions.length, report.reportID]);
 
@@ -169,7 +169,7 @@ function ReportActionsList({
         }
 
         // Clearing the current unread marker so that it can be recalculated
-        currentUnreadMarker.current = null;
+        setCurrentUnreadMarker(null);
         setMessageManuallyMarked({read: true});
 
         // We only care when a new lastReadTime is set in the report
@@ -180,7 +180,7 @@ function ReportActionsList({
      * Show/hide the new floating message counter when user is scrolling back/forth in the history of messages.
      */
     const handleUnreadFloatingButton = () => {
-        if (scrollingVerticalOffset.current > VERTICAL_OFFSET_THRESHOLD && !isFloatingMessageCounterVisible && !!currentUnreadMarker.current) {
+        if (scrollingVerticalOffset.current > VERTICAL_OFFSET_THRESHOLD && !isFloatingMessageCounterVisible && !!currentUnreadMarker) {
             setIsFloatingMessageCounterVisible(true);
         }
 
@@ -216,6 +216,15 @@ function ReportActionsList({
         return Math.ceil(availableHeight / minimumReportActionHeight);
     }, [windowHeight]);
 
+    /**
+     * Thread's divider line should hide when the first chat in the thread is marked as unread.
+     * This is so that it will not be conflicting with header's separator line.
+     */
+    const shouldHideThreadDividerLine = useMemo(
+        () => sortedReportActions.length > 1 && sortedReportActions[sortedReportActions.length - 2].reportActionID === currentUnreadMarker,
+        [sortedReportActions, currentUnreadMarker],
+    );
+
     /**
      * @param {Object} args
      * @param {Number} args.index
@@ -225,7 +234,7 @@ function ReportActionsList({
         ({item: reportAction, index}) => {
             let shouldDisplayNewMarker = false;
 
-            if (!currentUnreadMarker.current) {
+            if (!currentUnreadMarker) {
                 const nextMessage = sortedReportActions[index + 1];
                 const isCurrentMessageUnread = isMessageUnread(reportAction, report.lastReadTime);
                 shouldDisplayNewMarker = isCurrentMessageUnread && !isMessageUnread(nextMessage, report.lastReadTime);
@@ -235,18 +244,17 @@ function ReportActionsList({
                 }
                 const canDisplayMarker = scrollingVerticalOffset.current < MSG_VISIBLE_THRESHOLD ? reportAction.created < userActiveSince.current : true;
 
-                if (!currentUnreadMarker.current && shouldDisplayNewMarker && canDisplayMarker) {
-                    currentUnreadMarker.current = reportAction.reportActionID;
+                if (!currentUnreadMarker && shouldDisplayNewMarker && canDisplayMarker) {
+                    setCurrentUnreadMarker(reportAction.reportActionID);
                 }
             } else {
-                shouldDisplayNewMarker = reportAction.reportActionID === currentUnreadMarker.current;
+                shouldDisplayNewMarker = reportAction.reportActionID === currentUnreadMarker;
             }
 
             const shouldDisplayParentAction =
                 reportAction.actionName === CONST.REPORT.ACTIONS.TYPE.CREATED &&
                 ReportUtils.isChatThread(report) &&
                 !ReportActionsUtils.isTransactionThread(ReportActionsUtils.getParentReportAction(report));
-            const shouldHideThreadDividerLine = sortedReportActions.length > 1 && sortedReportActions[sortedReportActions.length - 2].reportActionID === currentUnreadMarker.current;
 
             return shouldDisplayParentAction ? (
                 <ReportActionItemParentAction
@@ -272,19 +280,19 @@ function ReportActionsList({
                 />
             );
         },
-        [report, hasOutstandingIOU, sortedReportActions, mostRecentIOUReportActionID, messageManuallyMarked],
+        [report, hasOutstandingIOU, sortedReportActions, mostRecentIOUReportActionID, messageManuallyMarked, shouldHideThreadDividerLine, currentUnreadMarker],
     );
 
     // Native mobile does not render updates flatlist the changes even though component did update called.
     // To notify there something changes we can use extraData prop to flatlist
-    const extraData = [isSmallScreenWidth ? currentUnreadMarker.current : undefined, ReportUtils.isArchivedRoom(report)];
+    const extraData = [isSmallScreenWidth ? currentUnreadMarker : undefined, ReportUtils.isArchivedRoom(report)];
     const hideComposer = ReportUtils.shouldDisableWriteActions(report);
     const shouldShowReportRecipientLocalTime = ReportUtils.canShowReportRecipientLocalTime(personalDetailsList, report, currentUserPersonalDetails.accountID) && !isComposerFullSize;
 
     return (
         <>
             <FloatingMessageCounter
-                isActive={isFloatingMessageCounterVisible && !!currentUnreadMarker.current}
+                isActive={isFloatingMessageCounterVisible && !!currentUnreadMarker}
                 onClick={scrollToBottomAndMarkReportAsRead}
             />
             <Animated.View style={[animatedStyles, styles.flex1, !shouldShowReportRecipientLocalTime && !hideComposer ? styles.pb4 : {}]}>

src/styles/styles.js

@@ -3606,10 +3606,8 @@ const styles = (theme) => ({
     },
 
     reportHorizontalRule: {
-        borderBottomWidth: 1,
         borderColor: theme.border,
         ...spacing.mh5,
-        ...spacing.mv2,
     },
 
     assigneeTextStyle: {