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

Social Share Links

Send Tweet
Published 5 years ago
Updated 3 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.

~ 9 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today