[Sugestão] Página estática "pisca" o conteúdo mesmo sem a session

Com o código sugerido no curso, o conteúdo da página "protegida" aparece em alguns milissegundos na tela, até a promisse do getSession retornar. Rodando localmente, essa velocidade depende do processamento, mas imagino que uma aplicação online, esse request pro backend pode demorar um pouco mais e nesse meio tempo, o conteúdo aparece pro usuário.

Pra contornar isso, fiz uma pequena modificação no retorno do Componente no Wrapper:

export function withSessionHOC(Component) {
  return function Wrapper(props) {
    const router = useRouter();
    const session = useSession();

    if (!session.loading && session.error) {
      router.push('/?error=401')
    }

    const newProps = {
      ...props,
      session: session.data.session
    }

    return (
      <>
        {!session.loading && !session.error &&
          <Component {...newProps} />
        }
      </>
    )
  }
}

Ao invés de retornar o componente com as novas props diretamente, envolvi num Fragment e coloquei uma condicional verificando o loading e o error da session. Dessa forma a página fica em branco e o conteúdo só aparece caso a sessão seja validada.

Ao invés da tela em branco, opcionalmente daria pra mostrar uma tela de loading ou algo do tipo com session.loading ? <Loading /> : <Component {...newProps} />, por exemplo.