1
Course Intro
6m 37s
2
Enable React Concurrent Mode
2m 48s
3
Fetch Data with React Suspense
3m 42s
4
Handle React Suspense Errors with an Error Boundary
2m 12s
5
Write a generic React Suspense Resource factory
4m 57s
6
Refactor data fetching with useEffect to Suspense Resources
5m 2s
7
Where to Position React Suspense and Error Boundaries
3m 5s
8
Improve Suspense loading states with useTransition
6m 22s
9
Use CSS Transitions to Avoid a Flash of Loading State
3m 38s
10
Modify Suspense Config to Avoid a Flash of Loading State
3m 7s
11
Cache React Suspense Resources
4m 10s
12
Preload Images to Improve Loading Performance
5m 5s
13
Create a Custom Suspending Image Component
5m 8s
14
Implement the Fetch as you Render Approach for Improved Performance
5m 36s
15
Create a Custom Hook that Creates Resources
3m 20s
16
Use SuspenseList for Coordinating Suspending Components
6m 14s
17
Fetch Modules Eagerly for SuspenseList
5m 6s
18
Wrapping Up with Experimental React Suspense
1m 12s

Modify Suspense Config to Avoid a Flash of Loading State

React0.0.0-experimental-b53ea6ca0

Share this video with your friends

This video uses an experimental API that has been changed. useTransition no longer accepts a SUSPENSE_CONFIG. Learn more.

By improving the loading experience for users with fast connections, we actually made the experience worse for people with slower connections using two additional configuration options busyDelayMs and busyMinDurationMs allowing us to communicate with React: "If the busy time takes at least x milliseconds, then show the busy state for at least y milliseconds."

Course

Use Suspense to Simplify Your Async UI

Viktor Soroka

~ 5 years ago

In the end, there is a combination of CSS transition with the config to the useTransition. It would be handy to have just another option in the config in order to avoid having in mind CSS stuff IMO.