Tweaks to floating date header fading

stylesheets/components/TimelineFloatingHeader.scss

@@ -9,6 +9,7 @@
   pointer-events: none;
   position: absolute;
   top: 10px;
+  transition: opacity 0.25s ease-out;
   width: 100%;
   z-index: $z-index-above-base;
 
@@ -18,7 +19,6 @@
 
   &--hidden {
     opacity: 0;
-    transition: opacity 0.25s ease-out;
   }
 
   &__spinner-container {

ts/components/conversation/Timeline.tsx

@@ -501,7 +501,7 @@ export class Timeline extends React.PureComponent<PropsType, StateType> {
     }
     this.hasRecentlyScrolledTimeout = setTimeout(() => {
       this.setState({ hasRecentlyScrolled: false });
-    }, 1000);
+    }, 3000);
 
     this.updateScrollMetrics(data);
     this.updateWithVisibleRows();

ts/components/conversation/TimelineFloatingHeader.tsx

@@ -3,7 +3,7 @@
 
 import classNames from 'classnames';
 import type { CSSProperties, ReactElement } from 'react';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import type { LocalizerType } from '../../types/Util';
 import { TimelineDateHeader } from './TimelineDateHeader';
 import { Spinner } from '../Spinner';
@@ -20,11 +20,20 @@ export const TimelineFloatingHeader = ({
   style?: CSSProperties;
   timestamp: number;
   visible: boolean;
-}>): ReactElement => (
+}>): ReactElement => {
+  const [hasRendered, setHasRendered] = useState(false);
+
+  useEffect(() => {
+    setHasRendered(true);
+  }, []);
+
+  return (
     <div
       className={classNames(
         'TimelineFloatingHeader',
-      `TimelineFloatingHeader--${visible ? 'visible' : 'hidden'}`
+        `TimelineFloatingHeader--${
+          visible && hasRendered ? 'visible' : 'hidden'
+        }`
       )}
       style={style}
     >
@@ -41,3 +50,4 @@ export const TimelineFloatingHeader = ({
       </div>
     </div>
   );
+};