How can I implement a loading indicator with React Suspense?

How can I implement a loading indicator with React Suspense?

You can use React Suspense to handle loading states by wrapping your components in a <Suspense> component and providing a fallback UI.

What should I put in the fallback prop?

In the fallback prop, you can put any loading indicator, like a spinner or a simple text message, to show while the content is loading.

Can you show me a code example?

Sure! Here's a simple example:

import React, { Suspense, lazy } from 'react';

const MyComponent = lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <MyComponent />
    </Suspense>
  );
}

What if I have multiple components to load?

You can nest multiple <Suspense> components or use a single one to wrap all your lazy-loaded components, each with its own fallback.