Loading skeletons con CSS y keyframes
Contenido del curso
Optimización de imágenes
Paginación
Almacenamiento local
Bonus
Próximos pasos
Loading skeletons con CSS y keyframes
Loading skeletons con CSS y keyframes
Contenido del curso
maximo galarza
Juan David Reyes
Raycris Maldonado
Brandon Argel Verdeja Domínguez
Carlos Rodríguez
Ricardo Andres Ojeda Silva
Jorge Garcia
Julian Franco
Natalia Gallego Heras
Marcelo Jorge Bellizia
Johan Arena
Ricardo Daniel Baró Soto
César Augusto Cortés Labrada
Patricia Julliete Rangel Mujica
Christian Velázquez
Julian Franco
Christian Velázquez
Ulqernesh Karvenae
Lisbeth Quintero
Victor Hugo Cruz Carballo
Julian Franco
Valentina Llorente Hernández
Dario Paladines
Juan Castro
Profesor
Cristian Mauricio Cavanzo Arias
Ricardo Alfonso Chavez Vilcapoma
intente hacerlo por mi mismo y fracase estrepitosamente
X2 lo importante es aprender de los errores :3
RT hermano
Yo agregué el loading skeleton para las cards, y para los otros datos dejé el spinner, también creé una pantalla de carga: Pantalla de carga:
Creo que más allá de elegir entre usar loading skeletons y loadinf spinners, cada tipo de laoding screens tiene su forma más común de usarse, he visto mucho que como dice el profe los loading skeletons se usan muchos cuando cargamos grillas con muchos elementos con imágenes, vídeos o tarjetas de información, en cambio los loadings spinners se usan mucho cuando queremos cargar un sólo componente con gran información. Por ejemplo. . . Loading skeletons: grilla de card de vídeos en youtube
Quisiera mencionar también que, según lo que he leído, las investigaciones recientes sobre UX indican que cuando se utilizan loading skeletons la percepción del usuario es que el producto carga "más rápido"
siento que me complico demasiado... jajaj yo queriendo agregar todo con JS y el profe solo añadio mas html al index..
mi solucion era dinamicamente añadir el skeleton a lo que genera y con un setimeout quitar la propiedad css
la solución que habia pensado era a la clase de moviecontainer agregarle en el CSS esto:
Junto con replicar el HTML
.loading-skelenton{ border-radius: 8px; background-color: var(--grey); animation: skelenton; animation-duration: 3s; animation-iteration-count: infinite; } @keyframes skelenton{ 0%{ background-color: var(--grey); } 50%{ background-color: var(--light-grey); } 100%{ background-color: var(--grey); } }``` Pero la del profe obviamente es mucho más optima ! jeje
Tengo que decir que no mereció la pena porque tardaba casi lo mismo en cargar mi imagen que en volver con la respuesta del API, pero lo que yo intenté fue esto:
En las devtools, en la ruedita de settings, se van abajo de todo, tienen la opción de disable javascript, para no tener que estar recargando en el caso de que estén creando la animación
Lo hice!! jsjsj fue mas fácil de lo que creí :3
hola podrian ayudarme con esto, me pasa lo mismo y no se como solucionarlo.
Estoy tratando de resolver el problema del minuto 8:35, cuando se recarga la página en la vista de detalles, por un instante deja ver la vista del home en modo pantalla de carga y luego pasa a mostrar la vista de detalles de película en modo pantalla de carga que es el objetivo en ese momento. La cosa es que alguien podría notar que al recargar aparecen cosas que no son de esa vista en un instante. Al momento he fallado en cada cosa que intento, como ponerle un display none a las secciones del home cuando estoy en otra vista antes de recibir el evento DOMContentLoaded.
Me pasa lo mismo. Ya lo solucionaste?
Honestamente, creo que, es una forma "sutil" de aplicar la carga. Pude ver otras formas ( otros tutoriales), y no son muy sutiles. Sin embrago, lo bueno del código, es que existen varias formas de hacerlo.
Total yo me puse a averiguar e intente agregarlo con JS incluso jaja luego vi este video y mi frustracion fue como, It's easy !! y yo dure media tarde :C
Voy a dejar uno con CSS ( https://www.youtube.com/watch?v=AZnOA3b1u0o )
Aquì mi intento:
Yo lo pense diferente y use muchos backgrounds, creo que me falta más creatividad pero que CAPO es este profe !!
Lo intente pero no progrese u.U
Tengo dos dudas y es que no se si haya una forma de "controlar" que archivos se carguen primero es decir si quiero que cargue primero determinado html, css (en caso de tener varios). Y la otra duda es que si dentro de un archivo hay igualmente una forma de controlar que se cargue algo primero, ya que en mi app al momento de cargar la pagina de la película, antes de eso se carga otras secciones (categories, tendencias), y después se carga la página que corresponde
¡Sí que hay forma! Eso es justo lo que aprendemos en el Curso de Optimización Web: https://platzi.com/cursos/web-performance/. :wink:
Yo cree lo siguiente en el css lo siguiente
.skeleton { background-color: var(--purple-light-2); animation: loading 1.5s infinite; } @keyframes loading { 0% { background-color: var(--purple-light-1); } 50% { background-color: var(--purple-light-2); } 100% { background-color: var(--purple-light-1); } } ```const movieImgExtra = document.createElement('div');movieImgExtra.classList.add('movie-img', 'skeleton');const categoryTitleExtra = document.createElement('h3');categoryTitleExtra.classList.add('category-title');loadingSkeeleton(trendingMoviesPreviewList, 'movie-container', movieImgExtra);loadingSkeeleton( categoriesPreviewList, 'category-container', categoryTitleExtra); y en el js  ```js const movieImgExtra = document.createElement('div'); movieImgExtra.classList.add('movie-img', 'skeleton'); const categoryTitleExtra = document.createElement('h3'); categoryTitleExtra.classList.add('category-title'); loadingSkeeleton(trendingMoviesPreviewList, 'movie-container', movieImgExtra); loadingSkeeleton( categoriesPreviewList, 'category-container', categoryTitleExtra ); ```asi sera dinamico 
Sin querer queriendo uno se vuelve así 🙄😜
