1

Estoy intentando agregar el componente Skeleton de Material UI a mi proyecto de películas. Debería aparecer el Skeleton de cada card antes de mostrarse la misma, pero no está funcionando. Ustedes pueden ver si hay algo mal? No me aparece ningún error por consola.

import { Grid } from "@material-ui/core";
import { Skeleton } from "@material-ui/lab";
import React from "react";
import MovieCard from "./MovieCard";

const MovieList = ({ movies }) => {
  return (
    <Grid container spacing={3}>
      {movies &&
        movies.map((movie, i) => {
          return movie ? (
            <Grid key={i} item xs={6} sm={4} lg={3}>
              <MovieCard movie={movie}></MovieCard>
            </Grid>
          ) : (
            <Skeleton variant="rect" width={250} height={450} />
          );
        })}
    </Grid>
  );
};

export default MovieList;
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

2 respuestas 2

0

Normalmente se utiliza alguna variable boolean para indicar que está cargando. Podrías intentar algo como esto:

const MovieList = ({ movies, loading }) => {
  return (
<>
{loading && <Skeleton variant="rect" width={250} height={450} />}
      <Grid container spacing={3}>
        {!loading &&
          movies &&
          movies.map((movie, i) => (
            <Grid key={i} item xs={6} sm={4} lg={3}>
              <MovieCard movie={movie}></MovieCard>
            </Grid>
          ))}
      </Grid>
</>
  );
};

La variable loading la puedes iniciar como true antes de hacer el fetch y una vez este termine la cambias a false. Te dejo un ejemplo básico:

const [loading, setLoading] = useState(true)

  const loadData = async () => {
    setLoading(true);
    ....fetch
    setLoading(false)
  }
0

Tienes 2 opciones , la priera es crear un estado con la variable loading o sacar el Skeleton encima del map


import { Grid } from "@material-ui/core";
import { Skeleton } from "@material-ui/lab";
import React from "react";
import MovieCard from "./MovieCard";

const MovieList = ({ movies = [] }) => {
  return (
    <Grid container spacing={3}>
      {movies.length > 0 ?
        movies.map((movie, i) => {
          return (
            <Grid key={i} item xs={6} sm={4} lg={3}>
              <MovieCard movie={movie}></MovieCard>
            </Grid>
          );
        }):<Skeleton variant="rect" width={250} height={450} />
      }
    </Grid>
  );
};

export default MovieList;````

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.