Outra coisa, uma outra coisa que a gente deve fazer aqui para o usuário final é quando a gente clicar no botão entrar, por exemplo, vai demorar um pouquinho para fazer o pedir HTTP para o Firebase e receber a resposta. Então nesse período a gente não quer mostrar esses botões. O modelo de fazer isso é como a gente, você se lembra que no estado que é dado pelo off reducer tem essa propriedade loaden, é para isso que a gente vai usar. Então quando a gente clicar em algum botão a gente vai dar setar o loaden para true, verdade, que vai fazer esses botões desaparecer temporariamente e quando dá o sucesso aqui ou dá o fail o loaden vai ser setado de novo para false e vai aparecer o botão de novo. E enquanto estiver loaden verdadeiro a gente quer mostrar aquele spinner, esse cara aqui, se lembra que teve o indicator, aquele negócio que fica rodando dizendo que está carregando. Então vamos lá. Primeiro a gente tem que, quando clicar o botão, mandar setar o loaden para true. Então vamos lá. Quando você clica no botão de entrar por exemplo, chama o onLoginPress, essa função onLoginPress chama o actionCreate chamado loginUser. Então vamos lá. Está dentro do index do actions, está bom? Eu já tenho aberto aqui. Vai para o ações, actions, barra index. Vamos lá para o actionCreate ou loginUser. Então ele vai despachar esse loginUserSuccess somente depois de que seja sucedido. Mas antes disso, enquanto não for sucedido a gente tem que despachar alguma ação assim. Então antes de fazer o pedido para o Firebase, eu vou despachar uma ação do tipo loginUser que a gente vai criar. Se você quiser, pode adicionar loading. Sempre assim, normalmente a gente tem o loginSuccess para sucedido, tem o fail e tem o loaden para indicar o estado de carregando, carregamento. Se você quiser adicionar, pode ser. Então vou adicionar loaden. Loading. Para a gente ter que definir esse tipo de ação, vai lá em cima, importa. Salva. Vai para o que? For types e define aqui. Sports, const, loginUser loading, user orders. Salva. E agora vamos no reducer. Está bom? Volta, vai para o option authReducer. Quando a gente caso seja loginUserLoading, o que a gente vai fazer? Só retornar o estado como está, copia as propriedades do estado anterior e adiciona loading com o true. Está bom? Manda o cara carregar. Vamos importar lá em cima. Salva. E agora vai dar loaden quando a gente clica entrar. Vamos lá tentar. Então, por que não está fazendo nada? Porque a gente esqueceu de adicionar a condição para esse cara desaparecer e aparecer as pinas. Vamos lá para o loginForm. E a gente só quer mostrar esses botões se o loading estiver falso. Primeiro coisa que a gente vai fazer é injetar esse loading, essa propriedade. Aqui no mapStateToProps, do loginForm, vai lá adiciona loading. Está bom? Então aqui no destruturamento, adiciona loading. Vai tirar a door e adiciona loading aqui. Agora a gente tem acesso via props para o loading. Como esses dois botões aqui, a gente quer fazer um ifStaple, se o que? Se thisPropsLoading, se for verdade, a gente não quer mostrar o botão, mas se não for loading, a gente mostra esses caras. Então se for loading, a gente vai mostrar o spinner, está bom? O spinner, se lembra? Sim, por diante. Eu vou tirar esses caras dentro daqui e vou fazer a função. É cortar desse ponto renderButton. Vou chamar de renderButtons no plural. E vou fazer essa função. Vamos lá. RenderButtons. Ok, então se o propsLoading é verdadeiro, a gente vai mandar o spinner retornar, returnSpinner. Se não, o que a gente vai fazer? Vai retornar esses caras. Return esses caras. Tem um detalhe porque tem dois componentes, então a gente só pode retornar um. Então eu vou adicionar essa view para poder funcionar. Adiciona view e... Está bom? Então vamos lá, vamos ver se está funcionando. Já a gente tem spinner aqui ou não? Vamos ver lá em cima se a gente importou. Ah, já está importado. Então está ok. Voltar aqui. Entrar. Se não, a gente vai aparecer o spinner, só fica nele, né? O atual de novo. Deu o spinner. A gente só falta mudar esse spinner de volta para aparecer o botão quando a gente receber a resposta do Firebase. Então vamos lá no action creator. A gente despacha o login user loading no momento que a gente vai fazer o pedido. E quando der a resposta, você nota que a gente está despachando o login user success ou está passando o login user fail. Então quando a gente lidar com esses dois tipos de ação, a gente tem que fazer o que? A gente tem que setar o loading para ser false, tá bom? Então vamos lá no reducer, off reducer. Tá bom? E no caso de ser sucesso, você pode retornar o initial state. Está tudo ok? Mas no caso de chefeio, a gente tem que também adicionar loading false. Vamos dar um refresh. Se eu clicar entrar, vai abrir o spinner e quando receber a resposta do erro, a gente vai mandar essa ação, tipo de ação e vai setar o loading para ser false e vai mostrar os botões de novo. Você quase não vê, né? Para ilustrar esse exemplo, eu vou dar um set time out no action creator só para você ver, você não tem que fazer isso. Aqui quando a gente receber a resposta, eu vou dar um set time out de uns dois segundos só vai despachar o sucesso ou a fail depois de dois segundos para você ver que está realmente funcionando. Eu pedi já tão rápido que você quase não vê o spinner. Então só vou botar o set time out aqui para despachar a ação somente depois de dois segundos no caso de sucesso e de fail. Você não precisa fazer isso, tá bom? É só para ilustrar o exemplo. Vou clicar, você note um, dois e volta, tá bom? Você está novamente um, dois, volta. Vamos dar o sucesso, caso de sucesso para ver se está funcionando. Sem a certa, entrar um, dois. Está aí. É. Dois, três, quatro, cinco, seis. Tudo ok? Fui para lá, deu o spinner, botão apareceu de novo. Tá? Vou remover esse time out, voltar aqui como era antes. Tá bom? Tá bom?