Ora, ovviamente, quando si memorizza un ordine, sarebbe anche bello vedere un
piccolo spinner qui quando facciamo clic sul pulsante Ordina ora fino a quando non viene fatto e
possiamo implementare anche questo, dobbiamo solo andare alla schermata del carrello che è dove
spediamo questa azione per inviare un ordine, qui spediamo e ora spediamo qui ovviamente restituisce
una promessa alla fine, proprio perché rimuoviamo dal carrello, come nel caso in cui facciamo clic su questo pulsante, e l'ordine, aggiungi ordine restituirà un promessa
alla fine grazie al nostro cambiamento, quindi la spedizione restituirà quindi una promessa, quindi è
qui che possiamo controllare il nostro stato di caricamento.
Ora per renderlo un po 'più leggibile, lo sposterò da questa funzione anonima
qui e in realtà creerò una nuova funzione memorizzata in una costante
qui nel mio componente ma al di fuori dell'albero jsx e chiamerò questo gestore dell'ordine di invio o niente del genere.
Questa è la stessa funzione che ho
usato prima, ora mi occuperò solo del gestore degli ordini di invio e ora l'idea è semplice, qui aggiungere l'ordine restituirà una promessa
come ho detto, la spedizione quindi restituisce una promessa, quindi possiamo aggiungere asincronizzazione qui che possiamo usare
nuovamente async wait e gestire il caricamento e possibilmente anche lo stato di errore come abbiamo fatto prima.
Quindi dobbiamo solo importare lo stato d'uso da React e ovviamente inizializzare nuovamente il nostro stato.
Quindi qui abbiamo isLoading e set isLoading e inizialmente è falso e se vuoi ciò che non farò qui ma se vuoi, puoi anche aggiungere
la
gestione degli errori nello stesso modo in cui l'abbiamo fatto prima con use state error, forse
use effect per mostrare un avviso e così via, mi
concentrerò sulla parte di caricamento.
Quindi ora qui nel gestore degli
ordini di invio, chiamerò set isLoading e impostarlo
su true, quindi attendiamo questo dispacciamento, quindi aspettiamo che questa promessa sia terminata e di
nuovo questo avvolge in modo invisibile le parti da allora in poi in un blocco perché successivamente
reimposterà il caricamento
su false, non stiamo più caricando e ora possiamo usarlo per mostrare un indicatore di attività.
Quindi importiamo l'indicatore di attività da React Native qui e quello che voglio fare è qui invece
di quel pulsante
ora ordine, voglio mostrare quell'indicatore mentre sto caricando. Quindi qui posso verificare se isLoading è vero, se è
il caso, mostrerò il mio indicatore di attività con una dimensione diciamo piccola e un colore di colori, che è necessario assicurarsi che sia importato,
primario e che si chiude automaticamente e altrimenti se non stiamo caricando, allora
mostrerò questo pulsante ovviamente.
Quindi qui voglio renderizzare questo pulsante nell'altro caso e ora proviamo.
Salviamolo, aggiungilo alla scheda
forse due volte, fai clic su Ordina ora, abbiamo
visto lo spinner per una frazione di secondo qui e ora se diamo un'occhiata agli ordini, ecco il nostro ordine.
Ora assicuriamo che anche gli ordini vengano caricati quando visitiamo lo schermo.