@wecareu/loading

Componente de loading overlay com animação Lottie para WeCareU Design System.

Instalação

npm install @wecareu/loading @wecareu/icons @wecareu/theme lottie-react-native

Uso

1. Adicionar o Provider no App

import { LoadingProvider } from '@wecareu/loading';
import { ThemeProvider } from '@wecareu/theme';

export default function App() {
  return (
    <ThemeProvider>
      <LoadingProvider>
        {/* Seu app aqui */}
      </LoadingProvider>
    </ThemeProvider>
  );
}

2. Usar o hook useLoading

import { useLoading } from '@wecareu/loading';

function MyScreen() {
  const { show, hide, isVisible } = useLoading();

  const handleFetch = async () => {
    show(); // Mostra loading
    
    try {
      await fetchData();
    } finally {
      hide(); // Esconde loading
    }
  };

  return (
    <Button onPress={handleFetch} title="Carregar dados" />
  );
}

API

LoadingProvider

Provider que deve envolver seu app para disponibilizar o loading globalmente.

Props:

• children: ReactNode - Componentes filhos

useLoading()

Hook para controlar o loading de qualquer lugar do app.

Retorno:

• show: () => void - Mostra o loading overlay
• hide: () => void - Esconde o loading overlay
• isVisible: boolean - Estado atual do loading

Características

• ✅ Animação Lottie: Usa a animação "dots" do pacote @wecareu/icons
• ✅ Tema adaptável: Overlay se adapta ao tema claro/escuro
• ✅ Global: Controle de qualquer lugar via Context API
• ✅ TypeScript: Tipagem completa
• ✅ Acessibilidade: Modal com suporte a StatusBar

Dependências

• @wecareu/icons - Para a animação Lottie
• @wecareu/theme - Para cores e tema
• lottie-react-native - Para renderizar animações
• react >= 18.2.0
• react-native >= 0.74.0

Licença

UNLICENSED