session-desktop/ts/components/conversation/TypingAnimation.tsx

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>
    );
  }
}