Show a Spinner While a Component is Loading using Recompose

Tim Kindberg
InstructorTim Kindberg

Share this video with your friends

Send Tweet

Learn how to use the 'branch' and 'renderComponent' higher-order components to show a spinner while a component loads.

Nikolaj
Nikolaj
~ 4 years ago

Great course! Really appreciate it.

But that this example is somehow not working. It seems like the initial state is not passed into the component. I first thought I made something wrong in my development, but then I ran the code provided in Plunker, and that does not show the Spinner either...

When I replace the getInitialState method with the property state: { loading: true } it works for me.

Tim Kindberg
Tim Kindberginstructor
~ 4 years ago

Thanks you Nikolai! Looks like Recompose just released an update that replaced createClass usage with class extends Component usage behind the scenes. So I'll have to update the example.

Tim Kindberg
Tim Kindberginstructor
~ 4 years ago

Example has been updated to show state property usage instead of getInitialState method usage.

Nathan
Nathan
~ 4 years ago

Is there a good way to externalize the withSpinnerWhileLoading outside of a component? I am not sure I am asking that correctly.

I was hoping to do something like the following but I cant seem to figure it out.

const enhance =
  compose(
    connect(
      (state, props) => {
        return {
          name: state.user.name
        }
      },
      {saveLease, saveTenant}
    ),
    withSpinnerWhileLoading({
      isLoading: (props) => {
        return !props.name
      }
    }),
  )

where withSpinnerWhileLoading looks like

export const withSpinnerWhileLoading = ({isLoading}) => branch(
    isLoading,
    renderComponent(Spinner)
)