Ahora, por supuesto, al almacenar un pedido, también sería bueno si vemos un
pequeño giro aquí cuando hacemos clic en el botón ordenar ahora hasta que se haga esto y podamos implementar
esto también, solo tenemos que ir a la pantalla del carrito que está donde enviamos
esta acción para enviar un pedido, aquí enviamos y ahora enviamos aquí, por supuesto, devuelve una
promesa al final, justo porque eliminar del carrito, que es el caso cuando hacemos clic en este botón, y el pedido, agregar pedido devolverá un prometemos al
final gracias a nuestro cambio, por lo que el envío devolverá una promesa, por lo
que es aquí donde podemos controlar nuestro estado de carga.
Ahora para que sea un poco más legible, lo sacaré de esta función anónima
aquí y en realidad crearé una nueva función almacenada en una constante
aquí en mi componente pero fuera del árbol jsx y nombraré este controlador de orden de envío o Cualquier cosa como eso.
Esa es la misma función que usé antes,
ahora solo me ocuparé de esto con el controlador de envío de pedidos y ahora la idea es simple, aquí agregar pedido devolverá una promesa como
dije, el despacho por lo tanto devuelve una promesa, por lo que podemos agregar asíncrono aquí para que nuevamente
podemos usar async wait y administrar la carga y posiblemente también el estado de error como lo hicimos antes.
Por lo tanto, solo necesitamos importar el estado de uso de React y, por supuesto, inicializar nuestro estado nuevamente.
Así que aquí tenemos isLoading y establece isLoading e inicialmente eso es falso y, si lo desea, lo que no haré aquí, pero si lo desea, también puede agregar el
manejo
de errores de la misma manera que lo hicimos antes con el error de estado de uso, tal vez
use el efecto para luego mostrar una alerta y así sucesivamente, me
enfocaré en la parte de carga.
Entonces, aquí, en el controlador de
envío de pedidos, llamaré a set isLoading y
estableceré esto en true, luego esperamos este envío, así que esperamos hasta que esta promesa
se complete y nuevamente esto envuelve invisiblemente las partes en un bloque de entonces porque luego configurará la
carga de nuevo en
falso, ya no estamos cargando y ahora podemos usar eso para mostrar un indicador de actividad.
Así que vamos a importar el indicador de actividad de React Native aquí y lo que quiero hacer es aquí en
lugar del botón de
ordenar ahora, quiero mostrar ese indicador mientras estoy cargando. Entonces, aquí puedo verificar si isLoading es verdadero, si es el
caso, mostraré mi indicador de actividad con un tamaño de digamos pequeño y un color de colores, que debe asegurarse de que sea importado, primario y que
se cierre automáticamente y de lo contrario si no estamos cargando, bueno, entonces mostraré
este botón, por supuesto.
Así que aquí quiero representar este botón en el caso else y ahora vamos a intentarlo.
Vamos a guardar eso, agregue
esto a la tarjeta tal vez dos veces, haga clic en
ordenar ahora, vimos la ruleta por una fracción de segundo aquí y ahora si echamos un vistazo a las órdenes, aquí está nuestra orden.
Ahora asegurémonos de que los pedidos también se carguen cuando visitemos la pantalla.