- Where possible avoid them altogether
- If the load time is less than a second then the flash is likely worse than the benefit
- When possible hold the space and structure of the component during the loading state
- It’s disorienting the for the component to look completely different during it’s loading state than it does once it’s loaded. Use skeleton screens to improve your users ability to react once your page finishes loading
- When using multiple components on the page, ideally they all load together to prevent the page from jumping around. It’s very difficult for the user to do anything of value during this time.
- Ideally, you coordinate your components to boot and finish loading together to optimize for the user. Again skeleton states can help mask the fact that your components take different amounts of time to load.
Spinner Use Cases
- Complete Load - we are unable to render anything about the component until it is fully loaded. We should look to avoid these whenever possible.
- Section Load - we show the structure of the component, but are waiting for it’s content to load.
Use a progress bar instead of a spinner if the expected load time is longer than 4 seconds. Progress Bars vs. Spinners When to Use Which