Learn how to use the 'branch' and 'renderComponent' higher-order components to show a spinner while a component loads.
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.
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.
Example has been updated to show state
property usage instead of getInitialState
method usage.
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)
)