Загрузка данных из REST API

[comerc]

Поступило мнение вне Хабра:

Собственно, в чем главная недодумка — это использование пары флагов вместо enum’а состояний. сам че-то такое же делал. начал на флагах, потом смотрю и думаю: что за хрень, у меня же может быть куча состояний для более-менее сложных компонент. Навскидку:

еще не начали загружаться [но хотим показать прелоадер а-ля фейсбук], собираемся загрузиться [ждем еще чего-то], загружается, не загрузилось с ошибкой, не загрузилось пустое, загрузилось пустое, загрузилось нормально, загрузили первую порцию [но сервер просит попросить еще попозже]

То есть для чего-то супер-простого это вполне ок решение, и если оно в стиле кода вашего проекта, претензий никаких нет (хотя за отсутствие propTypes, даже если флоу, я нашим джуниорам стучу по рукам).

Но для production quality — неаккуратненько.

[andreylat]

Спасибо за статью,
очень актуально что в ней подробно «разжевывается» вопрос для тек, кто «в танке»,
с пояснениями и ссылками, где почитать подробнее.
И, хотя, еще не вся картина мира react-redux ясно видится, но создается впечатление, что еще чуть-чуть и ее можно будет понять

[aon24]

Это не велосипед, — обычное решение задачи.
У меня сделано примерно также (нет смысла выкладывать), только без редукса (строчек меньше и все в одном файле) и флаг «загрузка» зажигается через 500мс (у меня не веб-сайт, а приложение для работы с БД, — там почти все кэшируется).
В учебнике по CSS есть крутящийся кружочек вместо слова «загрузка»:
<div style="
margin: 10% auto;
border-bottom: 6px solid #fff;
border-left: 6px solid #fff;
border-right: 6px solid #c30;
border-top: 6px solid #c30;
border-radius: 100%;
height: 100px;
width: 100px;
-webkit-animation: spin .6s infinite linear;
-moz-animation: spin .6s infinite linear;
-ms-animation: spin .6s infinite linear;
-o-animation: spin .6s infinite linear;
animation: spin .6s infinite linear;
></div>

[comerc]

А если загрузка занимает меньше, чем 500 мс, то индикатор загрузки не показываем? Тогда, если загрузка занимает 750 мс, потребуется ожидать 1000 мс: 500 мс до индикатора + 500 мс с индикатором. Правильно я понял?

[aon24]

Я включаю индикатор через 500мс, если загрузка не закончилась. В 90% он вообще не включается. Все пользователи в ЛС, справочники и формы в кэше браузера. По сети бегают только данные в небольших объемах. Повторю: у меня не веб-сайт.

[comerc]

Но тогда остается возможность кратковременного мигания индикатора загрузки. А мне было интересно решить этот вопрос.

[aon24]

мигает, собака. Но редко и не раздражает. Это лучше, чем железные полсекунды (имхо).

[aon24]

Для отладки даже написал диалоговый промис :)

function msgBoxYesNo(s) {
    return new Promise((yes, no) => {
        confirm(s) ? yes() : no();
    });
}

[comerc]

Прикольно. Забрал себе в чулан.

[comerc]

У меня тоже есть подобная поделка :)

export const sleep = (ms, reason = null) => new Promise((resolve, reject) =>
  setTimeout(() => {
    if (reason) {
      reject(reason)
      return
    }
    resolve()
  }, ms)
)

[comerc]

Светлое завтра на Material-UI (Alpha-версия).

[comerc]

react-loading-indicator

[superyarik]

с длинными например раскрывающимися списками будет некрасиво — контент будет прыгать при перерендере, мы делаем лоэдэр овэрлеем, который рисуется над контентом.