0

Tengo una pagina web con Angular desde el front y Spring desde el back, el problema que tengo es que al cargar la web se muestra el front y despues de 1-2 segundos se muestran los datos que recibe mediante las peticiones al servidor, lo que quiero hacer es que al cargar la web se muestre directamente los datos junto al front aunque tarde mas en cargar ya que como esta ahora queda bastante mal.

Muchas gracias por adelantado.

Ejemplo:

Al cargar: introducir la descripción de la imagen aquí Despues de 1-2 segundos:

introducir la descripción de la imagen aquí

1 respuesta 1

0

simplemente debes usar una variable que te indicará si el contenido ya está disponible. Antes de hacer la llamada le das como valor false, cuando recibas la respuesta le das el valor true. Imagina que la variable se llama contenidoDisponible, el html sería así:

<mat-progress-spinner *ngIf="!contenidoDisponible" mode="indeterminate"></mat-progress-spinner>
<div *ngIf="contenidoDisponible">Aqui iria el contenido</div>

Mientras el contenido no esté disponible muestra un progress-bar.

Un saludo.

3
  • Muchas gracias por tu aportación, pero buscaba algo mas automatico, que detectase si ya tiene la petición igual de tener que hacer un spinner y hacerlo con cada componente. Pero en el caso de que no se pueda probaré con el spinner, gracias.
    – DavVR
    el 28 jul. 2020 a las 12:28
  • @DavVR Complementando la respuesta de Marc, puedes utilizar un interceptor para detectar todas las peticiones http que realices y dentro de este, mostrar y ocultar el spinner.
    – sioesi
    el 28 jul. 2020 a las 12:45
  • Si, podría usar un interceptor, se podría comunicar con el componente padre mediante un servicio e ir mostrando un spinner cada vez que hay una petición. El problema es que si en algún momento quieres mostrar una parte de la página mientras se carga otra no se podría, ¿no?
    – Marc N
    el 28 jul. 2020 a las 13:00

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.