CODEWITHSUNDEEP
angularionic-frameworkcapacitor
zeropsi
zeropsi

Reputation: 694

Is there a bullet proof way to ensure no white screen shows with the Capacitor Splash Screen plugin?

I'm having some issues with my app displaying a blank white screen for a brief moment after the Splash Screen disappears and before the app UI loads. I have been searching around for some examples for how to correct this issue and everything I have attempted does not appear to correct the issue.

This is my capacitor.config.ts file:

const config: CapacitorConfig = {
    appId: 'com.ionic.io',
    appName: 'Example App',
    webDir: 'www',
    bundledWebRuntime: false,
    plugins: {
        SplashScreen: {
            launchAutoHide: false,
            launchShowDuration: 3000,
            showSpinner: false,
        }
    },
};

My app.component.ts file:

export class AppComponent {

    constructor(
        private platform: Platform
    ) {
        this.initializeApp();
    }

    async initializeApp() {
        this.platform.ready().then(() => {
            StatusBar.setStyle({ 
                style: Style.Dark 
            });
            StatusBar.setBackgroundColor({
                color: '#4c9caf'
            });
            SplashScreen.hide();
        });

        
    }

}

As you can see, I am not doing any background data processing that should delay the app from loading after the Splash Screen has gone away. Is there a better way to be managing the SplashScreen display and hide?

Additionally, here is a run down of my environment and plugins:

Ionic:

   Ionic CLI                     : 6.17.0 (/Users/XXXXXX/.nvm/versions/node/v14.17.0/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 5.6.11
   @angular-devkit/build-angular : 12.0.5
   @angular-devkit/schematics    : 12.0.5
   @angular/cli                  : 12.0.5
   @ionic/angular-toolkit        : 4.0.0

Capacitor:

   Capacitor CLI      : 3.1.1
   @capacitor/android : 3.1.2
   @capacitor/core    : 3.1.2
   @capacitor/ios     : 3.1.1

Utility:

   cordova-res                          : 0.15.3
   native-run (update available: 1.4.1) : 1.4.0

System:

   NodeJS : v14.17.0 (/Users/XXXXXX/.nvm/versions/node/v14.17.0/bin/node)
   npm    : 6.14.13
   OS     : macOS Catalina

My app plugins:

[info] Found 9 Capacitor plugins for ios:
       @capacitor-community/[email protected]
       @capacitor/[email protected]
       @capacitor/[email protected]
       @capacitor/[email protected]
       @capacitor/[email protected]
       @capacitor/[email protected]
       @capacitor/[email protected]
       @capacitor/[email protected]
       @capacitor/[email protected]
[info] Found 3 Cordova plugins for ios:
       [email protected]
       [email protected]
       [email protected]

Upvotes: 1

Views: 1296

Answers (1)

Indraraj26
Indraraj26

Reputation: 1976

What you can do after platform ready just wrap the splash screen block code with setTimeout of 500ms.

Upvotes: 0

Related Questions