The whole idea with the lazy() and Suspense APIs is to provide a better user experience for both of the following:
- The initial load, by splitting code into bundles so that the whole app doesn't have to be downloaded upfront
- Providing consistent fallback content while code bundles load
Unless we can experience latency similar to what your users are likely to experience, we have no idea how effective our use of these APIs is. One way to address this issue is to simulate latency in the same way that you might simulate latency in a mock API call. In the mock function that returns a promise, you use a setTimeout() call that resolves the promise after some time, say, 3 seconds for example. Because the import() function returns a promise, we can use this to our advantage.
Here's an updated version of the MyPage component from the top-level suspense component example:
import React, { Fragment, lazy } from "react";
const MyFeature = lazy(() =>
Promise...
