Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Avoid Too Many Spinners with React SuspenseList’s tail Prop

    reactReact
    ^0.0.0-experimental-b53ea6ca0

    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
    Code

    Code

    Become a Member to view code

    You must be a Pro Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    orLog In
    Discuss

    Discuss

    Transcript

    Transcript

    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.