Handling Loading with Suspense

Pascual Vila
Frontend Instructor.
Suspense is a React component that allows you to "wait" for some code to load dynamically and show a loading indicator in the meantime. It's commonly used together with React.lazy to implement lazy loading of components, but it can also be useful for other asynchronous operations like data fetching.
Using Suspense to show a fallback:
{`import React, { lazy, Suspense } from 'react';
const AnotherLazyComponent = lazy(() => import('./AnotherLazyComponent'));
function Dashboard() {
return (
Dashboard
Loading Dashboard...}>
);
}
export default Dashboard;`}
The fallback prop of Suspense accepts any React element you want to display while the deferred component is loading. This provides a smoother user experience.