How to implement "delayed loader" using apollo-client?

Question

I want to show the loader only when a certain period of time has elapsed. Apollo does provide a loading property but it'd show the loader instantaneously.

I was thinking of hacking something together using componentWillReceiveProps but if there's a more idiomatic way of doing this, I'd be more than happy to use that.

Answer 1

For this sort of thing I’d use componentDidUpdate and add in a setTimeout or perhaps a React state countdown timer. If it’s only a couple of seconds delay a setTimeout will be fine, but if it’s a long time perhaps state based countdown will be better.