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
Become a member
to unlock all features

Level Up!

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


    Configure a Custom Universal React Loading Component

    Tim KindbergTim Kindberg

    We’ll go through the options related to loading. You have the ability to specify a custom loading component instead of the default Loading… component that react-universal-component will show for you. You can also set a minimum delay if you’d like the loading component to always show for some time—sometimes a quickly blinking loading component can appear unpolished.



    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




    Instructor: The Universal higher-order component actually accepts a second parameter of options. The first option is called minDelay. What it's going to fix is, when I navigate from tab to tab, you see a slight blink when you change tabs. This might not be a polished user experience.

    Something you can do, though, is use the minDelay option, and you can set it to something like 700 milliseconds or maybe 300, 500. It's up to you. Now, when you navigate from tab to tab, you'll actually see a little loading indicator between each tab. By default, Universal will show the text loading, with an ellipsis after it, so you don't have to specify any components to get that working.

    If you do want to customize the loading indicator, you can pass a custom loading component to this loading option. I've imported a loading component that I've made -- it's a very simple spinner -- and I'm going to pass that component to the loading option. Once I save that and refresh, now I'm going to see my spinner for 750 milliseconds between each tab.

    Lastly, there's an option that you can use if you don't want to show the loading transition at all. You can set loadingTransition to false. Now, when I go from home to foo, it'll still wait the min delay, but it will not show the spinner. When I click from foo to bar, it's going to wait 750 milliseconds, and then pop bar in.

    This is another way that you can get rid of the blink if you don't want to show a loading indicator. That's how Universal can help you with showing loading indicators. It takes care of knowing when something's loading.

    But what if you, as a dev, need to tell it when it's loading? There's an additional option on the component created from the Universal high-order component, and that option is called isLoading. You can pass this a Boolean, and if you pass it true, you can see we've now forced it into a loading state.

    You can hook this Boolean up to state, props, or whatever you might need, and easily switch on and off the loading indicator. It's going to use the same loading indicator that you specified on this loading option, or it will use the default one.