React lazy - белый экран

Рейтинг: 0Ответов: 0Опубликовано: 21.01.2023

Доброго времени суток!

Проблема при добавлении ленивой загрузки. У меня есть страница с товарами. Есть кнопка "показать подробную информацию о товаре" - которая открывает модальное окно, в котором все описание. Это описание довольно большое, там слайдеры, разные анимации и куча текста. Я хотел бы запихнуть содержимое модального окна в ленивый компонент, чтоб все эти картинки, слайдеры и тд грузились только тогда, когда юзер нажимает "показать подробную информацию о товаре", а не сразу при загрузке страницы товаров (т.к если все подгружается сразу - приложение жестко тормозит)

Суть проблемы. Я добавляю 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>

Ответы

Ответов пока нет.