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

Как рендерить тяжелый компонент без блокировки интерфейса 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, не помогло, работает только с функциями, а с компонентами нет

Как обойти блокировку интерфейса при рендере тяжелого компонента?
  • Вопрос задан
  • 149 просмотров
Подписаться 2 Простой Комментировать
Помогут разобраться в теме Все курсы
  • Нетология
    Frontend-разработка на React
    10 недель
    Далее
  • Яндекс Практикум
    React-разработчик
    3 месяца
    Далее
  • Skypro
    React-разработчик с нуля
    9 месяцев
    Далее
Пригласить эксперта
Ваш ответ на вопрос

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

Похожие вопросы