From 739b1cc92ab097ea8d0e7fb1c78f21a99ca80d7c Mon Sep 17 00:00:00 2001
From: Clayton Wilson <claytonwilson@protonmail.com>
Date: Thu, 5 Dec 2019 13:22:29 -0500
Subject: [PATCH] Add circular progress to other user page

---
 twistter-frontend/src/pages/otherUser.js | 20 ++++++++++++++++----
 1 file changed, 16 insertions(+), 4 deletions(-)

diff --git a/twistter-frontend/src/pages/otherUser.js b/twistter-frontend/src/pages/otherUser.js
index a7b4935..a9ec494 100644
--- a/twistter-frontend/src/pages/otherUser.js
+++ b/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}