Maintenant, bien sûr, lors du stockage d'une commande, il serait également intéressant de voir
un petit spinner ici lorsque nous cliquons sur le bouton commander maintenant jusqu'à ce que cela soit fait et que
nous puissions également l'implémenter, nous avons juste besoin d'aller à l'écran du panier qui est où
nous expédions cette action pour envoyer une commande, ici nous expédions et maintenant expédions ici renvoie bien
sûr une promesse à la fin, juste parce que retirer du panier, ce qui est le cas lorsque nous cliquons sur ce bouton, et commander, ajouter une commande renverra
un promesse à la fin grâce à notre changement, donc l'expédition renverra donc une promesse, c'est
donc ici que nous pouvons contrôler notre état de chargement.
Maintenant, pour rendre cela un peu plus lisible, je vais le retirer de cette
fonction anonyme ici et créer une nouvelle fonction stockée dans une constante
ici dans mon composant mais en dehors de l'arborescence jsx et je nommerai ce gestionnaire d'ordre d'envoi ou quelque chose comme ça.
C'est la même fonction que j'ai utilisée auparavant,
maintenant je m'en occuperai au gestionnaire d'envoi de commande et maintenant l'idée est simple, ici ajouter la commande retournera une promesse comme je l'ai
dit, la répartition retourne donc une promesse, donc nous pouvons ajouter async ici donc que nous pouvons
à nouveau utiliser async attendre et gérer le chargement et éventuellement aussi l'état d'erreur comme nous l'avons fait auparavant.
Il nous suffit donc d'importer l'état d'utilisation de React et, bien sûr, d'initialiser à nouveau notre état.
Nous avons donc ici isLoading et set isLoading et initialement c'est faux et si vous le souhaitez, je ne le ferai pas ici, mais si vous le souhaitez, vous pouvez
également
ajouter la gestion des erreurs de la même manière que nous l'avons fait auparavant avec use state error, peut-être
utiliser effect pour ensuite afficher une alerte et ainsi de suite, je vais
me concentrer sur la partie chargement.
Alors maintenant, ici, dans le gestionnaire d'ordre
d'envoi, j'appellerai set isLoading et le définirai sur true,
puis nous attendons cette répartition, alors nous attendons que cette promesse soit terminée et encore une
fois, cela enveloppe de manière invisible les pièces par la suite dans un bloc puis parce que par la
suite je va redéfinir
le chargement sur faux, nous ne chargeons plus et nous pouvons maintenant l'utiliser pour afficher un indicateur d'activité.
Importons donc ici l'indicateur d'activité de React Native et ce que je veux faire est ici au lieu du
bouton commander maintenant, je
veux montrer cet indicateur pendant que je charge. Donc, ici, je peux vérifier si isLoading est vrai, si c'est
le cas, je vais montrer mon indicateur d'activité avec une taille disons petite et une couleur de couleurs, dont vous devez vous assurer qu'il est importé, principal et
qu'il se ferme automatiquement et sinon, si nous ne chargeons pas, eh bien je vais
montrer ce bouton bien sûr.
Alors ici, je veux rendre ce bouton dans le cas contraire et maintenant essayons.
Enregistrons cela, ajoutons cela
à la carte peut-être deux fois, cliquez sur commander maintenant, nous
avons vu le spinner pendant une fraction de seconde ici et maintenant si nous jetons un coup d'œil aux commandes, voici notre commande.
Maintenant, assurons-nous que les commandes se chargent également lorsque nous visitons l'écran.