Change queries and mutation loading from boolean to enums

[davidgtu]

While I super love using useQuery and useMutation, I find myself writing a lot of code that looks like this:

const MyComponent = () => {
  const { data, loading } = useQuery(myQuery, { variables: { id: '12345' } });

  return (
    <Container>
      {loading && <LoadingCircle />}
      {!loading && (
        // rest of my component
      )}
    </Container>
  );
}

It definitely could be the way I'm using it, but I wonder what everyone else thinks of changing loading from boolean to enums. Something like

enum LoadingStates {
  Initial = 'Initial',
  Loading = 'Loading',
  Success = 'Success,'
  Failed = 'Failed,
}

That way it can be more verbose in its usage:

return (
  <Container>
    {loading === 'Loading' && <LoadingCircle />}
    {loading === 'Success' && (
      // rest of component
    )}
  </Container>
);

or maybe even helper functions:

export const isLoading = (loading: LoadingState): boolean => loading === 'Loading';
export const isLoaded = (loading: LoadingState): boolean => loading === 'Success';

return (
  <Container>
    {isLoading(loading) && <LoadingCircle />}
    {isLoaded(loading) && (
      // rest of component
    )}
  </Container>
);

etc.