fix: wrap Text3D inside Suspense in the docs (#307)

Tresjs · Dec 10, 2023 · 27ce1f0 · 27ce1f0
1 parent 0f83571
commit 27ce1f0
Showing 1 changed file with 22 additions and 16 deletions.
diff --git a/docs/guide/abstractions/text-3d.md b/docs/guide/abstractions/text-3d.md
@@ -13,12 +13,14 @@ To use the `<Text3D />` component you need to pass the `font` prop with the URL
 ```vue
 <template>
   <TresCanvas>
-    <Text3D
-      text="TresJS"
-      font="/fonts/FiraCodeRegular.json"
-    >
-      <TresMeshNormalMaterial />
-    </Text3D>
+    <Suspense>
+      <Text3D
+        text="TresJS"
+        font="/fonts/FiraCodeRegular.json"
+      >
+        <TresMeshNormalMaterial />
+      </Text3D>
+    </Suspense>
   </TresCanvas>
 </template>
 ```
@@ -28,10 +30,12 @@ Notice that you need to pass the `<TresMeshNormalMaterial />` component as a chi
 ```vue
 <template>
   <TresCanvas>
-    <Text3D font="/fonts/FiraCodeRegular.json">
-      TresJS
-      <TresMeshNormalMaterial />
-    </Text3D>
+    <Suspense>
+      <Text3D font="/fonts/FiraCodeRegular.json">
+        TresJS
+        <TresMeshNormalMaterial />
+      </Text3D>
+    </Suspense>
   </TresCanvas>
 </template>
 ```
@@ -42,12 +46,14 @@ In addition, you can use the power of Vue to add reactivity, but you need to app
 <template>
   <input v-model="myReactiveText">
   <TresCanvas>
-    <Text3D
-      :text="myReactiveText"
-      font="/fonts/FiraCodeRegular.json"
-      center
-      need-updates
-    />
+    <Suspense>
+      <Text3D
+        :text="myReactiveText"
+        font="/fonts/FiraCodeRegular.json"
+        center
+        need-updates
+      />
+    </Suspense>
   </TresCanvas>
 </template>
 ```