1. 18
    Avoid Too Many Spinners with React SuspenseList’s tail Prop
    1m 24s

Avoid Too Many Spinners with React SuspenseList’s tail Prop

Michael Chan
InstructorMichael Chan

Share this video with your friends

Send Tweet
Published 3 years ago
Updated 2 years ago

tail is a customization prop for SuspenseList. It works in tandem with revealOrder and has three options: undefined, collapsed, and hidden.

These options can be used to configure how fallbacks are displayed.

  • undefined: show all fallbacks
  • hidden: show no fallbacks
  • collapsed: show only the next fallback

Instructor: [0:00] SuspenseList gives us control over how these Suspense components render in the browser. revealOrder allows us to say that we want them to render forwards together or backwards, all of the Suspense components that are children of SuspenseList.

[0:17] Even with all of these options, we can have the problem of too many loading states. Fortunately, SuspenseList also has a prop for controlling how many loading states you see. That's the tail prop. It has two options, hidden and collapsed.

[0:34] Hidden doesn't show any loading items and collapsed shows only the next fallback in the list. Of course, by default, we see all of the fallbacks.

[0:45] Let's jump back and change this around a little bit. If we use the tail prop and change it to hidden, first, we won't see any of the loading states. They just pop in when they pop in. No Suspense fallbacks presented.

[1:01] Something that I really like to see is collapsed. This will show only the next loading state. We're fetching the Pokémon and then connecting to the database. Let's watch that one more time. Fetching Pokémon. Connecting to the database. I find that I'm using this combination right here, revealOrder="forwards" tail="collapsed", all the time.