Timeline date headers

ts/components/conversation/TimelineFloatingHeader.tsx

@@ -0,0 +1,43 @@
+// Copyright 2022 Signal Messenger, LLC
+// SPDX-License-Identifier: AGPL-3.0-only
+
+import classNames from 'classnames';
+import type { CSSProperties, ReactElement } from 'react';
+import React from 'react';
+import type { LocalizerType } from '../../types/Util';
+import { TimelineDateHeader } from './TimelineDateHeader';
+import { Spinner } from '../Spinner';
+
+export const TimelineFloatingHeader = ({
+  i18n,
+  isLoading,
+  style,
+  timestamp,
+  visible,
+}: Readonly<{
+  i18n: LocalizerType;
+  isLoading: boolean;
+  style?: CSSProperties;
+  timestamp: number;
+  visible: boolean;
+}>): ReactElement => (
+  <div
+    className={classNames(
+      'TimelineFloatingHeader',
+      `TimelineFloatingHeader--${visible ? 'visible' : 'hidden'}`
+    )}
+    style={style}
+  >
+    <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>
+);