Mejorar la experiencia de usuario en una aplicación React requiere señales visuales claras cuando algo está cargando. Si tu app consume una API como PokeAPI y el usuario no sabe qué está pasando mientras llega la respuesta, perdés confianza y claridad. Acá vas a aprender a integrar un loader con el componente Spin de Ant Design conectado a Redux.

¿Por qué usar un loader cuando consumes una API en React?

Cuando hacés una petición a una API, hay un tiempo entre que disparás el fetch y recibís los datos. Sin un indicador visual, el usuario cree que la app está rota o congelada.

Un loader resuelve eso con una señal simple: "esperá, algo está pasando". En el proyecto de Pokémon que veníamos construyendo con la PokeAPI, ese feedback faltaba por completo. Recargabas la página y no había nada que indicara la carga.

¿Qué es un loader en una aplicación web? Es un elemento visual, normalmente un spinner, que aparece mientras una acción asíncrona está en curso. Le indica al usuario que el sistema está trabajando.

¿Cómo integrar el componente Spin de Ant Design?

Ant Design ofrece un componente llamado Spin que ya viene listo para mostrar estados de carga. Lo importás directamente en tu archivo App.js y lo usás con dos propiedades clave.

• spinning: un boolean que define si el spinner aparece o no.
• size: el tamaño del spinner, que en este caso configuramos como large.

Para centrarlo dentro del layout, usamos el sistema de grid de Ant Design con un Col de span 12. Acá está el detalle que suele confundir: si querés moverlo al centro, no alcanza con span, necesitás también la propiedad offset, porque span define cuánto espacio ocupa, no dónde se ubica.

¿Dónde colocar el Spin en el layout?

Envolvés el Spin dentro de una columna del grid y le aplicás el offset adecuado. Después agregás un marginBottom de 10 píxeles en el estilo para que no quede pegado al buscador.

¿Cómo conectar el loader al estado global con Redux?

Mostrar el spinner siempre no sirve. Querés que aparezca solo mientras la API responde. Para eso necesitás manejar un estado de carga dentro de Redux y dispararlo justo antes y después del fetch.

El flujo tiene cuatro piezas que trabajan en cadena:

1. Agregar la propiedad loading al initial state del reducer, con valor inicial false.
2. Crear un action type exportando una constante llamada SetLoading en el archivo de tipos.
3. Crear el action creator setLoading que recibe un payload booleano y retorna el objeto de acción.
4. Manejar el caso SetLoading dentro del reducer, devolviendo el estado anterior con la propiedad loading actualizada al valor del payload.

Este patrón puede parecer mecánico cuando el cambio de estado es tan simple, pero es la base para escalar cualquier feature en Redux.

¿Qué hace un action creator en Redux? Es una función que retorna un objeto con un type y un payload. Ese objeto viaja al reducer, que decide cómo modificar el estado.

¿Cómo leer el estado loading desde el componente?

En App.js usás useSelector para acceder a la propiedad loading del estado. Después envolvés el render en una condición: si loading es true, mostrás el Spin; si es false, renderizás la lista de Pokémon.

jsx {loading ? <Spin spinning={loading} size="large" /> : <PokemonList />}

¿Cuándo disparar la acción setLoading dentro de useEffect?

Acá está el detalle que rompe el flujo si lo olvidás: tener el action creator no sirve de nada si nunca lo disparás. El lugar correcto es dentro del useEffect donde hacés el fetch de Pokémon.

La lógica es directa:

• Antes de iniciar el fetch, despachás setLoading(true).
• Cuando el fetch termina, despachás setLoading(false).

Así el spinner aparece apenas se monta el componente y desaparece cuando los datos llegan. Recargás la página y ves el loader unos instantes, después se muestra la lista completa de Pokémon.

¿Por qué necesito dispatch para cambiar el estado en Redux? Porque el estado es inmutable y solo se modifica a través de acciones. dispatch es la función que envía la acción al reducer para que produzca el nuevo estado.

Con esto, tu UI ya comunica lo que está pasando. El siguiente paso del proyecto es activar el botón de favoritos para que cada Pokémon pueda marcarse desde la lista. ¿Vos cómo manejás los estados de carga en tus apps de React, con Redux o con un state local?