With Suspense, We can load the skelton or fallback component, elements.
We can pass our components in `fallback` prop.
E.g.
In below example we wrap the <Suspense>
component for our <SlowComponent>
component.
In Suspense
component we have pass the fallback
prop.
It contain the element <span>Loading..</span>
as a fallback to our slow component.
So, Until our <SlowComponent>
component load, we see the fallback element.
import { Suspense } from 'react';
const SlowComponent = () => {
return <h3>Slow Component</h3>
}
const App = () => {
return (
<Suspense fallback={<span>Loading..</span>}>
<SlowComponent />
</Suspense>
)
}
export default App;