Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

293
Vistas
IONIC 5 How to reload the page without white screen

When I implemented it on the IONIC 5 application, my problem was that every time I reloaded the page, it would show the spinner and image I had set, but after the spinner was completely reloaded, the application would show a white screen for 1 to 2 seconds and then only show the page I wanted.

So, my question is how can I reload the page without the white screen show?

I have set the codes below in my app.component.html, so every time my app reload the page, it will show the spinner and image

<ion-app>
  <ion-router-outlet></ion-router-outlet>
  <div class="loading-overlay" *ngIf="loading" style="margin: auto;">
    <img src="assets/icon/favicon.png"style="height:150px;width:150px;"/> <br/>
    <!-- Bubbles Spinner -->
    <ion-spinner name="bubbles"></ion-spinner>&nbsp;
    <span>Please Wait..</span>
  </div>
</ion-app>

the function in my app.component.ts


  constructor(private router: Router,
              private so: ScreenOrientation,
              private alertCtrl: AlertController,
              private platform: Platform,
              private _location: Location,
              ) {
   this.router.events.subscribe((e : RouterEvent) => {
      this.navigationInterceptor(e);
    })


    this.router.events.subscribe((event) => {
        if (event instanceof NavigationEnd) {
          this.history.push(event.urlAfterRedirects)
        }
    })


   //Updated Code

  this.platform.ready().then(() => {
      setTimeout(function(){
        this.splashScreen.hide();
      }, 50);
    });
  }
  // Shows and hides the loading spinner during RouterEvent changes
  navigationInterceptor(event: RouterEvent): void {
    if (event instanceof NavigationStart) {
      this.loading = true
    }
    if (event instanceof NavigationEnd) {
      this.loading = false
    }

    // Set loading state to false in both of the below events to hide the spinner in case a request fails
    if (event instanceof NavigationCancel) {
      this.loading = false
    }
    if (event instanceof NavigationError) {
      this.loading = false
    }
  }

Below is one of the codes that how I reload my page:

this.router.navigate(['/order'])
                .then(() => {
                  window.location.reload();
                });
over 4 years ago · Santiago Trujillo
1 Respuestas
Responde la pregunta

0

if this code in your app.component.ts , then add this

initializeApp() {
this.platform.ready().then(() => {

  this.splashScreen.hide();

})

and in your config.xml

 <preference name="SplashScreenDelay" value="3000" />

note the value could change based on your app

or if the the code was in page you can add the code to your constructor ,

or you can change the value of setTimeout function to bigger number ( like 500, 1000 ... etc )

over 4 years ago · Santiago Trujillo Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda