Skeleton e shimmer no React Native: carregamento que parece rápido

No celular, a espera parece maior. Uma tela vazia com um indicador girando transmite lentidão; a mesma espera com a estrutura da tela já desenhada, pulsando suavemente, parece curta. É o mesmo princípio dos skeletons na web (Feedback assíncrono: por que trocar spinners genéricos por skeleton screens).

Como fazer bem no app

1. 1.Mesmo formato do conteúdo real: avatar redondo, linhas de texto com larguras variadas, imagem retangular.
2. 2.Mesmas dimensões: quando os dados chegam, nada se desloca.
3. 3.Animação leve: um pulso de opacidade ou um brilho (shimmer) atravessando os blocos, rodando na thread de interface (Animações a 60fps no React Native com Reanimated).
4. 4.Poucos itens: o suficiente para preencher a tela, não a lista inteira.

function LinhaSkeleton({ largura }: { largura: DimensionValue }) {
  const opacidade = useSharedValue(0.4)
  useEffect(() => { opacidade.value = withRepeat(withTiming(1, { duration: 800 }), -1, true) }, [])
  const estilo = useAnimatedStyle(() => ({ opacity: opacidade.value }))
  return <Animated.View style={[{ height: 14, width: largura, borderRadius: 7, backgroundColor: '#2a2a2c' }, estilo]} />
}

Melhor ainda: dados em cache

Mostrar os dados da última visita enquanto busca os novos elimina a espera na maioria das aberturas (Offline-first: apps que continuam funcionando sem internet).

Acessibilidade

Anuncie "carregando" para leitores de tela e respeite a preferência de reduzir movimento (Acessibilidade em apps: VoiceOver e TalkBack sem mistério).

Listas

Skeletons combinam com listas virtualizadas e carregamento progressivo (Listas lentas no React Native: FlatList, FlashList e memorização na prática).

A We Codex desenvolve apps com acabamento premium. Veja aplicativos nativos ou fale com a gente.