Typing Indicators

ts/components/conversation/TypingAnimation.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import { Localizer } from '../../types/Util';
+
+interface Props {
+  i18n: Localizer;
+  color?: string;
+}
+
+export class TypingAnimation extends React.Component<Props> {
+  public render() {
+    const { i18n, color } = this.props;
+
+    return (
+      <div className="module-typing-animation" title={i18n('typingAlt')}>
+        <div
+          className={classNames(
+            'module-typing-animation__dot',
+            'module-typing-animation__dot--first',
+            color ? `module-typing-animation__dot--${color}` : null
+          )}
+        />
+        <div className="module-typing-animation__spacer" />
+        <div
+          className={classNames(
+            'module-typing-animation__dot',
+            'module-typing-animation__dot--second',
+            color ? `module-typing-animation__dot--${color}` : null
+          )}
+        />
+        <div className="module-typing-animation__spacer" />
+        <div
+          className={classNames(
+            'module-typing-animation__dot',
+            'module-typing-animation__dot--third',
+            color ? `module-typing-animation__dot--${color}` : null
+          )}
+        />
+      </div>
+    );
+  }
+}