Задать вопрос

Как рендерить тяжелый компонент без блокировки интерфейса React?

Имеется вот такой вот код -> КОД
Проблема в том, что когда загружается компонент Spline, он блокирует загрузку всего сайта и страница зависает.

Пробовали вот такой вот вариант:
Это пример из документации, ссылка на Spline тяжелее
import React, { Suspense } from 'react';

const Spline = React.lazy(() => import('@splinetool/react-spline'));

export default function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <Spline scene="https://prod.spline.design/6Wq1Q7YGyM-iab9i/scene.splinecode" />
      </Suspense>
    </div>
  );
}


Так же пробовал useWorker, не помогло, работает только с функциями, а с компонентами нет

Как обойти блокировку интерфейса при рендере тяжелого компонента?
  • Вопрос задан
  • 143 просмотра
Подписаться 2 Простой Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    React-разработчик
    3 месяца
    Далее
  • Merion Academy
    Frontend-разработка на React
    4 месяца
    Далее
  • ProductStar
    React: отточите навыки интерфейсной разработки
    6 недель
    Далее
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
ITK academy Нижний Новгород
от 50 000 до 90 000 ₽
IT ATLAS Москва
от 200 000 до 250 000 ₽
ITK academy Казань
от 50 000 до 90 000 ₽