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 ? :
{imageMarkup}