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

Already subscribed? Sign In

Autoplay

    Add a loading indicator to UI for request in progress using setState()

    Erik AybarErik Aybar

    In this lesson we will add state to our component to indicate whether we are loading to the user. We will "begin loading" before submitting our request to an API and then set "end loading" once the request is complete using Promise.prototype.then and setState(). This gives users a better experience than being left hanging wondering if their action of clicking the button had any effect. Now they will at least have some indication that work is being done while the request is in progress.

    reactReact
    ^16.0.0
    Code

    Code

    Become a Member to view code

    You must be a 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
    Transcript

    Transcript

    Instructor: 00:00 Just to illustrate this delay, let's go ahead, and we'll introduce a loading state. We'll fade out the entire list when we are loading. If we're loading, the style is going to equal. We're going to set some opacity here. Otherwise, if we're not loading, we'll set that to one.

    00:20 This needs to be an object with opacity property that we're setting. We've yet to introduce that state here, so we'll destructure that out of state along with our items. We'll set the default, and we'll begin as loading equals faults. What we're going to do here is, before we fire off the request, we're going to set state and we're going to set loading to true.

    00:47 Let's say immediately, we'll set that to true. When this is complete, after the request is complete, we'll set loading to false. Now, we have this fading in and out in between those requests.

    Discuss

    Discuss