Allow to display of a "fallback" component

[ptitFicus]

This component is super usefull when fetching data from remote server.

Since such an operation could fail, it would be great to allow the display of a "fallback" component that does not seems to load infinitly, but instead inform the user of the error.

I think it could look like this:

import loader from 'hoc-react-loader'

const Component = ({ users }) => <div>Component {JSON.stringify(users)}</div>
const Fallback = ({ error }) => <div className="error-message">{`Retrieval of users failed with error ${error}`}</div>

export default loader(Component, { wait: ['users'], error: ['error'], fallback: Fallback })

And error could also be specify as a function.

Thoughts?

[fabienjuif]

Hi !

This is something you can already do to the child component :

const Fallback = ({ error }) => <div className="error-message">{`Retrieval of users failed with error ${error}`}</div>
const Component = ({ users, error }) => (
  error ? 
    <Fallback error={error} /> : 
    <div>Component {JSON.stringify(users)}</div>
)

export default loader(Component, { wait : props => props.users || props.error })

Or with two loaders if you want to hide Fallback from Component :

const Component = ({ users }) => <div>Component {JSON.stringify(users)}</div>
const Fallback = ({ error }) => <div className="error-message">{`Retrieval of users failed with error ${error}`}</div>

export default loader(
  loader(Component, { wait: ['users'], LoadingIndicator: Fallback }),
  { wait: props => props.users || props.error },
)

That being said I like your idea with that in mind :

• error should be same as wait as it can handle an array or a function
• we should have a default fallback

For the default fallback Component, what about a little cross with errors on tooltip to be UI friendly ?

[ptitFicus]

Hi !

I don't really like the idea of modifying my child component or to wrap it with a something else that this HOC.
Adding another loader is definitely an option but since it's a very common need, I think it's worth adding this to the loader itself.

I like your idea of cross image as a default fallback ! We should try to find a cross image that remind the default loader.

I'll give it a try and open a PR as soon as possible.

[fabienjuif]

We then agree :)

I'm looking for your PR.

[fabienjuif]

I unassigned you @ptitFicus so anybody else can feel free to write this.
If you want to work on this again, you are welcomed :)