Supended component ile responding to synchronous input

Questions
1

I am using react-babylonjs, and everything seems to show normaly but I get this error and canvas just freezes:
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.
The above error occurred in the Ig component:

I tried adding suspense and startTransition but nothing worked, the same error still occurs.
This is the simple code:

<Engine>
<Scene id="sample-canvas">
  <arcRotateCamera name="camera1"
    alpha={Math.PI / -2} beta={Math.PI / 2}
    radius={0.05} target={Vector3.Zero()} minZ={0.001} />
  <hemisphericLight name="light1" intensity={0.7}
    direction={Vector3.Up()} />
  <Model sceneFilename="Avocado.gltf"
    rootUrl = {`${baseUrl}Avocado/glTF/`}
    position = { new Vector3(-0.02, this.state.avocadoYPos, 0) }
    scaling={new Vector3(this.state.avocadoScaling,
      this.state.avocadoScaling, this.state.avocadoScaling)}
  />
</Scene>
</Engine>
2

cc @brianzinn

3

Hi @icy_director :smiling_face: Yes, you need to wrap the Model in a suspense component. What’s happening is the Model is throwing a promise (it uses a hook that does that).

Anyway, the fix looks like this:

import { Suspense } from 'react';
// ...

  <Engine>
    ...
    <Suspense fallback={ <box name="fallback" position={Vector3.Zero()} />}>
      <Model ... />
    </Suspense>
  </Engine>

The loading fallback can be null as well. There is an example here where the fallback shows a 3d loading progress bar:
https://brianzinn.github.io/react-babylonjs/examples/models/props/

More details on Suspense component here:
<Suspense> – React

4

I was wrapping all the scene with suspense instead of just model.
Thanks you this works.
Am I able to use click and hover method only on mesh, or I can provide html elements, since I must set a ref to something?
Also you have an error in this codesandbox.

5

I have a quick question.
How do I get access to the scene?
Is there something I can call to get the scene object like useFrame in three js.
EDIT: I found it. UseScene is the function