Capacitor, white screen appear after splash screen

I just used capacitor native splash screen api for android app.
The white screen will appear about 2 or 3 seconds after splash screen, is there any configuration should be set to fix the problem?
The problem will not present if the SplashScreen.hide() timeout set longer than 3000 ms, but I just want to show only 500 or 1000 ms.

my capacitor.config.json

 "plugins": {
        "SplashScreen": {
             "launchShowDuration": 1000,
             "launchAutoHide": false,
             "backgroundColor": "#ffffffff",
             "androidSplashResourceName": "splash",
             "androidScaleType": "CENTER_CROP",
             "showSpinner": true,
             "androidSpinnerStyle": "large",
             "iosSpinnerStyle": "small",
             "spinnerColor": "#999999",
             "splashFullScreen": false,
             "splashImmersive": false,
             "layoutName": "launch_screen",
             "useDialog": true
        }
}

and app.component.ts

import { SplashScreen } from '@capacitor/splash-screen';

  ngOnInit(): void {
     this.splashScreen();
   }
 
  private splashScreen(): void {
     setTimeout(() => {
       SplashScreen.hide();
     }, 500);
}

Here is my Ionic environment info

Ionic:

Ionic CLI : 6.17.0
Ionic Framework : @ionic/angular 5.8.4
@angular-devkit/build-angular : 12.1.4
@angular-devkit/schematics : 12.1.4
@angular/cli : 12.1.4
@ionic/angular-toolkit : 4.0.0

Capacitor:

Capacitor CLI : 3.2.2
@capacitor/android : 3.3.2
@capacitor/core : 3.2.2
@capacitor/ios : not installed

Utility:

cordova-res : 0.15.3
native-run : 1.4.1

System:

NodeJS : v14.17.4 (C:\Program Files\nodejs\node.exe)
npm : 6.14.14
OS : Windows 10

1 Like

Is there any error appearing in the web console or is your application just loading slowly? Based on what you wrote, I’d guess your web app just loads slowly and in order to reduce that white flash you’d need to optimize the web portion of your app

Thanks for your reply! I just created a clean project with only add splash screen code, there is no white screen after splash screen. I’m checking if there is other plugins or codes made the fault…

Do you have any Auth guards or API service calls that are occurring when your app loads too?

Does the issue still occur when your app is built with -prod?