Show a Spinner While a Component is Loading using Recompose

[00:00] I have a withUserData higher-order component here. It fetches some user data, and it passes the data to any wrapped component. I'm using it here around my user component. It receives the user data in the form of name and status, and it's checking if name or status are undefined.

[00:19] It wants to show a spinner, otherwise show the user. If I refresh, I can see a spinner shows up for a couple seconds until the data is received. I would like to separate out the concern of the spinner. I'm going to store that into its own component.

[00:43] I'm also going to remove this logic here. Now, I'll declare a new higher-order component called withSpinnerWhileLoading. We'll make use of the branch higher-order component from Recompose. Branch is similar to an if-then statement.

[00:59] The first parameter is a predicate. If the predicate is true, it will render the second parameter. If it's false, it will render the third parameter. Our predicate is the WhileLoading part. We want to check if it's loading.

[01:20] If it is loading, I want to render a component, and I want to render the spinner component. The third parameter is actually optional. If you don't supply it, it will fall back to rendering the wrapped component. I often find that I don't supply a third parameter.

[01:35] Now, I have to define our isLoading predicate. The predicate in the branch higher-order component always takes in the component's props. Instead of checking for name or status, I'd like to be a little bit more deliberate.

[01:53] Let's go ahead and add a loading prop, and I'll just check for that. We'll return it. It'll either be true or false. Now, I need to add that.

[02:07] I'll add a getInitialState hook, and I'll make sure to return loading set to true initially. When I get my data, I want to set loading to false. Now, I want to compose both the withUserData and withSpinnerWhileLoading higher-order components into a single higher-order component.

[02:40] We'll use that one instead. I should be able to refresh and still see the same, exact behavior as before.