https://github.com/jaredpalmer/react-conf-2018
React Conf 2018 Source Code for "Moving to Suspense" Demo
https://github.com/jaredpalmer/react-conf-2018
react react-suspense spotify
Last synced: 8 months ago
JSON representation
React Conf 2018 Source Code for "Moving to Suspense" Demo
- Host: GitHub
- URL: https://github.com/jaredpalmer/react-conf-2018
- Owner: jaredpalmer
- License: mit
- Created: 2018-10-24T23:13:56.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-03-01T03:27:44.000Z (about 7 years ago)
- Last Synced: 2024-12-19T06:08:09.351Z (over 1 year ago)
- Topics: react, react-suspense, spotify
- Language: JavaScript
- Homepage:
- Size: 30.4 MB
- Stars: 227
- Watchers: 5
- Forks: 29
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Moving to React Suspense
By [Jared Palmer](https://twitter.com/jaredpalmer) at [React Conf 2018](https://conf.reactjs.org).
---
This is the source code to the application I demo'd at React Conf 2018. It is a small slice of Spotify called Suspensify. It's built with create react app, reach router, and good ol' setState.
- [Watch the full talk on YouTube](https://youtu.be/SCQgE4mTnjU)
- [Download Slides](https://github.com/jaredpalmer/react-conf-2018/raw/master/MovingToReactSuspense.key)
- [Checkout "The Platform"](https://github.com/palmerhq/the-platform)
It's separated into 3 folders:
- `before-suspense` is the initial state of the application.
- `conf-talk-progress` is where we end up--the final state of my talk--so you can follow along.
- `after-suspsense` is a version where every single thing that can be moved to suspense, has been moved to suspense. I did not get this far in my talk, but it's there for completeness / reference.
## Running locally
```
cd conf-talk-progress
yarn start
```
> Note the Ken Wheeler and Wale routes do not work. I didn't bother making fake data for them. Sorry. Only the Drake and Big Sean routes work (first 2 results).
> In the `patches` directory, there is a patched version of CRA's `config/webpackDevServer.config.js` that adds a little express middleware that will delay the high-res images from loading for demo purposes. It sniffs any requests including with `-hd.jpeg` and waits for the value of `delay` query parameter. The `` request latency slider is used to set this query parameter's value for all images.
## What's it look like?
