reuse EllipsisLoading component (#70)

Author: Peter Bengtsson

src/Common.js

@@ -0,0 +1,24 @@
+import React from 'react';
+
+export class EllipsisLoading extends React.PureComponent {
+  state = { dots: 0 };
+  static defaultProps = {
+    text: 'Loading',
+    animationMs: 400,
+    maxDots: 5
+  };
+  componentDidMount() {
+    this.interval = window.setInterval(() => {
+      this.setState(state => {
+        return { dots: (state.dots + 1) % this.props.maxDots };
+      });
+    }, this.props.animationMs);
+  }
+  componentWillUnmount() {
+    window.clearInterval(this.interval);
+  }
+  render() {
+    let dots = '.'.repeat(this.state.dots + 1);
+    return `${this.props.text}${dots}`;
+  }
+}

src/DeployPage.js

@@ -7,6 +7,7 @@ import classNames from 'classnames';
 import AutoProgressBar from './AutoProgressBar';
 import shortUrls from './shortUrls';
 import { withRouter } from './Routes';
+import { EllipsisLoading } from './Common';
 
 const BORS_LOGIN = 'bors[bot]';
 
@@ -561,7 +562,7 @@ class Culprits extends React.PureComponent {
       <>
         <h3 className="page-header culprits">Culprits</h3>
         {error && <div className="alert alert-danger">{error.toString()}</div>}
-        {loading && 'loading culprits...'}
+        {loading && <EllipsisLoading text="loading culprits" />}
         {culprits && (
           <div className="culprits">
             {culprits.map(group => (

src/SetupPage.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { withRouter, Link } from 'react-router-dom';
 
 import shortUrls from './shortUrls';
+import { EllipsisLoading } from './Common';
 
 export default class SetupPage extends React.Component {
   render() {
@@ -187,29 +188,6 @@ class PreviousEnvironments extends React.Component {
   }
 }
 
-class EllipsisLoading extends React.PureComponent {
-  state = { dots: 0 };
-  static defaultProps = {
-    text: 'Loading',
-    animationMs: 400,
-    maxDots: 5
-  };
-  componentDidMount() {
-    this.interval = window.setInterval(() => {
-      this.setState(state => {
-        return { dots: (state.dots + 1) % this.props.maxDots };
-      });
-    }, this.props.animationMs);
-  }
-  componentWillUnmount() {
-    window.clearInterval(this.interval);
-  }
-  render() {
-    let dots = '.'.repeat(this.state.dots + 1);
-    return `${this.props.text}${dots}`;
-  }
-}
-
 class WhatIsIt extends React.Component {
   render() {
     return (