Cómo hacer 'urlables' los spaces de la sección de componentes interactivos

ultracobra · 11 Jun 2023

Creé una sección en mi web app llamada 'Spaces' y le monté tres componentes interactivos, quiero poner muchos más tomados de Internet o diseñados por mí.

Quiero hacer que cada 'espacio' cuente con su propia url. Requiere un enfoque diferente?

La sección que contiene los 'spaces' es esta:

https://ultracobra.netlify.app/spaces

Y los componentes desde Random Cats y los otros dos y los que vengan, hacerlos 'urlables' además de ser componentes renderizados...

ultracobra · 12 Jun 2023

He logrado el enrrutamiento individual de los componente y presento las urls individualizadas para que me den su opinión de los componentes interactivos...

Space 3

Space 2

Space 1

Luisx00x · 13 Jun 2023

Hola Ultracobra. Se ven bien el funcionamiento de los componentes interactivos. Para mejorar la experiencia de los componentes interactivos te recomiendo ponerle un "loading" mientras que cambia las imágenes de Random Cats por ejemplo. Me trato de explicar mejor: que te muestre un mensaje de carga o un gif mientras está cargando la siguiente imagen, porque actualmente no muestra ningún tipo de feedback y al darle click al botón hay cierto delay entre imágenes y no sabes a ciencia cierta si esta buscando otra imagen o no y puede que el cliente termine dándole al botón muchas veces.

Puedes usar un state con valor booleano para que se ponga en true cuando se presione el botón o se busque en la nueva imagen en caso de que las tengas en una base de datos o la pidas a una API, y que pase a false cuando ya tenga la imagen nueva, y por medio de un operador ternario renderice el mensaje o el gif de carga en donde va la imagen del gato cuando sea true, sino que renderice la imagen o el componente donde tienes la imagen.

Espero haber sido de ayuda.

ultracobra · 13 Jun 2023

Luisx00x dijo:
Hola Ultracobra. Se ven bien el funcionamiento de los componentes interactivos. Para mejorar la experiencia de los componentes interactivos te recomiendo ponerle un "loading" mientras que cambia las imágenes de Random Cats por ejemplo. Me trato de explicar mejor: que te muestre un mensaje de carga o un gif mientras está cargando la siguiente imagen, porque actualmente no muestra ningún tipo de feedback y al darle click al botón hay cierto delay entre imágenes y no sabes a ciencia cierta si esta buscando otra imagen o no y puede que el cliente termine dándole al botón muchas veces.

Puedes usar un state con valor booleano para que se ponga en true cuando se presione el botón o se busque en la nueva imagen en caso de que las tengas en una base de datos o la pidas a una API, y que pase a false cuando ya tenga la imagen nueva, y por medio de un operador ternario renderice el mensaje o el gif de carga en donde va la imagen del gato cuando sea true, sino que renderice la imagen o el componente donde tienes la imagen.

Espero haber sido de ayuda.

Buenas ideas Luis, pero no había notado el retraso que dices. Igual es un buen uso del manejo del estado que me emociona ese concepto; gracias!