Merge branch 'master' into finalfix

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";
@@ -79,6 +80,7 @@ class user extends Component {
       posts: null,
       myTopics: null,
       followingList: null
+      loading: false
     };
   }
 
@@ -133,7 +135,8 @@ class user extends Component {
   };
 
   componentDidMount() {
-    axios
+    this.setState({loading: true});
+    let otherUserPromise = axios
       .post("/getUserDetails", {
         handle: this.state.profile
       })
@@ -145,7 +148,7 @@ class user extends Component {
       })
       .catch(err => console.log(err));
 
-    axios
+    let userPromise = axios
       .get("/user")
       .then(res => {
         // console.log(res.data.credentials.following);
@@ -165,7 +168,7 @@ class user extends Component {
       })
       .catch(err => console.log(err));
 
-    axios
+    let posts = axios
       .post("/getOtherUsersPosts", {
         handle: this.state.profile
       })
@@ -193,6 +196,14 @@ class user extends Component {
       .catch(function(err) {
         console.log(err);
       });
+    
+      Promise.all([otherUserPromise, userPromise, posts])
+        .then(() => {
+          this.setState({loading: false});
+        })
+        .catch((error) => {
+          console.log(error);
+        })
   }
 
   render() {
@@ -300,6 +311,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}