0
197
VistasCómo no mostrar la sombra del cuadro en el elemento de carga
Cuando hago clic en el botón de búsqueda, obtengo una lista de las mejores pistas en mi aplicación React-Redux.
Cuando los resultados se están cargando, obtengo la sombra del cuadro del contenedor para cada pista renderizada antes de que la pista esté completamente cargada. Al igual que:
JS:
const TopTracks = ({ track }) => { return ( <div> <iframe src={`https://open.spotify.com/embed/track/${track.id}`} title={track.name} width="300" height="80" allowtransparency="true" allow="encrypted-media" className="tracks" ></iframe> </div> ); }; export default TopTracks;CSS:
.tracks { margin-bottom: 0.75em; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; }¿Hay alguna forma de que estos efectos de sombra no se muestren antes de que el elemento esté completamente cargado?
3 Respuestas
Responde la pregunta0
Creo que podría agregar una clase de adiciones como .shadowed y mover la propiedad box-shadow allí. Luego, puede agregar la devolución de llamada onLoad al iframe y agregar o eliminar la sombra según el estado de carga.
const TopTracks = ({ track }) => { const [loaded, setLoaded] = useState(false); finishLoading() { setLoaded(true); } return ( <div> <iframe src={`https://open.spotify.com/embed/track/${track.id}`} title={track.name} width="300" height="80" allowtransparency="true" allow="encrypted-media" className={"track " + (loaded ? "shadowed": "")} onLoad={this.finishLoading} ></iframe> </div> ); }; export default TopTracks;0
Gracias a la respuesta de @AlexShinkevich logré llegar a un compromiso.
JS:
import { useState } from "react"; const TopTracks = ({ track }) => { const [loaded, setLoaded] = useState(false); // When Tracks are Loaded, Change the State to True const finishLoading = () => { setLoaded(true); }; return ( <div> <iframe src={`https://open.spotify.com/embed/track/${track.id}`} title={track.name} width="300" height="80" allowtransparency="true" allow="encrypted-media" className={loaded ? "shadow" : "tracks"} onLoad={finishLoading} ></iframe> </div> ); }; export default TopTracks;CSS:
.tracks { margin-bottom: 0.75em; border-radius: 10px; } .shadow { margin-bottom: 0.75em; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; }Tuve que agregar una condición que verificó si estaba cargado y luego cambié el nombre de clase en consecuencia.
Seguí la respuesta de @AlexShinkevich pero no pude obtener la sombra y los estilos para renderizar.
Aunque de esta manera los espacios de sombras del cuadro no se muestran cuando se está cargando, se muestran con un ligero retraso después de que se cargan las pistas.
0
Recomendaría crear una clase de "carga" de algún tipo que oculte el elemento y luego se elimine una vez que termine de cargarse:
.tracks { margin-bottom: 0.75em; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; opacity: 1; transition: opacity 0.25s ease; } .tracks.loading { opacity: 0; }