Как задать отображение spinner до ответа от сервера reactJS?

Question

[Fierfoxik]

Доброго времени!
Заранее извиняюсь за столь большую писанину.
Есть контейнер списока фильмов, который отрисовывает список только после того как в store redux изменится свойство isFetching >на ture и при false отображает мой Spinner.

Дилемма в том что во первых отображение спиннера даже не заметно т.к оно длится доли секунд (есть ли смысл вешать таймер?).
Далее я попробовал такой подход для отображения спиннера когда я переключаю страницу/изменяю фильтр
Вызываю экшн(либо в action запроса, либо только при нажатии на кнопку переключения страниц) и в reducer меняю статус isFetching на false но тогда происходит небольшой скачек т.к список отрисовывается каждый раз с нуля.

if ( this.props.AllMovies.isFetching) {
return (
     <MoviesList/>
)
} else{
<Spinner/>
}

Как тут можно сделать? Так же возникает вопрос как быть если будет ошибка от сервера, добавлять ли новый else if для проверки статуса ответа и при не успешном ответе отрисовывать кнопку повторного запроса?

Живой пример проекта здесь(на данный момент спиннер не стоит при каких либо изменениях списка)

Answer 1

[Антон Спирин]

Идеальный вариант, создать для этих задач компонент:

function Block({ 
  children,
  isLoading, 
  isError, 
  isEmpty, 
  emptyText, 
  fetch,
}) {
  const showPreloader = isLoading && !isError;
  const allDataIsReady = !isLoading && !isError;
  const showEmptyText = allDataIsReady && isEmpty && emptyText;

  return (
    <Wrapper>
      {showPreloader && <Preloader />}
      {isError && <TryAgain fetch={fetch} />}
      {showEmptyText && <Empty>{emptyText}</Empty>}
      {allDataIsReady && children}
    </Wrapper>
  );
}

И использовать его в коде так:

render() {
  const { isLoading, isError, orderList } = this.props;

  return (
    <Block
      isLoading={isLoading}
      isError={isError}
      isEmpty={!ordersList.length}
      fetch={this.fetchOrdersList}
      emptyText="You don't have any orders."
    >
      {ordersList.map(order => <Order key={order.id} order={order} />}
    </Block>
  )
}

Название служебных дочерних компонентов компонента Block условные, но думаю суть их задач передают.

Comments

[Fierfoxik]

Гениально, спасибо!

[Fierfoxik]

У меня только вопрос, я так понимаю что данный блок не останавливает интерпритатор от того что бы залезть в свойство дабы получить данные?

Приведу пример

Отлично работает

<ServiceBlock isLoading={TopTv.isFetching}>
   <MediaList movieListTitle={'Топ сериалы'} movieList={TopTv} typeList='tv'/>
</ServiceBlock>

Но вот при такой записи нам нужно получать данные которые еще не пришли тем самым натыкаемся на андефайнд и серверный блок не рендерится.

TopTv.data.total_pages будет существовать только после получения ответа от сервера

<ServiceBlock isLoading={TopTv.isFetching}>

<div className="movies-content">
     <MediaList movieListTitle={'Топ сериалы'} movieList={TopTv} typeList='tv'/>
 {TopTv.data.total_pages > 1 ?
   <div className="pager-btns clearfix">
 
            </div> : null}
                  </div>
 </ServiceBlock>

[Антон Спирин]

Fierfoxik, так вам надо в initialState в редьюсере определить пустой список, примерно так:

const initialState = {
  data: {
    totalPages: 0,
    movies: [],
  },
  isLoading: true,
  isError: false,
}

Тогда до получения ответа сервера, логика приложения будет получать начальные данные.

[Fierfoxik]

Антон Спирин, ну да, других вариантов нет. К сожалению там очень много чего нужно определять для начального состояния)

Answer 2

[tsahk]

Мое мнение такое:
1. То что спиннер почти не заметно - это нормально раз сервер быстро ответил и рендер тоже прошел нормально.
2. Насчет "скачков", отрисовки с нуля и вообще выборки фильмов - посмотрите на библиотеку reselect, попробуйте её (если еще не используете), очень помогает во многих подобных (и не только) случаях.
3. Насчет ошибки со стороны сервера - я бы добавил, это удобно, и делается не трудно.

Comments

[Fierfoxik]

2. Это библиотека получается для сохранения состояния?
3. т.е вполне нормально делать 3 return в контейнере? аля контент, спиннер и кнопка для повторного запроса при ошибке

[tsahk]

2. Да, вы правы, хотя я бы сказал для "выборки" и "запоминания" состояния. Может быть сначала она покажется не очень понятной, но если разберетесь, то она может вам помочь не только в плане отображения спиннера, но и вообще с более эффективной фильтрацией фильмов с помощью селекторов.
3. Мне трудно сказать не видя весь код целиком, но вообще говоря - да, но не совсем так. Я бы написал в таком случае что-то вроде такого:

return (
    this.props.AllMovies.isFetching ?
        <Spinner/> :
        this.props.AllMovies.failedFetching ?
            <FetchAgainButton/> :
            <MoviesList/>
);

[Антон Спирин]

tsahk, современные гайдлайны использование таких конструкций даже в простом коде не одобряют, а в JSX и подавно так писать нельзя.
https://github.com/airbnb/javascript#comparison--n...