Как показать индикатор выполнения компонента на 100% перед размонтированием в React / Redux?

#javascript #reactjs #list #redux #progress-bar

#javascript #reactjs #Список #redux #индикатор выполнения

Вопрос:

Я показываю компонент ProgressBar при загрузке большого списка. Когда список загружен, я хочу, чтобы индикатор выполнения отображал 100% завершения перед размонтированием. Проблема в том, что код выглядит так:

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

Значение 100% устанавливается в компоненте ProgressBar, когда listIsloading имеет значение false.
Но с учетом того, как он настроен в настоящее время, индикатор выполнения размонтируется до того, как он покажет 100%.
Запрос списка и установка значения загрузки списка обрабатываются в отдельной модели redux, поэтому я не могу манипулировать компонентами из этих функций redux.

Я думаю, что требуется некоторая задержка между временем загрузки списка и размонтированием ProgressBar. Но я подумал, что сначала проверю, есть ли более элегантное решение, прежде чем добавлять тайм-ауты и прочее.

Есть идеи?

Ответ №1:

Как вы устанавливаете listIsLoading true или false? должна работать простая задержка перед установкой значения true или false, используете ли вы useEffect?