Suspense - Vue 3

Introdução

O suspense é uma featured que foi implementada no Vue 3. O suspense é um componente especial como o transition, e pode ser utilizado para colocar um "loading" na tela enquanto um componente não carrega por completo.

O que mostra que um componente finalizou o seu carregamento por completo, é quando a função setup finaliza o seu processamento. O setup, basicamente falando, é a função que entrou pra substituir o data.

Antes dessa feature, era necessário criar algumas variáveis para saber se o componente foi carregado, se ele carregou e não tem dados, ou se ainda está carregando, para que fosse possível colocar o comportamento de "loading"" na tela. Com o suspense, isso fica mais implícito, facilitando a escrita desse tipo de componente, e o entendimento para quem está lendo.

Estrutura do Suspense

Estruturalmente, é um componente mais tranquilo de visualizar e entender o que está fazendo, veja um exemplo:

<Suspense>
  <template #default>
    <ListaDeProdutos />
  </template>
  <template #fallback>
    <div>Carregando...</div>
  </template>
</Suspense>

No caso, o componente <Suspense> envolve o componente que será renderizado. O primeiro template, significa que será mostrado na tela, o componente que está dentro dele, porém só será renderizado, assim que a função setup dele finalizar seu processamento. O segundo template, que é o que contém a #fallback, irá ser mostrado na tela enquanto a função setup do componente ListaDeProdutos não finaliza o seu processamento.

Múltiplos componentes

Dentro do template #default, é possível colocar diversos componentes, e o próprio suspense irá continuar fazendo seu controle normalmente, porém, só irá exibir todos os componentes, assim que a função setup de todos sejam processadas.

<Suspense>
  <template #default>
    <ListaDeProdutos />
    <ListaDeClientes />
    <InformacoesDoCaixa />
  </template>
  <template #fallback>
    <div>Carregando...</div>
  </template>
</Suspense>

Exemplo prático

Para este exemplo, vou utilizar uma instalação padrão do Vue. Nesse projeto, irei criar um componente chamado ListProductsComponent.vue, dentro do diretório de componentes, dentro dele só terá um texto e o componente setup com um setTimeout para simular uma função assíncrona, dessa forma:

//ListProductsComponent.vue
<template>
  <div>
      teste de componente de listagem 
  </div>
</template>

<script>
export default {
    name: 'ListProductsComponent',
    async setup(){
        const promise = new Promise( (resolve) => {
            setTimeout(function(){
                resolve('Sucess');
            }, 4000);
        });

        const product = await promise;
        return {
            product
        }
    }
}
</script>

Com isso, esse componente irá demorar 4 segundos para finalizar o processamento dos dados que estão dentro do setup.

Posterior a criação do componente, será necessário realizar a importação deste, dentro do App.vue. Depois de importado, agora é preciso colocar o componente suspense, e os templates default e de fallback, para que tudo funcione corretamente, o App.vue deve ficar assim:

//App.vue
<template>
  <img alt="Vue logo" src="./assets/logo.png">

  <Suspense>
    <template #default>
      <list-products-component />
    </template>
    <template #fallback>
      <div>Loading...</div>
    </template>
</Suspense>
  
</template>

<script>
import ListProductsComponent from './components/ListProductsComponent.vue'

export default {
  name: 'App',
  components: {
    ListProductsComponent
  }
}
</script>

Com esse código, o resultado será que quando carregar a tela, irá aparecer a tela de loading, e só depois de 4 segundos que irá aparecer o componente com o texto adicionado.

Vídeo completo sobre o Suspense

Caso você prefira acessar esse conteúdo em vídeo, gravei um completo sobre esse assunto, no vídeo tem um slide detalhado sobre cada ponto do Suspense, mostrando passo a passo na teoria, e também tem um exemplo prático de como realizar a criação de um projeto com o Vue3, e a implementação do componente Suspense, veja o vídeo:

https://youtu.be/RI3CvQcXJwE

Conclusão

O Vue 3 irá adicionar novas funcionalidades a fim de melhorar o desenvolvimento, o processamento, deixar projetos mais leves, e entre outras coisas. Essa é uma das novidades dessa versão, em breve irei trazer mais conteúdos sobre o Vue 3, até o próximo post :)

Rererências:

https://vueschool.io/articles/vuejs-tutorials/suspense-new-feature-in-vue-3/

https://vuejsdevelopers.com/2020/07/13/vue-async-components-suspense/