feat: suspense

src/app.tsx

@@ -2,11 +2,13 @@ import { OrbitControls } from '@react-three/drei'
 import { Canvas } from '@react-three/fiber'
 import { createXRStore, IfInSessionMode, XR } from '@react-three/xr'
 import { Leva } from 'leva'
+import { Suspense } from 'react'
 
 import { Model } from './components/model'
 import { Perf } from './components/perf'
 import { Stage } from './components/stage'
 import { Toolbar } from './components/toolbar'
+import { Loading } from './components/uikit/loading'
 import { Origin } from './components/xr/origin'
 import { PlayingProvider } from './contexts/playing'
 
@@ -35,7 +37,9 @@ export const App = () => {
             />
           </IfInSessionMode>
           <Stage>
-            <Model />
+            <Suspense fallback={<Loading />}>
+              <Model />
+            </Suspense>
           </Stage>
         </XR>
       </Canvas>

src/components/model.tsx

@@ -95,5 +95,7 @@ export const Model = () => {
 
   useFrame(() => playing && helper.update(clock.getDelta()))
 
-  return (<primitive castShadow object={model} scale={modelScale} />)
+  return (
+    <primitive castShadow object={model} scale={modelScale} />
+  )
 }

src/components/uikit/loading.tsx

@@ -0,0 +1,8 @@
+import { Root } from '@react-three/uikit'
+import { Loading as UikitLoading } from '@react-three/uikit-apfel'
+
+export const Loading = () => (
+  <Root>
+    <UikitLoading size="sm" />
+  </Root>
+)