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

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

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

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

Похожие вопросы
ITK academy Нижний Новгород
от 80 000 до 120 000 ₽
ITK academy Воронеж
от 50 000 до 90 000 ₽