From bd41bdf3cb6bebed4025d577992d91ccd0c0cbe8 Mon Sep 17 00:00:00 2001
From: Evan Hahn <69474926+EvanHahn-Signal@users.noreply.github.com>
Date: Fri, 28 Jan 2022 12:31:20 -0600
Subject: [PATCH] Tweaks to floating date header fading

---
 .../components/TimelineFloatingHeader.scss    |  2 +-
 ts/components/conversation/Timeline.tsx       |  2 +-
 .../conversation/TimelineFloatingHeader.tsx   | 42 ++++++++++++-------
 3 files changed, 28 insertions(+), 18 deletions(-)

diff --git a/stylesheets/components/TimelineFloatingHeader.scss b/stylesheets/components/TimelineFloatingHeader.scss
index 87704b3e973f..8473cb85ab26 100644
--- a/stylesheets/components/TimelineFloatingHeader.scss
+++ b/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 {
diff --git a/ts/components/conversation/Timeline.tsx b/ts/components/conversation/Timeline.tsx
index f85b08e03b93..a6f15ffdc0a1 100644
--- a/ts/components/conversation/Timeline.tsx
+++ b/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();
diff --git a/ts/components/conversation/TimelineFloatingHeader.tsx b/ts/components/conversation/TimelineFloatingHeader.tsx
index 0a2e213cdb80..8aee0e2a1116 100644
--- a/ts/components/conversation/TimelineFloatingHeader.tsx
+++ b/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 => (
-  <div
-    className={classNames(
-      'TimelineFloatingHeader',
-      `TimelineFloatingHeader--${visible ? 'visible' : 'hidden'}`
-    )}
-    style={style}
-  >
-    <TimelineDateHeader floating i18n={i18n} timestamp={timestamp} />
+}>): ReactElement => {
+  const [hasRendered, setHasRendered] = useState(false);
+
+  useEffect(() => {
+    setHasRendered(true);
+  }, []);
+
+  return (
     <div
       className={classNames(
-        'TimelineFloatingHeader__spinner-container',
-        `TimelineFloatingHeader__spinner-container--${
-          isLoading ? 'visible' : 'hidden'
+        'TimelineFloatingHeader',
+        `TimelineFloatingHeader--${
+          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>
-);
+  );
+};