Recommended splash/launch screen for new project

Ionic Framework Ionic Angular
1

I’ve started a new Iconic, Capacitor and Angular project and am trying to figure out how to configure the splash/launch screen. From the tabs template I added iOS and Android and it created an Xcode project with a LaunchScreen.storyboard, which appears to be configured to use an image from Assets.xcassets, but it does not show on start up. I change the image a few times and it made no difference, so I edited the storyboard to contain just a label and that shows. However, between that launch screen disappearing and my actual page loading there is a long white gap.

I figure I have to set up a splash screen in Angular which can load instantly and wait for my real components to be ready. This documentation Splash Screen | Cordova Splash Screen Plugin for Android & iOS is all I can find from Ionic but it says it is not compatible with Capacitor and links to GitHub - apache/cordova-plugin-splashscreen: Apache Cordova Plugin splashscreen.

So what is the recommended start up sequence to make sure a user never stares into a white void wondering if my app is DOA?

2

@CraigStanton Is your project based on Capacitor or Cordova?
if Capacitor, you need to create the splash and launch screen by using the following

  1. ionic build
  2. Add your icon.png (1024x1024 px) and splash.png (2732x2732 px) files to the ‘resources’ folder under the root of your capacitor based project.(if resources not exist, create an empty folder named resources)
  3. run capacitor-resources (if you didn’t install this cli globally, run npm i capacitor-resources -g)
3

I’m definitely using Capacitor. I generated the resources as you said. The Assets.xcassets folder for iOS and app/src/main/res folder for Android have both been updated, but there were no code changes and I still don’t see the splash image while my app starts up.