Building a highly reusable Loading component.

components/ConfirmBattle.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { Link } from "react-router";
 import styles from "../styles/";
+import Loading from "../components/Loading";
 import MainContainer from "../containers/MainContainer";
 import UserDetails from "../components/UserDetails";
 import UserDetailsWrapper from "../components/UserDetailsWrapper";
@@ -9,7 +10,7 @@ const PropTypes = React.PropTypes;
 
 const ConfirmBattle = (props) => {
   return props.isLoading === true
-    ? <p>LOADING</p>
+    ? <Loading Zspeed={400} Ztext="Hold on a moment" />
     : (
     <MainContainer>
       <h1>Confirm Players</h1>

components/Loading.js

@@ -0,0 +1,74 @@
+import React from "react";
+const PropTypes = React.PropTypes;
+
+var styles = {
+  container: {
+    bottom: 0,
+    fontSize: "55px",
+    left: 0,
+    position: "fixed",
+    right: 0,
+    top: 0
+  },
+
+  content: {
+    marginTop: "30px",
+    position: "absolute",
+    textAlign: "center",
+    width: "100%"
+  }
+};
+
+class Loading extends React.Component {
+  constructor(props, context, updater) {
+    super(props, context, updater);
+    this.originalText = props.text;
+    this.state = {
+      text: this.originalText
+    };
+  }
+
+  componentWillMount() {
+    const stopper = `${this.originalText}...`;
+    this.interval = setInterval(() => {
+      if (this.state.text === stopper) {
+        // Usually: avoid setState in cDM, because it causes a re-render.
+        this.setState({
+          text: this.originalText
+        });
+      }
+      else {
+        this.setState({
+          text: `${this.state.text}.`
+        });
+      }
+    }, this.props.speed);
+    console.log("Loading: cDM", this.interval);
+  }
+
+  componentWillUnmount() {
+    console.log("Loading: cWU", this.interval);
+    clearInterval(this.interval);
+  }
+
+  render() {
+    console.log("Loading: render");
+    return (
+      <div style={styles.container}>
+        <p style={styles.content}>{this.state.text}</p>
+      </div>
+    );
+  }
+}
+
+Loading.defaultProps = {
+  speed: 300,
+  text: "Loading"
+};
+
+Loading.propTypes = {
+  speed: PropTypes.number,
+  text: PropTypes.string
+};
+
+export default Loading;

components/Results.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { Link } from "react-router";
 import styles from "../styles";
+import Loading from "../components/Loading";
 import MainContainer from "../containers/MainContainer";
 import UserDetails from "../components/UserDetails";
 import UserDetailsWrapper from "../components/UserDetailsWrapper";
@@ -18,10 +19,8 @@ const StartOver = () => {
 };
 
 const Results = (props) => {
-  if (props.isLoading) {
-    return (
-      <p> LOADING </p>
-    );
+  if (props.isLoading === true) {
+    return <Loading text="One moment" speed={50} />;
   }
 
   if (props.scores[0] === props.scores[1]) {

components/UserDetails.js

@@ -4,7 +4,7 @@ const PropTypes = React.PropTypes;
 const UserDetails = (user) => {
   return (
     <div>
-      {!user.score && <li className="list-group-item"><h3>Score: {user.score}</h3></li>}
+      {user.score && <li className="list-group-item"><h3>Score: {user.score}</h3></li>}
       <li className="list-group-item"><img src={user.info.avatar_url} className="img-rounded img-responsive" /></li>
       {user.info.name && <li className="list-group-item">Name: {user.info.name}</li>}
       <li className="list-group-item">Username: {user.info.login}</li>