# loading-suspense
**Wrap async components in Suspense.**
## Why It Matters
R3F integrates with React Suspense for loading states. Components using `useGLTF`, `useTexture`, or other async loaders will suspend and need a Suspense boundary with a fallback.
## Basic Example
```jsx
import { Suspense } from 'react';
import { Canvas } from '@react-three/fiber';
import { useGLTF } from '@react-three/drei';
function Model() {
const { scene } = useGLTF('/model.glb');
return ;
}
function App() {
return (
);
}
function LoadingFallback() {
return (
);
}
```
## Multiple Async Components
```jsx
function Scene() {
return (
}>
);
}
```
## Nested Suspense Boundaries
```jsx
function Scene() {
return (
<>
{/* Environment loads first */}
{/* Main content with visible loader */}
}>
{/* Background loads last, no blocking */}
);
}
```
## Using useProgress
```jsx
import { useProgress, Html } from '@react-three/drei';
function Loader() {
const { active, progress, errors, item, loaded, total } = useProgress();
return (
{progress.toFixed(0)}% loaded
{item}
);
}
function App() {
return (
);
}
```
## Error Boundaries
```jsx
import { ErrorBoundary } from 'react-error-boundary';
function ModelErrorFallback({ error, resetErrorBoundary }) {
return (
Failed to load model
);
}
function SafeModel({ url }) {
return (
{
// Reset any state if needed
}}
>
}>
);
}
```
## Preloading to Avoid Suspense
```jsx
import { useGLTF, useTexture } from '@react-three/drei';
// Preload at module level
useGLTF.preload('/model.glb');
useTexture.preload('/texture.png');
// Component won't suspend if already loaded
function Model() {
const { scene } = useGLTF('/model.glb'); // Instant if preloaded
return ;
}
```
## Animated Fallback
```jsx
function AnimatedLoader() {
const meshRef = useRef();
useFrame((state) => {
meshRef.current.rotation.x = state.clock.elapsedTime;
meshRef.current.rotation.y = state.clock.elapsedTime * 0.5;
});
return (
);
}
```
## References
- [React Suspense](https://react.dev/reference/react/Suspense)
- [Drei useProgress](https://github.com/pmndrs/drei#useprogress)