Как задать плавное отображение spinner в ReactJS?

Question

[Fierfoxik]

Использую react + redux, делаю запрос на сервер и пока жду ответа от сервера компонент не отображается, значение isFetching = false. Как только ответ получен значение isFetching = ture

if (this.props.tv.isFetching) {
    return (<div>hello world</div>)
} else {
    return <Spinner/>;
}

В момент когда ждем ответа от сервера хотелось бы отображать спиннер с fade in отображением и fade out уходом.

Пришел к выходу использовать react-transition-group. Но дилемма в том что не срабатывает не enter не exit, только appear.

class Spinner extends Component {
    render() {
        return (
            <CSSTransition
                classNames={{
                    appear: 'my-appear',
                    appearActive: 'my-active-appear',
                    enter: 'my-enter',
                    enterActive: 'my-active-enter',
                    exit: 'my-exit',
                    exitActive: 'my-active-exit',
                }}
                timeout={{
                    enter: 300,
                    exit: 50550,
                }}
                in
                appear
            >
                <div className="spinner-wrap" >
                    <div className="spinner"/>
                </div>
            </CSSTransition>
        );
    }
}

Comments

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

fadeOut для спиннера очень странная идея. Зачем пользователю смотреть на ваш fadeOut, если он хочет видеть данные, а не любоваться красивым исчезновением спиннера? Может лучше добавить keyframes на появление, а на исчезновение забить. Имхо такие эффекты для спиннера лишние.

[Fierfoxik]

Антон Спирин, это будет длится всего доли секунд, плавный переход всегда приятно смотрится)
Да и сама задача меня заинтересовала, почему не на примерах работает а у меня нет)

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

Fierfoxik, поверьте далеко не всегда. А где неуместно и при неумелом использовании подавно.
С библиотекой не знаком. Вы пробовали в classNames значение fade оставить? Думаю вы классы my-* не определяли в коде, а назначить назначили. Вот и не работает

[Fierfoxik]

Антон Спирин, в classNames определяются классы которые будут использоваться событиях, но по какой то причине срабатывает только событие appear и appearActive

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

Fierfoxik, вы исходный код смотрели?
https://github.com/reactjs/react-transition-group/...
https://github.com/reactjs/react-transition-group/...
Нет никаких событий appear и appearActive.

[Fierfoxik]

Антон Спирин,
https://reactcommunity.org/react-transition-group/...
https://github.com/reactjs/react-transition-group/...
Да и проблема же не в appear а в том что события enter и exit не работают, даже если appear убрать.
appear добавляется только в момент монтирования компонента

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

Fierfoxik, да нет никаких событий enter и exit. Это набор классов. А apperar на который вы первую ссылку кинули это булевый параметр который вы под in в CSSTransition передаете. Во второй ссылке строка с выбором класса из classNames. Это разные вещи, раз. Ни что из этого не является событием, два.

[Fierfoxik]

Антон Спирин, в 1 ссылке буквально ниже appear есть каллбек функции при тех или иных событиях
Возникают они таки как раз при тех или иных жизненных циклах компонента(появился, убрался и когда появился или убрался)
А то что булевой параметр, это включение добавления класса или анимации при тех или иных жизненых циклах.

onEnter
Callback fired before the "entering" status is applied. An extra parameter isAppearing is supplied to indicate if the enter stage is occurring on the initial mount

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

Fierfoxik, да посмотрите уже исходный код, там ясно написанно, когда и при каких условиях какой коллбек вызывается . onEnter - событие, но enter и exit - ключи classNames для ваших классов.
Вы вообще свои классы определяли на все что указали в classNames?

[Fierfoxik]

Антон Спирин,
я прекрасно понимаю что onEnter событие, а ключи отвечают за то чтоб добавить класс на том или ином событии.
Я же говорю что данных классов просто нет в коде, ибо (событие или жизненный цикл как вам будет удобнее называйте) onEnter или onExit не работает.
Проблема оказалось куда проще, просто CSSTransition должен быть в dom что бы производить данные манипуляции а я его убираю или добавляю.

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

Fierfoxik, потому что вы все не правильно делаете, удаляться компонент должен по коллбеку от самого компонента, а не вами. Вам, для этого надо использовать state компонента, для ключей состояния спиннера, по которым будут выполняться условия рендера и функцию жизненного цикла componentWillReceiveProps, где вы эти ключи будете менять в зависимости от значения нового свойства isFetching. А чтобы везде все эти условия не писать можно сделать компонент обертку Block с интерфейсом:

<Block
  isLoading={isLoading}
  isError={isError}
  fetchErrorHandler={fetchMyData}
  isEmpty={myData.length}
  emptyContent={'no data'}
>
  <MyComponent />
</Block>

Который сам будет показывать и удалять спиннер когда надо.
Это одна из best practice of react development.

[Fierfoxik]

Антон Спирин, т.е возвращать все в одном return?

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

Fierfoxik, нет тут придется усложнить условие: если загрузка закончилась, то изменить состояние на spinnerState: 'fadingOut' и при этом в рендере начинать fadeOut, а в колбеке по окончанию fadeOut опять изменение состояния spinnerState: 'fadedOut'. Ну и в рендере что-то вроде:

const { emptyText, ... } = this.props;
const { spinnerState, ... } = this.state;
const shouldDataRendered = !isLoading && !isError && spinnerState === 'fadedOut';
...  

 return (
  {shouldDataRendered && this.children}
  {shouldSpinnerRendered && <Spinner ...  />}
  {shouldEmptyWudgetRendered && <EmptyPlaceHolder emptyText={emptyText} />} 
  {shouldErrorWidgetRendered && ... }
)