Loading view

@@ -8,6 +8,8 @@ import TableBody from '@material-ui/core/TableBody'
 import TableRow from '@material-ui/core/TableRow'
 import TableRow from '@material-ui/core/TableRow'
 import TableCell from '@material-ui/core/TableCell'
 import TableCell from '@material-ui/core/TableCell'
 import {withStyles} from '@material-ui/core/styles';
 import {withStyles} from '@material-ui/core/styles';
+import curcularProgress from '@material-ui/core/CircularProgress';
+import CircularProgress from '@material-ui/core/CircularProgress';
 
 
 const styles = theme => ({
 const styles = theme => ({
   root: {
   root: {
@@ -17,6 +19,9 @@ const styles = theme => ({
   },
   },
   table: {
   table: {
     minWidth:1000
     minWidth:1000
+  },
+  progress:{
+    margin: theme.spacing.unit * 2
   }
   }
 })
 })
 
 
@@ -47,10 +52,12 @@ const students = [
 class App extends Component{
 class App extends Component{
 
 
   state = {
   state = {
-    students: ""
+    students: "",
+    completed: 0
   }
   }
 
 
   componentDidMount() {
   componentDidMount() {
+    this.timer= setInterval(this.progress,20);
     this.callApi()
     this.callApi()
       .then(res => this.setState({students: res}))
       .then(res => this.setState({students: res}))
       .catch(err => console.log(err));
       .catch(err => console.log(err));
@@ -62,6 +69,11 @@ class App extends Component{
     return body;
     return body;
   }
   }
 
 
+  progress=() =>{
+    const{completed}= this.state;
+    this.setState({completed:completed >= 100 ?0:completed +1});
+  }
+
   render(){
   render(){
 
 
     const {classes}= this.props;
     const {classes}= this.props;
@@ -102,7 +114,12 @@ class App extends Component{
                   st_Score={c.st_Score}
                   st_Score={c.st_Score}
                   />
                   />
               );
               );
-            }) : ""
+            }) : 
+            <TableRow>
+              <TableCell colSpan="9" allign="center">
+                <CircularProgress className={classes.progress} variant="determinate" value={this.state.completed}/>
+              </TableCell>
+            </TableRow>
           } 
           } 
             </TableBody>
             </TableBody>