+
++ Learn how Suspense works under the hood, preparing you for the future of asynchronous state management. +
+
+
+ Kent C. Dodds 💻 📖 🚇 ⚠️ |
-  Filipp Riabchun 💻 |
-  lauchness 💻 |
-
NOTE: This ship is not equipped with any weapons.
+ )} +
+ NOTE: This ship is not equipped with any weapons.
+ )} +
+ NOTE: This ship is not equipped with any weapons.
+ )} +
+ 
+ NOTE: This ship is not equipped with any weapons.
+ )} +
+
+ NOTE: This ship is not equipped with any weapons.
+ )} +
+
+ NOTE: This ship is not equipped with any weapons.
+ )} +
+
+ NOTE: This ship is not equipped with any weapons.
+ )} +
+
+ NOTE: This ship is not equipped with any weapons.
+ )} +
+
+ NOTE: This ship is not equipped with any weapons.
+ )} +
+
+ NOTE: This ship is not equipped with any weapons.
+ )} +
+
+ NOTE: This ship is not equipped with any weapons.
+ )} +
+
+ NOTE: This ship is not equipped with any weapons.
+ )} +
+
+ NOTE: This ship is not equipped with any weapons.
+ )} +
+
+ NOTE: This ship is not equipped with any weapons.
+ )} +
+
+ NOTE: This ship is not equipped with any weapons.
+ )} +
+
+ NOTE: This ship is not equipped with any weapons.
+ )} +
+
+ Create a new ship
+{error.message}
+
+ NOTE: This ship is not equipped with any weapons.
+ )} +
+
+ Create a new ship
+{error.message}
+
+ NOTE: This ship is not equipped with any weapons.
+ )} +
+
+ Create a new ship
+{error.message}
+
+ NOTE: This ship is not equipped with any weapons.
+ )} +
+
+ Create a new ship
+{error.message}
+
+ NOTE: This ship is not equipped with any weapons.
+ )} +
+
+ Create a new ship
+{error.message}
+
+ NOTE: This ship is not equipped with any weapons.
+ )} +
+
+ Create a new ship
+{error.message}
+
+ NOTE: This ship is not equipped with any weapons.
+ )} +
+
+ NOTE: This ship is not equipped with any weapons.
+ )} +
+
+ NOTE: This ship is not equipped with any weapons.
+ )} +
+
+ NOTE: This ship is not equipped with any weapons.
+ )} +
+
+ NOTE: This ship is not equipped with any weapons.
+ )} +
+
+ NOTE: This ship is not equipped with any weapons.
+ )} +
+
+ NOTE: This ship is not equipped with any weapons.
+ )} +
+
+ 
+```
+
+If we were to change the `src` of the image, the browser would start loading the
+new image and only replace the old image when the new one has finished
+downloading. This is probably what you want (you wouldn't want to get a flicker
+of no image at all while the new image is loading).
+
+The trouble is, what if in addition to rendering an updated image, there's
+updated content as well? The user would see the old image displayed alongside
+the new content until the new image is loaded. This is easier to visualize, so
+take this for example:
+
+
+
+In the video above, the network speed has been artificially slowed down to a 3G
+network speed and the cache has also been cleared. As a result, once a different
+space ship is selected, the data request for the new ship takes about 2 seconds.
+Once the data has loaded, React re-renders the UI with the new data, including
+the `img` `src` attribute. However, the browser leaves the old `src` attribute
+in place to avoid a flicker of no image at all while the new image is loading.
+
+The new image takes almost 10 seconds to download, all the while, the old image
+is still being displayed. This could be confusing to users and not a great user
+experience. It would be better for us to have more control over that experience.
+
+All you need to do to make this work with suspense is have some mechanism to
+load the image in an async function. When the promise resolves, you know the
+image is ready to be resolved. We can actually take advantage of the browser's
+built-in caching mechanism to make this work by assuming that if we request the
+image twice, the second request will be faster because the image is cached.
+
+So all we need to do is create an image, set it's `src`, and set the `onload`
+and `onerror` event handlers to resolve or reject a promise. Here's an example:
+
+```tsx
+function preloadImage(src: string) {
+ return new PromiseSomething went wrong!
+Select a ship from the list to see details
+ )} + +NOTE: This ship is not equipped with any weapons.
+ )} +Something went wrong!
+Select a ship from the list to see details
+ )} + +NOTE: This ship is not equipped with any weapons.
+ )} +Something went wrong!
+Select a ship from the list to see details
+ )} + +NOTE: This ship is not equipped with any weapons.
+ )} +Something went wrong!
+Select a ship from the list to see details
+ )} + +NOTE: This ship is not equipped with any weapons.
+ )} +Something went wrong!
+Select a ship from the list to see details
+ )} + +NOTE: This ship is not equipped with any weapons.
+ )} +Something went wrong!
+Select a ship from the list to see details
+ )} + +NOTE: This ship is not equipped with any weapons.
+ )} +{error.message}
- {error.message}
- })
- {error.message}
-
-
-
-
-
- 
- 
- 
- 
- }.jpg`})
- 
-}
-
-export default Spinner
diff --git a/src/suspense-list/spinner.module.css b/src/suspense-list/spinner.module.css
deleted file mode 100644
index 5ac80e74..00000000
--- a/src/suspense-list/spinner.module.css
+++ /dev/null
@@ -1,23 +0,0 @@
-/* inspired by https://codepen.io/igorsheg/pen/MBpwGw */
-
-.pulse {
- margin: auto;
- display: block;
- width: 40px;
- height: 40px;
- border-radius: 50%;
- box-shadow: 0 0 0 rgba(138, 0, 0, 0.4);
- animation: pulse 1.3s infinite;
-}
-
-@keyframes pulse {
- 0% {
- box-shadow: 0 0 0 0 rgba(138, 0, 0, 0.4);
- }
- 70% {
- box-shadow: 0 0 0 25px rgba(138, 0, 0, 0);
- }
- 100% {
- box-shadow: 0 0 0 0 rgba(138, 0, 0, 0);
- }
-}
diff --git a/src/suspense-list/style-overrides.css b/src/suspense-list/style-overrides.css
deleted file mode 100644
index a0abf659..00000000
--- a/src/suspense-list/style-overrides.css
+++ /dev/null
@@ -1,7 +0,0 @@
-#root {
- height: 100vh;
-}
-
-input {
- background-color: white;
-}
diff --git a/src/utils.js b/src/utils.js
deleted file mode 100644
index fe78b38e..00000000
--- a/src/utils.js
+++ /dev/null
@@ -1,194 +0,0 @@
-import React from 'react'
-import pkg from '../package.json'
-// if you need this to work locally then comment out the import above and comment in the next line
-// const pkg = {homepage: '/'}
-
-// You really only get the benefit of pre-loading an image when the cache-control
-// is set to cache the image for some period of time. We can't do that with our
-// local server, but we are hosting the images on netlify so we can use those
-// instead. Note our public/_headers file that forces these to cache.
-const fallbackImgUrl = `${pkg.homepage}img/pokemon/fallback-pokemon.jpg`
-preloadImage(`${pkg.homepage}img/pokeball.png`)
-preloadImage(fallbackImgUrl)
-
-// this is just a hacky error boundary for handling any errors in the app
-// it just shows "there was an error" with a button to try and re-render
-// the whole app over again.
-// In a regular app, I recommend using https://npm.im/react-error-boundary
-// and reporting errors to a monitoring service.
-class ErrorBoundary extends React.Component {
- state = {error: null}
- static getDerivedStateFromError(error) {
- return {error}
- }
- componentDidCatch() {
- // log the error to the server
- }
- tryAgain = () => this.setState({error: null})
- render() {
- return this.state.error ? (
- {this.state.error.message}
- 
-