O carregamento de UIs e elementos visuais são componentes importantes em aplicativos web e móveis; eles desempenham um papel fundamental na melhoria da experiência e do envolvimento do usuário. Sem essas dicas, os usuários podem ficar confusos e incertos sobre se o aplicativo está funcionando corretamente, se acionaram as ações corretas ou se suas ações estão sendo processadas.

Ao fornecer aos usuários diversas dicas visuais que indicam o processamento em andamento, você pode mitigar efetivamente qualquer forma de incerteza e frustração – em última análise, impedindo-os de sair prematuramente do aplicativo.

Impacto do carregamento de UIs no desempenho e na experiência do usuário

As dez heurísticas de Jakob Nielsen para design de interface de usuário enfatizam a importância de garantir que o status atual do sistema seja visível para os usuários finais. Este princípio destaca a necessidade de componentes de interface do usuário, como carregamento de UIs e outras interfaces de feedback elementos para fornecer prontamente aos usuários feedback apropriado sobre os processos em andamento e dentro do necessário prazo.

O carregamento de UIs desempenha um papel fundamental na definição do desempenho geral e da experiência do usuário dos aplicativos. Do ponto de vista do desempenho, a implementação de telas de carregamento eficazes pode aumentar significativamente a velocidade e a capacidade de resposta de um aplicativo Web.

Idealmente, a utilização eficaz de UIs de carregamento permite o carregamento assíncrono de conteúdo – isso evita que a página inteira congele enquanto componentes específicos são carregados em segundo plano; essencialmente, criando uma experiência de navegação mais tranquila.

Além disso, ao oferecer uma indicação visual clara dos processos em andamento, é mais provável que os usuários aguardem pacientemente a recuperação do conteúdo.

Primeiros passos com React Suspense em Next.js 13

Suspense é um componente React que gerencia operações assíncronas executadas em segundo plano, como busca de dados. Simplificando, este componente permite renderizar um componente substituto até que o componente filho pretendido seja montado e carregue os dados necessários.

Aqui está um exemplo de como o Suspense funciona. Vamos supor que você tenha um componente que busca dados de uma API.

exportdefaultfunctionTodos() {
const data = fetchData() {
//fetch data...
return data;
 };
return<h1> {data.title} h1>
}
// the fallback component
exportdefaultfunctionLoading() {
return<p>Loading data ...p> }

Suspense exibirá o Carregando componente até que o conteúdo do Todos O componente termina de carregar e está pronto para renderização. Aqui está a sintaxe do Suspense para conseguir isso:

import { Suspense } from'react';
functionApp() {
return (
 <>
}>

 </Suspense>
 </>
 );}

Next.js 13 suporta React Suspense

Next.js 13 adicionou suporte para Suspense por meio de seu recurso de diretório de aplicativos. Essencialmente, trabalhando com o diretório do aplicativo permite incluir e organizar arquivos de páginas para uma rota específica em uma pasta dedicada.

Dentro deste diretório de rotas, você pode incluir um carregando.js arquivo, que Next.js utilizará como componente substituto para exibir a IU de carregamento antes de renderizar o componente filho com seus dados.

Agora, vamos integrar o React Suspense no Next.js 13 criando um aplicativo de demonstração de tarefas pendentes.

Você pode encontrar o código deste projeto em seu GitHub repositório.

Crie um projeto Next.js 13

Você construirá um aplicativo simples que busca uma lista de tarefas do API DummyJSON ponto final. Para começar, execute o comando abaixo para instalar o Next.js 13.

npx create-next-app@latest next-project --experimental-app

Defina uma rota para todos

Dentro de fonte/aplicativo diretório, crie uma nova pasta e nomeie-a Todos. Dentro desta pasta, adicione um novo página.js arquivo e inclua o código abaixo.

