Para desenvolvedores React Native que buscam aprimorar a experiência do usuário, adicionar um shimmer effect durante o carregamento de dados pode ser uma excelente solução. Também conhecido como “skeleton loader”, esse efeito visual simula o carregamento do conteúdo, mantendo o usuário engajado e informando que a aplicação está ativa. Neste artigo, vamos explorar como implementar esse recurso utilizando a biblioteca react-native-skeleton-placeholder, transformando a percepção de desempenho da sua aplicação.
Por que usar um Shimmer Effect?
O shimmer effect, também conhecido como skeleton loader, é uma técnica que melhora a experiência do usuário ao exibir um espaço reservado enquanto o conteúdo real está sendo carregado. Ele proporciona uma transição suave entre o carregamento e a exibição dos dados, transmitindo uma sensação de maior responsividade no aplicativo.
Ao invés de mostrar uma tela em branco ou um indicador de carregamento genérico, o shimmer effect replica a estrutura da interface, preenchendo-a com formas animadas que simulam o conteúdo que está por vir. Isso ajuda a reduzir a percepção de espera e mantém o usuário engajado, já que ele tem uma ideia do que esperar quando os dados forem carregados.
Além de melhorar a percepção de velocidade, o shimmer effect também contribui para a estética do aplicativo, tornando-o mais moderno e sofisticado. A animação sutil e elegante do skeleton loader pode transmitir uma sensação de cuidado e atenção aos detalhes, o que pode aumentar a satisfação do usuário.
Implementar um shimmer effect é uma maneira eficaz de otimizar a experiência do usuário, oferecendo um feedback visual atraente durante o carregamento de dados e mantendo o engajamento do usuário. Para saber mais sobre como otimizar a experiência do usuário, você pode conferir este artigo sobre SamMobile lança novo design de site com foco na experiência do usuário.
Integrando react-native-skeleton-placeholder
Para criar o shimmer effect, utilizaremos o pacote react-native-skeleton-placeholder. A instalação é simples e rápida, permitindo que você adicione esse efeito visual ao seu aplicativo em poucos passos.
Para instalar o pacote, execute o seguinte comando no seu terminal:
npm install react-native-skeleton-placeholderApós a instalação, você poderá importar o componente SkeletonPlaceholder e utilizá-lo para criar o efeito de carregamento simulado em sua interface.
Este pacote oferece uma variedade de opções de customização, permitindo que você ajuste a aparência do skeleton loader para corresponder ao design do seu aplicativo. Você pode alterar as cores, formas e tamanhos dos elementos, criando um efeito visual que se integra perfeitamente à sua interface.
Com o react-native-skeleton-placeholder, adicionar um shimmer effect ao seu aplicativo React Native se torna uma tarefa simples e eficiente, permitindo que você melhore a experiência do usuário e crie uma interface mais atraente e responsiva.
Implementando o Skeleton Loader
Abaixo, apresentamos a função que renderiza o skeleton loader enquanto os dados estão sendo buscados. Este componente utiliza o SkeletonPlaceholder para criar um efeito visual que simula o carregamento do conteúdo.
import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
import { View, StyleSheet } from 'react-native';
const renderSkeletonView = () => {
return (
<View style={styles.skeletonContainer}>
{[1, 2, 3, 4, 5, 6].map((_, index) => (
<SkeletonPlaceholder key={index} backgroundColor="#333">
<SkeletonPlaceholder.Item
flexDirection="column"
alignItems="center"
style={{ marginBottom: 20 }}>
<SkeletonPlaceholder.Item
width={160}
height={240}
borderRadius={8}
/>
<SkeletonPlaceholder.Item
width={120}
height={20}
marginTop={15}
/>
<SkeletonPlaceholder.Item
width={90}
height={15}
marginTop={10}
/>
</SkeletonPlaceholder.Item>
</SkeletonPlaceholder>
))}
</View>
);
};
const styles = StyleSheet.create({
skeletonContainer: {
flexDirection: 'row',
flexWrap: 'wrap',
justifyContent: 'space-between',
paddingHorizontal: 10,
},
});
Neste código, o componente renderSkeletonView renderiza uma série de espaços reservados com formas e tamanhos variados. Esses espaços são preenchidos com uma cor de fundo escura e exibem uma animação de shimmer, criando a ilusão de que os dados estão sendo carregados.
O componente utiliza um loop para renderizar vários itens de skeleton, cada um com um formato diferente. Isso ajuda a simular a estrutura da interface real e proporciona uma experiência de carregamento mais realista.
Os estilos definidos no objeto styles controlam o layout e o espaçamento dos elementos do skeleton loader, garantindo que ele se encaixe perfeitamente na sua interface.
Para complementar a experiência, você pode considerar usar a Xiaomi HyperOS Global terá nova tela de chamadas, que oferece uma interface mais moderna e intuitiva.
Integrando o Skeleton Loader em FlatList
Agora, vamos integrar o skeleton loader ao nosso componente principal. Quando isLoaderActive for verdadeiro, o shimmer effect será exibido. Caso contrário, a lista de dados será mostrada.
import Animated from 'react-native-reanimated';
const [isLoaderActive, setIsLoaderActive] = useState(false);
const onRefresh = useCallback(done => {
setIsLoaderActive(true);
setTimeout(() => {
setIsLoaderActive(false);
isReadyToRefresh.value = false;
done();
}, 3000);
}, []);
{isLoaderActive ? (
renderSkeletonView()
) : (
<Animated.FlatList
data={data}
scrollEventThrottle={16}
bounces={false}
renderItem={renderItem}
key={2}
numColumns={2}
keyExtractor={(_, index) => index.toString()}
ItemSeparatorComponent={() => <View style={{ height: 20 }} />}
/>
)}
Neste trecho de código, utilizamos o estado isLoaderActive para controlar a exibição do skeleton loader. Quando o usuário aciona a função onRefresh, o estado isLoaderActive é definido como verdadeiro, o que faz com que o componente renderSkeletonView seja renderizado em vez da lista de dados.
Após um período de tempo simulado (3 segundos neste exemplo), o estado isLoaderActive é definido como falso, o que faz com que a lista de dados seja exibida novamente. Essa transição suave entre o skeleton loader e a lista de dados proporciona uma experiência de carregamento mais agradável para o usuário.
O componente Animated.FlatList é utilizado para renderizar a lista de dados de forma eficiente, permitindo que você exiba grandes quantidades de informações sem comprometer o desempenho do aplicativo. Este componente oferece uma variedade de opções de customização, permitindo que você ajuste a aparência e o comportamento da lista para corresponder ao design do seu aplicativo.
Para quem busca melhorar a experiência de uso em dispositivos móveis, saber Como usar o App Freeze no Android 15 para liberar espaço pode ser uma boa alternativa.
Adicionar um shimmer effect pode melhorar significativamente a experiência do usuário, tornando a interface mais interativa e agradável. Essa implementação simples, porém eficaz, aprimora a percepção de desempenho e mantém os usuários engajados durante o carregamento de dados. Sinta-se à vontade para experimentar diferentes estruturas de skeleton que se alinhem ao design da interface do seu aplicativo.
Este conteúdo foi auxiliado por Inteligência Artificial, mas escrito e revisado por um humano.
Via Dev.to