Configuração de Animações de Carregamento no React Router

Configuração de Animações de Carregamento no React Router

Adicionar animações de carregamento entre transições de rotas pode melhorar significativamente a experiência do usuário em suas aplicações React. Neste tutorial, vamos explorar como alcançar isso utilizando o React Router e algumas bibliotecas de animação populares.

Por que usar animações de carregamento?

As animações de carregamento ajudam a manter os usuários engajados enquanto esperam pela nova página ou componente ser carregado. Elas oferecem uma sensação de continuidade e podem reduzir a percepção do tempo de espera. Além disso, uma boa animação pode adicionar um toque profissional ao seu aplicativo.

Preparando o ambiente

Antes de começarmos, certifique-se de que você tem um ambiente React configurado. Se você ainda não tem, crie um novo projeto usando o Create React App:

npx create-react-app meu-app
cd meu-app
npm install react-router-dom
npm install react-transition-group

Neste código, estamos instalando o React Router para gerenciamento de rotas e o react-transition-group para animações. O react-transition-group fornece uma maneira simples de adicionar animações ao ciclo de vida de componentes React.

Configurando o React Router

Agora, vamos configurar o React Router em nosso aplicativo. Abra o arquivo src/App.js e adicione o seguinte código:

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Home from './Home';
import About from './About';
import LoadingAnimation from './LoadingAnimation';

const App = () => {
    return (
        <Router>
            <LoadingAnimation />
            <Switch>
                <Route path='/' exact component={Home} />
                <Route path='/about' component={About} />
            </Switch>
        </Router>
    );
};

export default App;

Aqui estamos configurando uma estrutura básica de rotas com duas páginas: Home e About. A LoadingAnimation é um componente que vamos criar para mostrar a animação de carregamento.

Criando o componente de animação de carregamento

Agora, vamos criar o componente LoadingAnimation.js. Crie um arquivo na pasta src com o seguinte conteúdo:

import React from 'react';
import { CSSTransition } from 'react-transition-group';
import './LoadingAnimation.css';

const LoadingAnimation = () => {
    return (
        <CSSTransition
            in={true}
            timeout={300}
            classNames='fade'
            unmountOnExit
        >
            <div className='loading'>Carregando...</div>
        </CSSTransition>
    );
};

export default LoadingAnimation;

Nesse código, utilizamos o CSSTransition do react-transition-group para aplicar uma animação de fade ao nosso texto de carregamento. O in={true} significa que a animação será exibida assim que o componente for montado.

Estilizando a animação

Agora, crie um arquivo LoadingAnimation.css na pasta src e adicione o seguinte estilo:

.loading {
    font-size: 24px;
    color: #333;
    text-align: center;
    margin-top: 20%;
}

.fade-enter {
Opacity: 0;
}

.fade-enter-active {
Opacity: 1;
    transition: opacity 300ms;
}

.fade-exit {
Opacity: 1;
}

.fade-exit-active {
Opacity: 0;
    transition: opacity 300ms;
}

Aqui, definimos o estilo do texto de carregamento e as classes para a animação de entrada e saída. O efeito de fade é alcançado ajustando a opacidade do elemento.

Integrando a animação com o ciclo de vida das rotas

Para que a animação apareça apenas durante a transição entre as rotas, precisamos usar o useLocation do React Router e o hook useEffect para controlar quando a animação deve ser exibida.

Modifique o LoadingAnimation.js para:

import React, { useEffect, useState } from 'react';
import { CSSTransition } from 'react-transition-group';
import { useLocation } from 'react-router-dom';
import './LoadingAnimation.css';

const LoadingAnimation = () => {
    const location = useLocation();
    const [loading, setLoading] = useState(false);

    useEffect(() => {
        setLoading(true);
        const timer = setTimeout(() => {
            setLoading(false);
        }, 1000);
        return () => clearTimeout(timer);
    }, [location]);

    return (
        <CSSTransition
            in={loading}
            timeout={300}
            classNames='fade'
            unmountOnExit
        >
            <div className='loading'>Carregando...</div>
        </CSSTransition>
    );
};

export default LoadingAnimation;

Neste trecho, estamos utilizando o useEffect para detectar alterações na localização. Quando uma nova rota é acessada, o estado loading é definido como true, exibindo a animação por um segundo antes de ser ocultada.

Conclusão

Neste tutorial, você aprendeu a implementar animações de carregamento entre trocas de rotas no React Router. Ao utilizar o react-transition-group, conseguimos adicionar animações simples, mas eficazes, que melhoram a experiência do usuário. Experimente ajustar os estilos e o tempo da animação para se adequar ao seu projeto. Com esses passos, você estará um passo mais perto de criar uma interface de usuário mais envolvente e interativa em suas aplicações React!

A Importância das Animações de Carregamento em Aplicações React

As animações de carregamento são um aspecto importante do design de interfaces modernas. Elas não apenas embelezam um aplicativo, mas também ajudam na gestão da expectativa do usuário. Ao implementar uma animação de carregamento, você garante que os usuários estejam cientes de que uma ação está em progresso, o que pode ser crucial em aplicações com carregamento assíncrono. Além disso, a escolha da animação deve refletir a identidade visual do seu aplicativo, garantindo uma experiência coesa e profissional.

Algumas aplicações:

• Melhoria na experiência do usuário
• Redução da percepção de tempo de espera
• Adição de um toque profissional ao design

Dicas para quem está começando

• Teste diferentes animações e veja qual se encaixa melhor no seu projeto.
• Use animações sutis para não distrair o usuário.
• Considere o tempo de carregamento real ao definir a duração da animação.

Compartilhe este tutorial