How to show progress bar component at 100% before unmounting in React/Redux?

Question

I'm showing a ProgressBar component while loading a large list. When the list is loaded I want the progress bar to show 100% complete before unmounting. The problem is that the code looks like this:

if(listIsLoading) {
    return (<ProgressBar listIsLoading={listIsLoading} />);
} else {
    return (<List />);
}

The 100% value gets set in the ProgressBar component when listIsloading is false. But with how it's currently set up, the ProgressBar is unmounting before it gets to show the 100%. The list request and setting listIsLoading value is handled in a separate redux model so I can't manipulate the components from those redux functions.

I think some delay is needed between the time the List is loaded and and the ProgressBar is unmounted. But I thought I'd check here to see if there's a more elegant solution first before adding timeouts and stuff.

Any ideas?

Answer 1

How are you setting listIsLoading true or false? a simple delay before setting to true or false should work, are you using a useEffect?