Buscando dados com o Fetch (Parte 2)

A busca de dados nem sempre pode ser rápida, então é importante que o usuário tenha um retorno visual caso tenha de esperar o carregamento.

Criando o Loading

Para armazenar o estado do carregamento, utilizaremos novamente o useState. Veja a criação abaixo:

  const [isLoading, setLoading] = useState(true)

Após isso, iremos setar o isLoading para true no início do carregamento e para false assim que os dados estiverem carregados. Veja abaixo como deve ficar a função getPostsNaAPI():

const getPostsNaAPI = async () => {
    try {
      setLoading(true)
      const response = await fetch('https://dev-backend-imd.herokuapp.com/api/posts');
      const posts = await response.json()
      setPosts(posts.posts)
    } catch (error) {
      setPosts([])
      alert('Falha ao acessar servidor. Tente novamente mais tarde!')
    } finally {
      setLoading(false)
    }
  }

Por fim, antes de exibir os dados em tela, iremos verificar se o carregamento finalizou ou não. Caso os dados tenham sido totalmente carregados, eles serão utilizados para exibição. Caso contrário, será exibido um componente de carregamento próprio do react native.

Veja um exemplo abaixo:

return (
    <View style={styles.container}>
      {isLoading
        ? <ActivityIndicator />
        : <Text style={{ fontSize: 20 }} > {posts.length > 0 ? posts[0].titulo : 'Não possui postagens carregadas'}</Text>
      }
      <StatusBar style="auto" />
    </View>
);