Pattern for tracking loading states. Demo of typescript discriminated union

loading-state.ts

export type LoadingStatus = 'idle' | 'loading' | 'fulfilled' | 'rejected';
export type LoadingState<T, E = Error> =
  | { state: 'idle' }
  | { state: 'loading' }
  | { state: 'fulfilled'; data: T }
  | { state: 'rejected'; error: E };

export const LoadingStates = {
  idle<T, E = Error>() {
    return { state: 'idle' } as LoadingState<T, E>;
  },
  pending<T, E = Error>() {
    return { state: 'loading' } as LoadingState<T, E>;
  },
  fulfilled<T, E = Error>(data: T) {
    return { state: 'fulfilled', data } as LoadingState<T, E>;
  },
  rejected<T, E = Error>(error: E) {
    return { state: 'rejected', error } as LoadingState<T, E>;
  },

  map<TSource, TOutput, E = Error>(source: LoadingState<TSource, E>, f: (a: TSource) => TOutput): LoadingState<TOutput, E> {
    if (source.state === 'fulfilled') {
      return { state: 'fulfilled', data: f(source.data) };
    } else {
      return source as LoadingState<TOutput, E>;
    }
  },
};