asyncfunctionTodos() {
asyncfunctionfetchTodos() {
let res = await fetch("https://dummyjson.com/todos");
const todosData = await res.json();
return todosData
 }
const {todos} = await fetchTodos();
asyncfunctionwait(ms) {
returnnewPromise(resolve => setTimeout(resolve, ms));
 }
await wait(3000); 
return (
 <> 

"todo-container">
"todo-list">
 {todos.slice(0, 10).map((todo) => (


"todos">

<h2>{todo.todo}h2> </li>
 </div>
 </ul>
 ))}
 </div>
 </div>
 </>
 );




}
exportdefault Todos;

A função assíncrona, Todos, busca uma lista de todos da API DummyJSON. Em seguida, ele mapeia a matriz de todos buscados para renderizar uma lista de todos na página do navegador.

Além disso, o código inclui um assíncrono espere função que simula um atraso, criando um cenário que permitirá ao usuário ver uma UI de carregamento por um período específico antes de exibir todos os itens buscados.

Em um caso de uso mais realista; em vez de simular um atraso, situações como atividades de processamento dentro de aplicativos, busca de dados em bancos de dados, consumindo as APIsou até mesmo tempos de resposta lentos da API causariam alguns breves atrasos.

Integre React Suspense no aplicativo Next.js

Abra o app/layout.js arquivo e atualize o código Next.js padrão com o código a seguir.

import React, { Suspense } from'react';
import Loading from'@/app/Todos/loading';
exportconst metadata = {
 title: 'Create Next App',
 description: 'Generated by create next app',
}
exportdefaultfunctionRootLayout({ children }) {
return (
"en">

}>
 {children}
 </Suspense>
 </body>
 </html>
 )
}

O app/layout.js arquivo em Next.js 13 serve como um componente de layout central que define a estrutura geral e o comportamento do layout do aplicativo. Neste caso, passando o crianças suporte para o Suspense componente, garante que o layout se torne um wrapper para todo o conteúdo do aplicativo.

O Suspense componente exibirá o Carregando componente como substituto enquanto os componentes filhos carregam seu conteúdo de forma assíncrona; indicando ao usuário que o conteúdo está sendo buscado ou processado em segundo plano.

Atualizar o arquivo de rota inicial

Abra o app/página.js arquivo, exclua o código Next.js padrão e adicione o código abaixo.

import React from'react';
import Link from"next/link";
functionHome () {
return (



Next.js 13 React Suspense Loading Example</h1>
"/Todos">Get Todos</Link>
 </div>
 </main>
 )
}
exportdefault Home;

Crie o arquivo loading.js

Finalmente, vá em frente e crie um carregando.js arquivo dentro do aplicativo/Todos diretório. Dentro deste arquivo, adicione o código abaixo.

exportdefaultfunctionLoading() {
return<p>Loading data ...p> }

Adicionando Spinners Modernos ao Componente UI de Carregamento

O componente de carregamento da UI que você criou é muito básico; você pode opcionalmente optar por adicionar telas de esqueleto. Alternativamente, você pode criar e estilizar componentes de carregamento personalizados usando Tailwind CSS em seu aplicativo Next.js. Em seguida, adicione animações de carregamento fáceis de usar, como spinners fornecidos por pacotes como Reagir Spinners.

Para usar este pacote, instale-o em seu projeto.

npm install react-loader-spinner --save

Em seguida, atualize seu carregando.js arquivo da seguinte forma:

"use client"
import { RotatingLines} from'react-loader-spinner'
functionLoading() {
return (



Loading the Todos ...</p> 
 strokeColor="grey"
 strokeWidth="5"
 animationDuration="0.75"
 width="96"
 visible={true}
 />
 </div>
 );
}
exportdefault Loading;

Agora, a interface de carregamento exibirá uma mensagem de carregamento e renderizará uma animação giratória de linhas para indicar o processamento contínuo enquanto busca os dados de Todos.

Melhore a experiência do usuário com o carregamento de UIs

Incorporar UIs de carregamento em seus aplicativos da web pode melhorar significativamente a experiência do usuário. Ao fornecer aos usuários dicas visuais durante operações assíncronas, você pode efetivamente minimizar suas preocupações e quaisquer incertezas e, consequentemente, maximizar seu envolvimento.