3

Asi de simple y tal cual la pregunta, es posible poner algo al estilo de la app de facebook (el ejemplo más claro que se me puede ocurrir por ahora) que pone barras o bloques de color mientras se carga la información a mostrar?...

Hay algún plugin o algo que se pueda usar en Angular o Ionic, lo necesito sobre todo para los ngFor y las imagenes ya que cada que avanzo o regreso entre las vistas desaparece y aparece la info por la carga asíncrona que con los observables se actualiza en cada cambio de vista y da un efecto raro que el usuario puede percibir como de inestabilidad o fallo...

No tiene que haber un efecto por fuerza, solo quiero saber si se puede hacer algo que evite que se vea extraño mientras "recarga".

Creo que se entiende que lo que pregunto no requiere publicar un código o ejemplo, es bastante claro, me parece. Saludos

2
  • Si estas buscando alguna opción ya desarrollada en angular creo que esta libreria te valdria :bsalex.github.io/angular-loading-overlay/_site
    – F.Rosado
    Commented el 7 sept. 2018 a las 9:07
  • @Fernando, agradezco tu aporte, pero no va por ahí la solución que busco. Como comento, si haz usado la app de facebook podrás haber notado que mientras se cargan los datos aparece una estructura con la forma que tendrán los datos cargados (no solo un spinner), luego se muestran los datos. Algo así busco. Saludos.
    – Drewkenobi
    Commented el 8 sept. 2018 a las 2:05

1 respuesta 1

6

Hay un artículo genial en inglés que explica cómo conseguir lo que quieres de un modo sencillo simplemente con CSS, pero te adelanto algo antes de seguir: No se puede hacer una librería genérica con esto porque depende del layout que estés usando, así que tienes que diseñar el esqueleto de tu layout para cada componente tuyo.

A continuación, ya que la licencia del artículo lo permite, voy simplemente a resumir lo principal y traducirlo como respuesta:

Imagina que tienes una tarjeta a mostrar como ésta:

Pero va a tomar tiempo, así que quieres mostrar, mientras tanto, algo como

Lo que puedes hacer es crear mediante CSS ese layout y usarlo mientras no tengas los datos reales:

.skeleton {
  background-repeat: no-repeat;
  background-image: 
    radial-gradient(circle 16px, white 99%, transparent 0),
    linear-gradient(white 20px, transparent 0),

    linear-gradient(lightgray 100%, transparent 0);
    width: 250px;
    height:250px;
    background-size:
    32px 32px,  /* avatar */
    200px 40px, /* title */
    100% 100%;  /* card bg */
    
    background-position:
    24px 24px,  /* avatar */
    24px 200px, /* title */
    0 0;        /* card bg */
}
<div class="skeleton"></div>

Por tanto, lo que has de hacer es definir un esqueleto (puedes hacerlo como en el ejemplo, con puro CSS, o con una imagen de fondo), aplicar la clase skeleton mientras no tengas qué mostrar, y luego eliminar la clase cuando ya tengas los datos reales:

2
  • Creo que esto podría funcionar, lo pruebo y te comento. Gracias por el aporte y el tiempo que te has tomado para ello @Pablo. En breve te comento. Saludos.
    – Drewkenobi
    Commented el 8 sept. 2018 a las 2:08
  • Aun que no era la solución que me imaginaba que podía tener, ha sido la que me ha dado mejor resultado. Gracias.
    – Drewkenobi
    Commented el 12 sept. 2018 a las 5:40

Tu Respuesta

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

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