docs(app): Improve docs examples with code group to avoid confusion

docs/guide/loaders/use-fbx.md

@@ -8,4 +8,43 @@ A composable that allows you to easily load glTF models into your **TresJS** sce
 
 ## Usage
 
-<<< @/.vitepress/theme/components/UseFBXDemo.vue{3,7,14-19}
+::: code-group
+```vue [app.vue]
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+import AsyncComponent from './AsyncComponent.vue'
+</script>
+
+<template>
+  <TresCanvas clear-color="#1F90FF">
+    <TresPerspectiveCamera :position="[11, 11, 11]" />
+    <OrbitControls />
+    <Suspense>
+      <AsyncComponent />
+    </Suspense>
+    <TresDirectionalLight
+      :intensity="2"
+      :position="[3, 3, 3]"
+    />
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>
+```
+```vue{2,6} [AsyncComponent.vue]
+<script setup lang="ts">
+import { useFBX } from '@tresjs/cientos'
+
+const path = 'https://raw.githubusercontent.com/'
+  + 'Tresjs/assets/main/models/fbx/low-poly-truck/Jeep_done.fbx'
+const { scene } = await useFBX(path)
+</script>
+
+<template>
+  <primitive
+    :object="scene"
+    :scale="0.025"
+  />
+</template>
+```
+:::

docs/guide/loaders/use-gltf.md

@@ -8,7 +8,43 @@ A composable that allows you to easily load glTF models into your **TresJS** sce
 
 ## Usage
 
-<<< @/.vitepress/theme/components/UseGLTFDemo.vue{3,7,14-16}
+::: code-group
+```vue [app.vue]
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+import AsyncComponent from './AsyncComponent.vue'
+</script>
+
+<template>
+  <TresCanvas clear-color="#F78B3D">
+    <TresPerspectiveCamera :position="[3, 2, 5]" />
+    <OrbitControls />
+    <Suspense>
+      <AsyncComponent />
+    </Suspense>
+    <TresDirectionalLight
+      :intensity="2"
+      :position="[3, 3, 3]"
+    />
+    <TresAmbientLight :intensity="1" />
+  </TresCanvas>
+</template>
+```
+```vue{2,6} [AsyncComponent.vue]
+<script setup lang="ts">
+import { useGLTF } from '@tresjs/cientos'
+
+const path = 'https://raw.githubusercontent.com/'
+  + 'Tresjs/assets/main/models/gltf/blender-cube.glb'
+const { scene } = await useGLTF(path, { draco: true })
+</script>
+
+<template>
+  <primitive :object="scene" />
+</template>
+```
+:::
 
 An advantage of using `useGLTF`is that you can pass a `draco` prop to enable [Draco compression](https://threejs.org/docs/index.html?q=drac#examples/en/loaders/DRACOLoader) for the model. This will reduce the size of the model and improve performance.
 

docs/guide/loaders/use-progress.md

@@ -44,3 +44,7 @@ Then you can use the `progress` value to show a loading bar or a spinner:
   </TresCanvas>
 </template>
 ```
+
+:::warning
+This component use top level await. Please check the [Suspense API](https://vuejs.org/guide/built-ins/suspense.html#suspense) for more info
+:::

docs/guide/loaders/use-video-texture.md

@@ -10,7 +10,47 @@ This composable is based on the Drei [useVideoTexture](https://github.com/pmndrs
 
 ## Usage
 
-<<< @/.vitepress/theme/components/VideoTextureDemo.vue{4,8-9,20}
+::: code-group
+```vue [app.vue]
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls } from '@tresjs/cientos'
+import AsyncComponent from './AsyncComponent.vue'
+</script>
+
+<template>
+  <TresCanvas clear-color="#333">
+    <TresPerspectiveCamera
+      :position="[0, 5, 9]"
+      :look-at="[0, 1, 0]"
+    />
+    <OrbitControls />
+    <Suspense>
+      <AsyncComponent />
+    </Suspense>
+    <TresGridHelper />
+    <TresAmbientLight />
+  </TresCanvas>
+</template>
+```
+```vue{3,8,13} [AsyncComponent.vue]
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Sphere, useVideoTexture } from '@tresjs/cientos'
+
+const videoPath = 'https://raw.githubusercontent.com/'
+  + 'Tresjs/assets/main/textures/video-textures/useVideoTexture.mp4'
+const texture = ref()
+texture.value = await useVideoTexture(videoPath, { loop: false })
+</script>
+
+<template>
+   <Sphere :position="[0, 2, 0]">
+      <TresMeshBasicMaterial :map="texture" />
+    </Sphere>
+</template>
+```
+:::
 
 ## Props
 

docs/guide/staging/use-environment.md

@@ -11,7 +11,7 @@ It uses the [CubeTextureLoader](https://threejs.org/docs/#api/en/loaders/CubeTex
 ## Usage
 
 ::: warning
-`UseEnvironment` needs to be wrapped by a Suspense component
+`UseEnvironment` needs to be wrapped by a Suspense component. Please check the [Suspense API](https://vuejs.org/guide/built-ins/suspense.html#suspense) for more info
 :::
 
 ```ts