Screen Flashes when using datastore to update UI

Question

I am using Jetpack Compose to build my UI and when a user enters the app, the app will first check whether he/she is a first time user.

If it's a first time user, it will load the ScreenStarter() composable. Else, it will load the AppContent() composable.

My code is like that:

App.kt

 {
    /**
     * This is the Main MES app that will
     * determine which screen content to show
     **/

    /** Load the app settings from datastore **/
    val appSettings = application.datastore.data.collectAsState(initial = MesAppSettings()).value

    /** Set the correct app theme that the user has set **/
    val darkTheme = when (appSettings.appTheme) {
        AppTheme.FOLLOW_SYSTEM -> isSystemInDarkTheme()
        AppTheme.DARK -> true
        AppTheme.LIGHT -> false
    }

    MesTheme(
        darkTheme = darkTheme // Load the app theme
    ) {

        
        /** Determine screen content **/
        if (!appSettings.isFirstTimeLogging) {
            AppContent(
                application = application,
                appSettings = appSettings,
                widthSizeClass = widthSizeClass
            )
        } else {
            ScreenStarter(
                application = application,
                requestMultiplePermissions = requestMultiplePermissions
            )
        }

    }
}

The issue here is that, if it is a recurrent user and he/she opens the app, the screen flashes, and we can briefly see the ScreenStarter() composable before it switches to the AppContent() composable. I think this happens because the data is fetched asynchronously from the data store.

Can someone advise on how to fix this ?

Answer 1

Use some different initial value for appSettings. You can use null for example, then if appSettings is null, show blank screen or some progress indicator, if it's not null, you know that correct data has been loaded from storage and you can show content based on your logic.