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

    Display Loading States Conditionally with React.useTransition's isPending Boolean

    reactReact
    ^0.0.0-experimental-b53ea6ca0

    It's a good practice to give users immediate feedback while asynchronous work is being completed.

    useTransition returns a boolean we can use to conditionally render loading UI. This boolean is the second element in the array useTransitions returns. By convention, it's assigned to a variable named isPending.

    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 We're using the useTransition hook and setting the optional timeoutMS option for 1,000 seconds. What that's doing is ensuring that if we're on a slowish connection, as we click through these, it'll hold on to the previous Pokemon name rendering as we wait for the next Pokemon to resolve. I'll click, we wait, the next one shows up.

    0:24 That's better than all of this jumping back to the receded state, and us seeing "Loading Pokemon" again. Unfortunately, we don't see anything happen immediately as we click this button. React gives us a way to indicate that the button was clicked even while we're waiting for more data to arrive.

    0:41 That comes in via the second element of the useTransition hook, which is called by convention isPending. This is Boolean, so we can use it to render UI conditionally. Let's say in our button we wanted to add a couple of dots. We'd say isPending is true will show a couple dots there, save that.

    1:06 As we click through on our slow connection, we'll see these dots rendered in place. That happens immediately, even though the data hasn't come back yet. As soon as the data does come back, those go away.

    1:18 We can also use isPending for props like disabled. If we don't want this button to be pressed again, we can use isPending here. While it is true, we won't be able to click this button. As I go over here on our slow connection, hit Next, you can see that the button is disabled. I can't touch it again until the next Pokemon arrives back.

    1:44 What I'd really love is a little spinner right over here by the Pokemon name. Let's implement that using isPending. We add another JSX block, isPending is true, we'll render delaySpinner. Because this isn't a workshop on CSS, I'm going to do you a favor and just paste in a component that I've already made.

    2:09 At eye level, this is pretty simple. It's just an emoji spinner, wrapped in a span with some ARIA attributes, so that can be read by a screen reader and a class with some inline CSS to make it rotate. As we click through, we'll see a little emoji spinner right up here.

    2:32 That's really nice. It's a little over the top with these dots and this button, so take those out. We have a nice little experience here.