Add Customer API Loading View

@@ -8,6 +8,7 @@ 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 CircularProgress from '@material-ui/core/CircularProgress';
 
 
 const styles = theme => ({
 const styles = theme => ({
   root: {
   root: {
@@ -17,19 +18,24 @@ const styles = theme => ({
   },
   },
   table: {
   table: {
     minWidth: 1080
     minWidth: 1080
+  },
+  progress: {
+    margine: theme.spacing.unit*2
   }
   }
 })
 })
 
 
 class App extends Component {
 class App extends Component {
   state = {
   state = {
-    customers: ""
+    customers: "",
+    completed: 0
   }
   }
 
 
   //모든 컴포넌트 준비 완료일 때 실행 -- react가 라이브러리이기 때문 !
   //모든 컴포넌트 준비 완료일 때 실행 -- react가 라이브러리이기 때문 !
   componentDidMount() {
   componentDidMount() {
+    this.timer = setInterval(this.progress,20);
     this.callApi()
     this.callApi()
-      .then(res => this.setState({customers: res}))
-      .catch(err => console.log(err));
+    .then(res => this.setState({customers: res}))
+    .catch(err => console.log(err));
   }
   }
 
 
   callApi = async() => {
   callApi = async() => {
@@ -39,6 +45,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;
     return (
     return (
@@ -58,7 +69,13 @@ class App extends Component {
           <TableBody>
           <TableBody>
             {this.state.customers ? this.state.customers.map (c=> {
             {this.state.customers ? this.state.customers.map (c=> {
               return (<Customer key={c.id} id={c.id} image={c.image} name={c.name} birthday={c.birthday} gender={c.gender} job={c.job} />)
               return (<Customer key={c.id} id={c.id} image={c.image} name={c.name} birthday={c.birthday} gender={c.gender} job={c.job} />)
-            }) : ""}
+            }) :
+            <TableRow>
+              <TableCell colSpan="6" align="center">
+                <CircularProgress className={classes.progress} varient="determinate" value={this.state.completed}/>
+              </TableCell>
+            </TableRow>
+            }
           </TableBody>
           </TableBody>
         </Table>
         </Table>
       </Paper>
       </Paper>