React lazy - белый экран
Доброго времени суток!
Проблема при добавлении ленивой загрузки. У меня есть страница с товарами. Есть кнопка "показать подробную информацию о товаре" - которая открывает модальное окно, в котором все описание. Это описание довольно большое, там слайдеры, разные анимации и куча текста. Я хотел бы запихнуть содержимое модального окна в ленивый компонент, чтоб все эти картинки, слайдеры и тд грузились только тогда, когда юзер нажимает "показать подробную информацию о товаре", а не сразу при загрузке страницы товаров (т.к если все подгружается сразу - приложение жестко тормозит)
Суть проблемы. Я добавляю React lazy компоненту модального окна, но по итогу получаю белый экран, который перекрывает абсолютно все и приложение в принципе не работает. Я еще изучаю реакт, поэтому не могу пока понять в чем проблема.
const ProductMore = React.lazy(() => import('../ProductMore/ProductMore'));
<button className="product-bottom-buttons-more-btn"
onClick={() => setIsShowProduct(true)}>Подробнее
</button> // сама кнопка подробнее
<Modal visible={isShowProduct} setVisible={setIsShowProduct}> //модалка
<Suspense fallback={<div>Loading...</div>}>
<ProductMore product={product} /> //компонент подробнее
</Suspense>
</Modal>