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,24 +20,34 @@ export const TimelineFloatingHeader = ({
   style?: CSSProperties;
   timestamp: number;
   visible: boolean;
-}>): ReactElement => (
+}>): ReactElement => {
-  <div
+  const [hasRendered, setHasRendered] = useState(false);
-    className={classNames(
+
-      'TimelineFloatingHeader',
+  useEffect(() => {
-      `TimelineFloatingHeader--${visible ? 'visible' : 'hidden'}`
+    setHasRendered(true);
-    )}
+  }, []);
-    style={style}
+
-  >
+  return (
-    <TimelineDateHeader floating i18n={i18n} timestamp={timestamp} />
     <div
       className={classNames(
-        'TimelineFloatingHeader__spinner-container',
+        'TimelineFloatingHeader',
-        `TimelineFloatingHeader__spinner-container--${
+        `TimelineFloatingHeader--${
-          isLoading ? 'visible' : 'hidden'
+          visible && hasRendered ? 'visible' : 'hidden'
         }`
       )}
+      style={style}
     >
-      <Spinner direction="on-background" size="20px" svgSize="small" />
+      <TimelineDateHeader floating i18n={i18n} timestamp={timestamp} />
+      <div
+        className={classNames(
+          'TimelineFloatingHeader__spinner-container',
+          `TimelineFloatingHeader__spinner-container--${
+            isLoading ? 'visible' : 'hidden'
+          }`
+        )}
+      >
+        <Spinner direction="on-background" size="20px" svgSize="small" />
+      </div>
     </div>
-  </div>
+  );
-);
+};