A typing indicator with spinner animation using RxJS in React.

UserIsTypingIndicator.js

import React from "react";
import styled, { keyframes } from "styled-components";
import { Subject } from "rxjs/Subject";
import "rxjs/add/operator/do"
import "rxjs/add/operator/debounceTime"

const rotate360 = keyframes`
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
`;

const Spinner = styled.div`
  animation: ${rotate360} 1s linear infinite;
  animation-play-state: ${p => p.pause ? "paused" : "running"};
  transform: translateZ(0);
  
  border-top: 2px solid grey;
  border-right: 2px solid grey;
  border-bottom: 2px solid grey;
  border-left: 4px solid black;

  background: transparent;

  width: 24px;
  height: 24px;
  border-radius: 50%;
  margin: 12px;
`;

const Container = styled.div`
  position: absolute;
  bottom: 24px;
  left: 24px;
  display: flex;
  align-items: center;
`;

export default class TypingIndicator extends React.Component {
  state = { typing: false };

  componentDidMount() {
    this.input$ = new Subject();
    this.input$
      .do(() => this.setState({ typing: true }))
      .debounceTime(1000)
      .subscribe(() => this.setState({ typing: false }));
  }
  componentDidUpdate(prevProps) {
    if (prevProps.content.length !== this.props.content.length) {
      this.input$.next();
    }
  }
  componentWillUnmount() {
    this.input$.unsubscribe();
  }
  render() {
    return (
      <Container>
        <Spinner pause={!this.state.typing} />
        {this.state.typing ? "Typing..." : ""}
      </Container>
    );
  }
}