React Suspense carregamento lento sem fallback

Aug 28 2020

Eu quero carregar meus componentes com preguiça para diminuir o tamanho do pacote inicial e obter componentes em tempo real usando a divisão de código usando o roteador de reação.

No entanto, ao usar o React Suspense, eles forçam você a usar um fallback para carregamento.
Isso não funcionaria:

const lazyLoadComponent = Component =>
    props => (
        <Suspense> // Missing fallback property
            <Component {...props} />
        </Suspense>
    );

No meu caso, estou renderizando html do servidor, então não quero usar um spinner.
Isso criaria uma cintilação inútil na minha tela! Ou seja:

  • Carregamentos HTML
  • O espaço reservado aparece
  • PageComponent para a rota é carregado
  • Eu tenho meu próprio spinner que carrega um feed de dentro do componente da página

No meu caso, o html corresponde ao componente react que é carregado.

Existe algum hack conhecido para contornar facilmente esse problema (exceto para criar um carregador para qualquer rota que copie o html (!!), que por sinal, tornaria o carregamento lento inútil).

Estou um pouco descontente por nos "forçar" a adicionar um carregador e não entendo a lógica por trás da decisão de torná-lo obrigatório.

Respostas

tolotra Aug 28 2020 at 06:00

Tente usar a divisão de código nos documentos

fallbackprops é apenas um elemento React, você pode configurá-lo para null.

<Suspense fallback={null}>
    <ComponentImportedByLazy />
</Suspense>
html_programmer Aug 28 2020 at 21:41

Eu criei um problema para isso no Github:https://github.com/facebook/react/issues/19715

Não existe uma solução limpa atual usando React-Router / React.
No entanto, isso está previsto em uma versão futura usando o modo simultâneo. Como mencionado por Dan Abramov:

Em relação ao seu pedido de recurso concreto, acho que posso reformulá-lo de maneira um pouco diferente. Não é que você queira "retorno opcional", pois isso não faria sentido para novas telas (temos que mostrar algo). O que acredito que você esteja procurando é uma maneira de pular a exibição do fallback se o conteúdo já estiver em HTML. É exatamente assim que o React se comporta no Modo Concorrente, então a solicitação de recurso já está implementada (e eventualmente se tornará o comportamento padrão em uma versão estável).

Para mim, não é um problema esperar, então atualmente vou omitir o carregamento lento das rotas, pois se trata de um projeto de hobby e tenho tempo para esperar por uma versão futura.