added loading icon with material-ui

Author: saadazghour

.gitignore

@@ -21,7 +21,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-debug.log
-
-Screenshot.PNG
-src/README.md
+debug.log

ScreenShoot.png

@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import CircularProgress from '@material-ui/core/CircularProgress';
+
+
+const styles = theme => ({
+  progress: {
+    margin: theme.spacing.unit * 2,
+  },
+});
+
+
+const Loading = ({
+  classes,
+
+}) => {
+
+  return (
+    <div style={{ textAlign: "center" }}>
+      <CircularProgress
+        color="secondary"
+        className={classes.progress}
+      />
+    </div>
+  );
+}
+
+
+Loading.propTypes = {
+  classes: PropTypes.object.isRequired,
+};
+
+
+export default withStyles(styles)(Loading);

src/Components/Loading.js

@@ -2,6 +2,7 @@
 // import './App.css';
 import React, { Component } from 'react';
 import RepoList from '../Components/RepoList';
+import Loading from '../Components/Loading';
 // import Repo from '../Components/Repo';
 import axios from 'axios';
 import moment from 'moment';
@@ -80,7 +81,6 @@ class App extends Component {
         page: prevState.page + page,
         loading: true,
       }))
-
       this.loadRepo();
     }
 
@@ -92,7 +92,7 @@ class App extends Component {
       return (
         <div>
           <RepoList repo={ repo } />
-          <div> Loading ...</div>
+          <Loading></Loading>
         </div>
       )
   }