GA-050 (FE) Creación de un componente loader TotoroLoader

[joshuacba08]

Tarea: Integración del Componente de Loader Animado con Totoro en Cards de Películas

• User Story: Como usuario del sitio web que utiliza la API de Studio Ghibli, quiero ver un loader animado de Totoro caminando en diferentes tamaños (pequeño, mediano y grande) cuando se cargue una tarjeta que muestra detalles de una película, para que la espera sea más agradable y visualmente atractiva.
• Criterios de Aceptación:
  1. El componente TotoroLoader implementado en React.js debe mostrarse cuando se aguarda una respuesta por parte de la API.
  2. Cuando se inicie la carga de la tarjeta, el loader se mostrará en el centro de la misma según el tamaño seleccionado usando renderizado condicional.
  3. El loader se ocultará una vez que los detalles de la película se hayan cargado completamente.
  4. Se deben hacer pruebas exhaustivas para verificar que el loader funcione correctamente con diferentes tamaños
• Recomendaciones:
  • Utilizar estados y efectos de React para controlar la aparición y desaparición del loader.
  • Realizar pruebas con diferentes velocidades de conexión para asegurarse de que el loader funcione en diferentes situaciones de carga.

La integración del componente de loader en las tarjetas de película mejorará la experiencia del usuario al proporcionar una transición visualmente agradable mientras esperan a que se carguen los detalles de la película. Asegúrate de que la implementación sea fluida y se ajuste bien al diseño general de la aplicación.

Se adjunta la imagen de totoro caminando

[joshuacba08]

Sugerencia:

 const [loading, setLoading ] = useState(false);

  const getRandomMovie = async( ) => {
   try{
       setLoading(true) // Aparece totoro caminando
       const result = await fetch( );
      const data = await result.json();
      setMovieData(data);
      setLoading(false);

    }catch(error){
      console.log(error)
    }

  }

useEffect( ( )=>{ 
  getRandomMovie();

},[ ])

 return(

    {  loading  ?  <Card /> : <TotoroLader size="m" />  }
 ) 

[joshuacba08]

fetch('www.pokemon')
    .then( (resp)=> console.log(resp) )
        .catch( (error)=> console.error(error)) 

[joshuacba08]

const nuevaPromesa = new Promise();

nuevaPromesa.then(...).catch(...)