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

Как обойти блокировку интерфейса при рендере тяжелого компонента?
  • Вопрос задан
  • 115 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы