Working with spinner fallbacks

The simplest fallback that you can use with the Suspense component is some text that indicates to the user that something is happening. The fallback property can be any valid React element, which means that we can enhance the fallback to be something more visually appealing. For example, the react-spinners package has a selection of spinner components, all of which can be used as a fallback with Suspense.

Let's modify the App component from the Simulating latency section to include a spinner from the react-spinners package as the Suspense fallback:

import React, { Suspense } from "react";
import { FadeLoader } from "react-spinners";
import MyPage from "./MyPage";

export default function App() {
  return (
    <Suspense fallback={<FadeLoader color={"lightblue"} size={150} />}>
      <MyPage />
    </Suspense>
  );
}

The FadeLoader component will render a spinner that we've configured with a...