From 57ab8beec98ac4c361d0cf064dfd62dd843b0ff2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=97=8D+85CD?= <50108258+kwaa@users.noreply.github.com>
Date: Sun, 6 Oct 2024 20:17:30 +0800
Subject: [PATCH] feat: suspense

---
 src/app.tsx                      | 6 +++++-
 src/components/model.tsx         | 4 +++-
 src/components/uikit/loading.tsx | 8 ++++++++
 3 files changed, 16 insertions(+), 2 deletions(-)
 create mode 100644 src/components/uikit/loading.tsx

diff --git a/src/app.tsx b/src/app.tsx
index fbecf34..e1ee30f 100644
--- a/src/app.tsx
+++ b/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>
diff --git a/src/components/model.tsx b/src/components/model.tsx
index ba97036..ce4a4fd 100644
--- a/src/components/model.tsx
+++ b/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} />
+  )
 }
diff --git a/src/components/uikit/loading.tsx b/src/components/uikit/loading.tsx
new file mode 100644
index 0000000..1460917
--- /dev/null
+++ b/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>
+)