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}