Capacitor/Cordova Splash Screen delay?

Capacitor
23

A few months ago I had this problem, It happens because although the platform is already ready, angular still needs to lift the html views

The trick would be to keep the splash screen visible until all the content is loaded

My app.component.ts:

import { Component } from '@angular/core';
import { Platform } from '@ionic/angular';
//import { StatusBar } from '@ionic-native/status-bar/ngx';
import { Plugins } from '@capacitor/core';
const { Storage, StatusBar } = Plugins;

import { CarritoService } from './services/carrito.service';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss']
})
export class AppComponent {
  constructor(private platform: Platform, private carritoServise: CarritoService) {
    this.initializeApp()
  }

  initializeApp() {
    this.platform.ready().then(() => {
      //this.statusBar.backgroundColorByHexString('#003163');
      StatusBar.setBackgroundColor({color : '#1569b1'}) //color for the status bar XD
    })
  }
}

My capacitor.config.json in the section plugins

"plugins": {
    "SplashScreen": {
      "launchAutoHide": false,
      "backgroundColor": "#1569b1",
      "androidSplashResourceName": "splash",
      "androidScaleType": "CENTER_CROP",
      "splashFullScreen": true,
      "showSpinner": true,
      "androidSpinnerStyle": "horizontal",
      "spinnerColor": "#f3ff59"
    }

finally my home.page.ts:

import { Component, OnInit } from '@angular/core'
import { Observable } from 'rxjs'
import { Plugins } from '@capacitor/core';
const { SplashScreen } = Plugins;

import { Categorias } from 'src/app/interfaces/interfaces'
import { DataService } from 'src/app/services/data.service'

@Component({
  selector: 'app-inicio',
  templateUrl: './inicio.page.html',
  styleUrls: ['./inicio.page.scss'],
})
export class InicioPage implements OnInit {
  categorias:Observable<Categorias[]>
  fallo:boolean = false

  constructor(public dataservice: DataService) { }

  ngOnInit() {
    this.Loading()
  }

  Loading() {
    this.dataservice.getCategorias().subscribe((res: any) => {
      this.categorias = res 
      SplashScreen.hide()
      this.fallo = false
    }, ()=>{
      this.fallo = true
      SplashScreen.hide()
    })
  }
}

I must add that in my home.page.ts I make an http request to obtain the content that will be displayed

so the splash screen helped me to make that wait, and thus not overload the interface of so many loaders. In almost everything, if the request fails, the splash screen will always disappear but showing an error message (that has a “display: none” in my home.page.html)