Configure a Custom Universal React Loading Component
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.
Instructor: [00:00] 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.
[00:21] 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.
[00:51] 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.
[01:18] 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.
[01:43] 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.
[01:57] 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.
[02:20] 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.