Как убрать 0 при загрузке?

Делаю приложение на реакте и тайпскрипте и при загрузке страницы вместо обычного 'Loading' захотел вставить какой-то реакт-спинер, вроде все ок, работает как надо нопроблема в том что вместе с этим спинером вылазит какой-то 0 в разных частях страницы (только при загрузке, когда приходят данные с сервера он исчезает). Пытался найти его ctrl+shift+f и посмотрел в каждом файле, 0 не нашел. Попытался еще поискать в chrome dev tools, тоже нет. Может это трабл библиотеки ? Вот сама библиотека - https://www.npmjs.com/package/react-loader-spinner Мой код:

  {loading && (
          <div className="loader">
            <Audio
              height="200"
              width="200"
              color="#ffff"
              ariaLabel="loading"
            />
          </div>
        )}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>


Ответы (1 шт):

Автор решения: Pilaton

Оператору && нужно подавать либо true, либо false. При других значениях, например 0 вместо false, он будет выводить на страницу 0

const loading = 0;
const loading2 = false;
const loading3 = '';


{loading && <div>Loading...</div>}   // 0
{loading2 && <div>Loading2...</div>} // ''
{loading3 && <div>Loading3...</div>} // ''

Как вариант, обернуть loading в Boolean

{Boolean(loading) && <div>Loading...</div>}
→ Ссылка