Animate a Universal React Loading Component using Delay Options and Component Hooks
If you’d like to perform an animation while a component is loading you can achieve this by setting a minimum delay and forcing it to always happen. You can then use the onBefore and onAfter hooks on the component to set some local state within your parent component. This local state can be used to trigger the animation.
Instructor: [00:00] What if you want to take more control over the loading animations between each tab?
[00:05] The first thing you need to do is set loading transition to false. This will ensure that, when you move from, in this case, one tab to the other, we're not going to see any loading indicator. We are still going to get the minimum delay of 500 milliseconds. When I go from home to foo, it waits 500 milliseconds, and then immediately pops in foo as loaded.
[00:28] If I try to go back to home, which was already loaded, you'll see it's instantaneous. There's no delay. We can force a delay by using the alwaysDelay option and setting that to true. When I refresh and go to foo, there's a delay, and there's also one going back to home.
[00:45] This forced delay will allow us to do some CSS transitions, and knowing that there'll always be a delay, we know that our transitions will always have the time that they need to animate.
[00:55] Let's add a couple things to our component to get this working. I'm going to add some loading state that defaults to false, and I want to add two handlers, a loadStart handler, and this is going to set the state so that loading is equal to true. We're also going to make a loadEnd handler, and that's going to set loading to false.
[01:26] Now, down on our Universal tab, this is the component that was created by using the Universal higher-order component. There's several props that are automatically added to this output component. Two of them are onBefore and onAfter.
[01:40] OnBefore accepts a function, and it will be called, every time, before this component is loaded. OnAfter is called, every time, after this component is finished loading. Now let's manually add back our loading indicator. We're going to examine the state and see if it's loading. If so, we want to show the loading component.
[02:10] We'll go ahead and refresh. Now, when we go from home to foo...and you can see I've actually moved it to the upper right, because maybe I want a little bit different of a loading indicator for this page. That allows us to customize where the loading can happen.
[02:27] We can take this a little further and wrap our universal tab in a div, and then we're going to go ahead and give this a classname that, when a state is loading, it'll have a classname of loading. Otherwise, it will be empty.
[02:52] Let's add a little bit of CSS. When it's loading, we want to set the opacity to zero, and we're going to give that a transition of 500 milliseconds to match our min delay. Now, when it's not loading, we want the opacity to be one, and also still have an opacity transition of 500 milliseconds. Let's refresh and see how that looks.
[03:31] Now we have a nice fade-out and fade-in as we go from tab to tab. If I navigate back to a previously loaded tab, it's still going to fire the animation, because we're using alwaysDelay.