Discriminated Union Version

✅ Our component got longer, 
but is no more complex than before

function UserProfile({ request }: 
{ request: UserProfileRequest }) {
  switch (request.status) {
    case "fetching":
      return <Spinner />

    case "success":
      return <UserProfileCard user={request.data} />

    case "error":
      return (
        <ErrorMessage
          code={request.statusCode}
          message={request.errorMessage}
        />
      )

    case "refetch-after-error":
      return (
        <>
          <ErrorMessage
            code={request.statusCode}
            message={request.errorMessage}
          />
          <Spinner />
        </>
      )

    case "refetch-after-success":
      return <UserProfileCard 
      isLoading user={request.data} />
  }
}