feat(recommend): add status state (loading, stalled, idle)

[francoischalifour]

The problem

There was an issue where we rendered the fallbackComponent during first render because we checked props.recommendations.length === 0, which is the case before sending the request. Thus, when using RelatedProducts in fallbackComponent, it sent another request, which was unnecessary.

This solution

This PR adds the loading status of the component in the API, and uses it to render the fallback component when there's no recommendations and that the status is idle.

Possible statuses are idle, loading and stalled. The stalled status is useful to render product placeholders after xms, to reduce UI flashes as opposed to rendering it when loading.

In the future, we might want to expose the stalled threshold value to the user, so that they can synchronize their placeholder content with other pieces on their website.

Considerations

Notice that the useStatus hook in Preact and in React have an identical implementation, which is a bummer. I don't think we can use the same code here without additional tooling.

[Haroenv]

Code looks good, but I think we could have a useStatus factory to share between react & preact

[Haroenv]

could we make a factory where useEffect, useRef, useState as passed to the hook creator, so we can share the implementation?

[shortcuts]

Where would you see this implementation? If we have this duplication more frequently in the future, we could have a recommend-hooks package but right now it doesn't fit in VDOM or core IMO

[Haroenv]

it could fit in vdom, seeing as only react-like api lives there at the moment. Whenever we would add Vue, I guess a different api than purely hooks would be needed, but not yet atm

[francoischalifour]

I think it's a bit too soon to abstract this, but we should definitely define a strategy if these duplications need to grow.

[shortcuts]

Looks clean!

[Haroenv]

let's keep it in mind for the future