Кода к сожалению сейчас нет под рукой, постараюсь на словах описать подробнее.
Есть компонент Каталог с пагинацией. Данные для него берутся из хранилища. Каталог подписан на событие изменения в его хранилище и вызывает .setState() с новыми данными из хранилища.
При рендере Каталога идет проверка, если его state пустое, то рендерится прелоадер, если нет - контент.
При переходе по пагинации вызывается экшн загрузки данных новой страницы каталога: сперва очищается хранилище и срабатывает событие его изменения, а затем аяксом загружаются данные новой страницы в хранилище и при завершение загрузки снова срабатывает событие изменения хранилища. Получается, что при очищение хранилища Каталог рендерит прелоадер и по загрузке меняет его на контент.
Так же подобный метод вывода прелоадера использую в других компонентах (у каждого свое хранилище). Тем самым на странице может быть выведено несколько компонентов со своими прелоадерами.
Правильно ли выбран подход для показа прелоадера на время загрузки данных через сброс хранилища и state компонента соответственно? Или данная реализация не совсем правильная?
Кажется, на сайдэффекты полагаешься. Если товаров нет или сервер вернул ошибку, то стэйт останется пустым и пользователь бесконечно долго будет смотреть на прелоадер.
Прелоадер показывается только в одном конкретном случае: запрос на сервер ушёл и ещё не вернулся.
"Прелоадер показывается только в одном конкретном случае: запрос на сервер ушёл и ещё не вернулся." - не совсем так. Не полностью описал проверку на наличие данных. Когда уходит запрос на сервер, хранилище это пустой объект, и в Каталоге идет проверка, если хранилище это пустой объект, то показываем прелоадер. При ошибке в хранилище записывается свойство, и хранилище уже не пустое, в этом случае рендерится контент в зависимости уже от содержимого, либо пустой блок при ошибке с сервера (пока вывожу просто пустой блок с сообщением) либо содержимое каталога.
Средний