ProfilePage is a react ponent who display the profile of a user. When I call this ponent I want to display a <Skeleton.Image/> until the page and its contents are pletely loaded. Please, how can I detect if the ponent is pletely loaded and data are pletely retrieved?

class ProfilePage extends Component {

  state = {
    all_currency: [],
    still_uploading: true,
    ....
  }

  ponentDidMount() {
    this.getAccountData(this.props.match.params)

    api.post("/base/getAllCurrency", {}).then((res) => {
      this.setState({
        all_currency: res.data.doc
      })
    })

    window.addEventListener('load', this.handleLoad); // <===
  }

  ponentWillUnmount() {
    window.removeEventListener('load', this.handleLoad); // <===
  }

  handleLoad = () => {
    this.setState({
      still_uploading: false
    })
  }
}

I use the state of the still_uploading to show or to hide the skeleton ponent.

{still_uploading && <Skeleton.Image/>}

PS: This program works only if I reload the page, but if I went to an other page, and return back to my page, the variable still_uploading will always have true value, and the handleLoad() function is never call back again. Do you have any idea why it doesn't work?

I also tried to replace:

window.removeEventListener('load', this.handleLoad);

by:

ReactDOM.findDOMNode(this).addEventListener("DOMContentLoaded", this.handleLoad);

This one with ReactDOM never calls the function handleLoad even if I reload the page

ProfilePage is a react ponent who display the profile of a user. When I call this ponent I want to display a <Skeleton.Image/> until the page and its contents are pletely loaded. Please, how can I detect if the ponent is pletely loaded and data are pletely retrieved?

class ProfilePage extends Component {

  state = {
    all_currency: [],
    still_uploading: true,
    ....
  }

  ponentDidMount() {
    this.getAccountData(this.props.match.params)

    api.post("/base/getAllCurrency", {}).then((res) => {
      this.setState({
        all_currency: res.data.doc
      })
    })

    window.addEventListener('load', this.handleLoad); // <===
  }

  ponentWillUnmount() {
    window.removeEventListener('load', this.handleLoad); // <===
  }

  handleLoad = () => {
    this.setState({
      still_uploading: false
    })
  }
}

I use the state of the still_uploading to show or to hide the skeleton ponent.

{still_uploading && <Skeleton.Image/>}

PS: This program works only if I reload the page, but if I went to an other page, and return back to my page, the variable still_uploading will always have true value, and the handleLoad() function is never call back again. Do you have any idea why it doesn't work?

I also tried to replace:

window.removeEventListener('load', this.handleLoad);

by:

ReactDOM.findDOMNode(this).addEventListener("DOMContentLoaded", this.handleLoad);

This one with ReactDOM never calls the function handleLoad even if I reload the page

• javascript
• reactjs

• 1 Do you display the response from /base/getAllCurrency on this Profile Page? If yes, I feel that your still_uploading state should be dependent on this response rather than the DOMContentLoaded event. – SiddAjmera Commented Jan 4, 2021 at 2:31
• Thanks for your reply! /base/getAllCurrency return only the currencies form database, I use the resources to fill a list of currencies. They are others who retrieve other infos of the user, I delete them from this exemple to make is simple to understand – Joe Commented Jan 4, 2021 at 2:37
• 1 Well, in that case, I feel that the still_uploading state should depend on all those factors rather than DOMContentLoaded – SiddAjmera Commented Jan 4, 2021 at 2:43
• Thanks again! Do you think this is the best solution? They are no function who detect if a ponent is pletely loaded? – Joe Commented Jan 4, 2021 at 3:00
• 1 What does "pletely loaded" mean? A ponent is pletely loaded when it is mounted and initially rendered. If you want to fetch some data after it's mounted you can do that and in the meantime conditionally render some "loading" state until your state is populated from the asynchronous request. Just set still_uploading false in a .finally block of the Promise chain so when the POST request resolves/rejects your loading state will finalize. – Drew Reese Commented Jan 4, 2021 at 3:06

1 Answer 1

Always prefer Function Component to Class Component it's cleaner, faster and more readable. just change your code to something like this:

import { useParams } from 'react-router-dom';

function ProfilePage(props) {
  const [all_currency, setAllCurrencies] = useState([]);
  const [loading, setLoading] = useState(true);
  const params = useParams();

  useEffect(() => {
    getAccountData(params);

    api.post("/base/getAllCurrency", {}).then((res) => {
      setLoading(false);
      setAllCurrencies(res.data.doc);
    });
  }, []);

  if (loading) return <Skeleton.Image/>;

  return <div>Your View Here...</div>;
}