bug: Angular Tab based application shows empty screen between hiding the Splash Screen and Displaying the Tabs.

[selected-pixel-jameson]

trafficstars

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x

Current Behavior

When utilizing a "Tabbed" based application there is a blank screen that is displayed in between the Splash Screen disappearing and the "Tabs" Component Loading.

Expected Behavior

When the Splash Screen disappears I would expect the Tabs to immediately be showing.

Steps to Reproduce

1. ionic start
2. Use the App Creation Wizard - No
3. Select Angular
4. ionic cap add android
5. ionic cap build android --prod
6. Run the Application on an Android device

You will see an empty screen show up between the splash screen closing and the tabs loading. I'm doing this on a Pixel 5.

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 7.2.0 (/Users/jamesonparker/.nvm/versions/node/v18.18.0/lib/node_modules/@ionic/cli) Ionic Framework : @ionic/angular 7.6.5 @angular-devkit/build-angular : 17.1.0 @angular-devkit/schematics : 17.1.0 @angular/cli : 17.1.0 @ionic/angular-toolkit : 9.0.0

Capacitor:

Capacitor CLI : 5.6.0 @capacitor/android : 5.6.0 @capacitor/core : 5.6.0 @capacitor/ios : not installed

Utility:

cordova-res : not installed globally native-run (update available: 2.0.1) : 2.0.0

System:

NodeJS : v18.18.0 (/Users/jamesonparker/.nvm/versions/node/v18.18.0/bin/node) npm : 9.8.1 OS : macOS Unknown

Additional Information

This can be replicated with a completely unmodified version of the Ionic Angular Tabbed Started Template.

Here is a video of this happening. It only shows slightly and is a variable amount of time, however it will lag longer on older devices and immediately presents and unpolished feeling to applications.

https://github.com/ionic-team/ionic-framework/assets/28204537/5ece3e05-6784-46ac-9f88-7ba24c9bb689

[thetaPC]

Thank you for submitting the issue!

I was able to replicate the bug. This is only happening for Angular NgModules with the Tabs starter. However, this issue is occurring on the starter apps so I'll transfer the issue over to that repo.

[jcesarmobile]

starter apps don't include the @capacitor/splash-screen plugin nor any logic to show or hide or extend the time of the splash screen. So that's the default Android's behavior, if you install @capacitor/splash-screen plugin you should be able to extend the time the splash is displayed and hide it when the app is ready.

[selected-pixel-jameson]

@jcesarmobile Oh. That's interesting that you wouldn't be seeing the same issue when using the Standalone starter app then.

[jcesarmobile]

I have not tested on any particular template, just explaining what's happening.

It's possible that standalone apps are faster to load and the empty screen is less noticeable, but with no splash screen plugin the app won't start loading until the splash disappears, if the empty screen is noticeable or not will depend on how fast the framework loads the content.