Use componentDidCatch@react16 to render Card & Spin loading

[dancerphil]

• I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

We can change

const { loading, data } = this.props;
return (
  <Card loading={loading} >
    {data && <DisplayComponent data={data} />}
  </Card>
);

to

// render loading when data is a promise & render DisplayComponent when data is fulfilled
const { data } = this.props;
return (
  <Card>
    <DisplayComponent data={data} />
  </Card>
);

They are not equivalent, and the new implement need data to be a promise to work.

So we can catch data as if (typeof data.then === 'function) { await data; }'

It may be more obvious if react release its Suspense

I think it is a later feature, but worth discussing.

What does the proposed API look like?

componentDidCatch

demo@otakustay

demo@react

[zombieJ]

Thanks for your advice.
Since consider of compatibility with react (15.x or 16.x which not support suspense), we will not include the suspense feature until old version of react not support yet.