20. Loading Component

app/components/Loading.js

@@ -0,0 +1,52 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const styles = {
+  content: {
+    fontSize: '35px',
+    position: 'absolute',
+    left: '0',
+    right: '0',
+    marginTop: '20px',
+    textAlign: 'center',
+  }
+}
+
+export default class Loading extends React.Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      content: props.text
+    }
+  }
+  componentDidMount () {
+    const { speed, text } = this.props
+
+    this.interval = window.setInterval(() => {
+      this.state.content === text + '...'
+        ? this.setState({ content: text })
+        : this.setState(({ content }) => ({ content: content + '.' }))
+    }, speed)
+  }
+  componentWillUnmount () {
+    window.clearInterval(this.interval)
+  }
+  render() {
+    return (
+      <p style={styles.content}>
+        {this.state.content}
+      </p>
+    )
+  }
+}
+
+Loading.propTypes = {
+  text: PropTypes.string.isRequired,
+  speed: PropTypes.number.isRequired,
+}
+
+Loading.defaultProps = {
+  text: 'Loading',
+  speed: 300
+}

app/components/Popular.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types'
 import { fetchPopularRepos } from '../utils/api'
 import { FaUser, FaStar, FaCodeBranch, FaExclamationTriangle } from 'react-icons/fa'
 import Card from './Card'
+import Loading from './Loading'
 
 function LangaugesNav ({ selected, onUpdateLanguage }) {
   const languages = ['All', 'JavaScript', 'Ruby', 'Java', 'CSS', 'Python']
@@ -131,7 +132,7 @@ export default class Popular extends React.Component {
           onUpdateLanguage={this.updateLanguage}
         />
 
-        {this.isLoading() && <p>LOADING</p>}
+        {this.isLoading() && <Loading text='Fetching Repos' />}
 
         {error && <p className='center-text error'>{error}</p>}
 

app/components/Results.js

@@ -3,6 +3,7 @@ import { battle } from '../utils/api'
 import { FaCompass, FaBriefcase, FaUsers, FaUserFriends, FaCode, FaUser } from 'react-icons/fa'
 import Card from './Card'
 import PropTypes from 'prop-types'
+import Loading from './Loading'
 
 function ProfileList ({ profile }) {
   return (
@@ -72,7 +73,7 @@ export default class Results extends React.Component {
     const { winner, loser, error, loading } = this.state
 
     if (loading === true) {
-      return <p>LOADING</p>
+      return <Loading text='Battling' />
     }
 
     if (error) {