How can I smoothly load .obj files in my React component and switch between them without encountering "A component suspended while respon..." error?

Question

`error : A component suspended while responding to synchronous input. This will cause the UI to be replaced with a loading indicator. To fix, updates that suspend should be wrapped with startTransition.

I'm currently working on a React project where I need to load .obj files into my components smoothly. Additionally, I aim to switch between these object files seamlessly wt running into the error message "A component suspended while responding...". Could someone guide me on how to achieve this?

I've attempted to load the .obj files using various methods, but I keep encountering performance issues and occasional errors, particularly when switching between different object files within the same component. My goal is to ensure a fluid user experience without any interruptions or delays during the switching process.

Any insights, suggestions, or code examples would be greatly appreciated. Thank you in advance for your help!

import { useRef, useState, useEffect } from 'react';
import { Canvas, useLoader, useFrame } from '@react-three/fiber';
import { OrbitControls } from '@react-three/drei';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader';
import { MeshBasicMaterial, Vector3 } from 'three';

export default function Model({ setpartname }) {
  const [gender, setGender] = useState('boy');
  const ModelObject = ({ obj }) => {
    const mesh = useRef();
    const [hoveredObjectName, setHoveredObjectName] = useState(null);
    const [clickedobj, setclickedobj] = useState(null);


    const hoverMaterial = new MeshBasicMaterial({ color: 0xff0000 });
    const clickMaterial = new MeshBasicMaterial({ color: 0x00ff00 });

    const handleClick = (event) => {
      setpartname(event.object.name);
      event.object.material = clickMaterial;
      setclickedobj(prev => prev === event.object.name ? null : event.object.name);
    };

    const handlePointerOver = (event) => {
      if (!clickedobj) {
        setHoveredObjectName(event.object.name);
        // Store the original material
        event.object.originalMaterial = event.object.material;
        // Apply hover material
        event.object.material = hoverMaterial;
      }
    };

    const handlePointerOut = (event) => {
      if (!clickedobj) {
        setHoveredObjectName(null);
        // Restore original material if it exists
        if (event.object.originalMaterial) {
          event.object.material = event.object.originalMaterial;
        }
      }
    };

    useFrame(() => {
      if (!clickedobj) {
        mesh.current.rotation.y += 0.01; 
      }
    });

    useEffect(() => {
      if (clickedobj) {
        mesh.current.rotation.y = 0;
      }
    }, [clickedobj]);

    return (
      <mesh
        ref={mesh}
        onClick={handleClick}
        onPointerOver={handlePointerOver}
        onPointerOut={handlePointerOut}
      >
        <primitive object={obj} />
      </mesh>
    );
  };

  const objPath = gender === 'boy' ? '/humanparts.obj' : '/girl.obj';
  const obj = useLoader(OBJLoader, objPath);

  const geometry = obj.children[0].geometry;
  geometry.computeBoundingBox();
  const boundingBox = geometry.boundingBox;
  const size = new Vector3();
  boundingBox.getSize(size);
  const center = new Vector3();
  boundingBox.getCenter(center);
  const offset = center.clone().negate();
  obj.position.set(offset.x - 1, offset.y - 0.5, offset.z - 0.5);

  const maxAxis = Math.max(size.x, size.y, size.z);
  const scale = 0.8 / maxAxis; 
  obj.scale.set(scale, scale, scale);

  obj.rotation.set(0, -0.1, 0);

  return (
    <div style={{ position: 'relative', width: '100%', height: '100%' }}>
      <Canvas>
        <ambientLight intensity={0.5} />
        <spotLight position={[10, 10, 10]} angle={0.15} penumbra={1} decay={0} intensity={1} />
        <pointLight position={[-10, -10, -10]} decay={0} intensity={1} />
        <ModelObject obj={obj} />
        <OrbitControls dampingFactor={0.1} />
      </Canvas>
      <div style={{ position: 'absolute', top: 0, left: 0, width: '200px', display: 'flex', justifyContent: 'space-between' }}>
        <div onClick={() => setGender('boy')} style={{ backgroundColor: '#89CFF0', color: 'white', width: '40%', textAlign: 'center' }}>♂️</div>
        <span onClick={event => { window.location.reload(); }}>♻️</span>
        <div onClick={() => setGender('girl')} style={{ `your text`backgroundColor: 'pink', color: 'white', width: '40%', textAlign: 'center' }}>♀️</div>
      </div>
    </div>
  );
}`