Add circular progress to other user page

twistter-frontend/src/pages/otherUser.js

@@ -22,6 +22,7 @@ import AddCircle from "@material-ui/icons/AddCircle";
 import TextField from "@material-ui/core/TextField";
 import VerifiedIcon from "@material-ui/icons/CheckSharp";
 import DoneIcon from "@material-ui/icons/Done";
+import CircularProgress from "@material-ui/core/CircularProgress";
 
 // component
 import "../App.css";
@@ -77,7 +78,8 @@ class user extends Component {
       user: null,
       following: null,
       posts: null,
-      myTopics: null
+      myTopics: null,
+      loading: false
     };
   }
 
@@ -114,7 +116,8 @@ class user extends Component {
   };
 
   componentDidMount() {
-    axios
+    this.setState({loading: true});
+    let otherUserPromise = axios
       .post("/getUserDetails", {
         handle: this.state.profile
       })
@@ -126,7 +129,7 @@ class user extends Component {
       })
       .catch(err => console.log(err));
 
-    axios
+    let userPromise = axios
       .get("/user")
       .then(res => {
         this.setState({
@@ -138,7 +141,7 @@ class user extends Component {
       })
       .catch(err => console.log(err));
 
-    axios
+    let posts = axios
       .post("/getOtherUsersPosts", {
         handle: this.state.profile
       })
@@ -149,6 +152,14 @@ class user extends Component {
         });
       })
       .catch(err => console.log(err));
+
+      Promise.all([otherUserPromise, userPromise, posts])
+        .then(() => {
+          this.setState({loading: false});
+        })
+        .catch((error) => {
+          console.log(error);
+        })
   }
 
   render() {
@@ -254,6 +265,7 @@ class user extends Component {
     );
 
     return (
+      this.state.loading ? <CircularProgress size={60} style={{marginTop: "300px"}}></CircularProgress> :
       <Grid container spacing={24}>
         <Grid item sm={4} xs={8}>
           {imageMarkup}