Приложение "Звёздные войны". Ч3

Пока загружаются данные с сервера, страница с значком картинки, которая ещё не загрузилась, выглядит не очень привлекательно. Хорошее приложение не отображает элементы для которых пока нет данных. Для таких случаев используется индикатор загрузки.

Подобрать и настроить подходящий индикатор можно на сайте https://loading.io/

Создаём компонент spinner, копируем в него полученный html и css код, проверяем как спиннер смотрится на месте элемента, который он будет временно заменять.

Логика индикатора загрузки

В стейт компонента random-planet добавляем свойство loading и присваиваем ему значение true, потому что как только компонент добавляется, он тут же начинает загружаться.

В функцию  render() компонента random-planet добавляем  условие
    
    if(loading) {
      return (<Spinner />)
    }

Узнать, что изображение загрузилось, позволит функция onPlanetLoaded

  onPlanetLoaded = (planet) => {
    this.setState({ 
      planet,
      loading: false
    });
  };