When launching an application, there is no worse user experience (and it shows carelessness) than displaying the first page while data is still being loaded.

I will explain how in all my applications I always have a SplashScreen just long enough to load everything I need on the first page.

Introduction

Showing the first page while you still loading some collection or checking user profile is a really bad experience. Here I'll explain how to set up a SplashScreen so the users see a loading page the required time you need to render the first page properly

It doesn't take much. I recommend something a little plain and a progress bar or any GIF you like will do as well.

Hands On

We will divide the creation of a SplashScreen into 4 steps:

1. Setup onStart for the App
2. Create the Splash screen
3. Create the Developer screen
4. Redirection

At the end of the application we will have at least the following screens:

App.OnStart

We will only use this one to set a variable to true.

Set(varAutoNav,true)

Changing this variable from true to false will allow us to pause or progress with the autoredirection.

ScreenSplash

We normally do load data at App.OnStart function, but not anymore:

• We will create a screen and call it "ScreenSplash"
• In the OnVisible property

//Whatever you want to preload

If(varAutoNav,Select(ButtonAutoNav))

This way, the last line of the OnVisible, will Select() the ButtonAutoNav and we will configure it to redirect us to the Main Screen.

• Create a Button and call it ButtonAutoNav but don't code it yet.
• Put a nice progress bar (Insert --> Modern --> Progress Bar). Or any thing like a GIF to show progress or loading.

At this point, the ButtonAutoNav property OnSelect shouw be empty. We will complete it later.

ScreenDeveloper

The Developer Screen is just to manipuilate the Auto-Navigation, so the SplashScreen redirect us to the ScreenMain only when it's needed. We will create a toggle to change the varAutonav

You can also create a label to remind you what is this for. And you can also create a button to help you navigaring to the ScreenSplash at anytime.

• Crea un Toogle con las siguientes propiedades: a. Default: varAutoNav b. OnCheck: Set(varAutoNav,true) c. OnUnCheck: Set(varAutoNav,false)

With this change we will be able to control the navigation status in the ScreenSplah.

Redirección

You can now go to ScreenSplash to finish the Redirection.

• Add to the ButtonAutoNav on property OnSelect: Navigate(ScreenMain)
• Test it and once validated, change it Visible property to false. You won't need this anymore because you will use the toogle from now on.

Don't worry if you publish the App with the toggle Off or On. The SplashScreen will still work, because the initial value of varAutoNav in APP.OnStart is set to true.

Extra

Remember that anything you want to load before the ScreenMain rediction should be optimised.

Set(varDarkMode,false);

Concurrent(
    Select(_Colors_Neutrals),
    Select(_Themes)
);

If(varAutoNav,Select(ButtonAutoNav))

Using the Concurrent whenever possible is good practice. It means that everything in the concurrent is calculated at once.

Conclusion

You have an easy code to copy and paste into all your apps that will help you optimise loading without affecting the user experience. Or just because it's nice to see a SplashScreen if you want to add some branding to your apps layout.

You can download and view this implementation in any app from my github