Hi everyone, I have a bottom tab bar in compose mu...

# compose-ios

[Abhishek Agarwal]

Hi everyone, I have a bottom tab bar in compose multiplatform(for ios and android). The issue is when a switch to a Properties tab, it lags a lot in iOS, not sure what’s the reason. In my compose view I am just collecting the flow and showing it. Also there is no network call in this screen and in my repository there is already the data in the flow. Please refer the video .

See 🧵 for code

RPReplay_Final1694061005.MP4

[Abhishek Agarwal]

@Composable
internal fun SharedPrefDataScreen(
    modifier: Modifier = Modifier,
) {
        val models by NoobRepository.sharedPrefData.collectAsStateWithLifecycleOrCollectAsState()

        LazyColumn(
            modifier = modifier.fillMaxSize(),
            contentPadding = PaddingValues(vertical = 16.dp, horizontal = 4.dp)
        ) {
            items(models) {model ->
                Text(
                    text = model.prefName,
                    style = MaterialTheme.typography.titleMedium,
                    fontFamily = FontFamily.Monospace,
                    fontWeight = FontWeight.Bold
                )

                for((key,value) in model.data) {
                    SharedPrefRow(
                        key = "key",
                        value = "value.toString()"
                    ) {newValue ->
//                       
                    }
                }
                Divider(thickness = 1.dp, modifier = Modifier.padding(bottom = 16.dp))
            }
        }
}

[Abhishek Agarwal]

@Composable
fun <T : R, R> StateFlow<T>.collectAsStateWithLifecycleOrCollectAsState(
    context: CoroutineContext = EmptyCoroutineContext,
): State<R> {
    if(isAndroid())
    return collectAsStateWithLifecycle(initial = this.value, context = context)
    return  collectAsState(context)
}

[Abhishek Agarwal]

private val _sharedPrefData = MutableStateFlow<List<SharedPrefModel>>(listOf())
    val sharedPrefData = _sharedPrefData.asStateFlow()

[Pablichjenkov]

How are you populating the preferences? Is not shown in the snippets. Perhaps you are loading all the preferences in the main thread. You should use the loader ui pattern. Although, still, the phone storage should be faster than that, unless you are loading hundreds of preferences.

[Pablichjenkov]

Also not sure about the EmptyCoroutineContext if it is having some effect on your code.

[Abhishek Agarwal]

So My library exposes a start function which is called from the App Delegate or the application class. Whenever the start function is called the library fetches all the shared Pref data (user default in this case for ios) and save it in repository. One thing to note here is that till this point, this compose view is not shown to user yet. Now whenever user shake the device, then I start this activity (or push view controller in case of ios) consisting of the bottom bar . So whenever user taps on Properties tab, the repository already have all the data, the view just has to show it but it is lagging in ios but in android its working fine.

[Abhishek Agarwal]

fun start() {
    NoobHelper.registerProtocol()
    NoobRepository.getAllPrefData()
}

Repository function

fun getAllPrefData() {
    print("NooberT entered  getAllPrefData")

    GlobalScope.launch {
         _sharedPrefData.emit(prefManager.getAllValues())
     }
}

override fun getAllValues(): List<SharedPrefModel> {
    val userDefaultData =  userDefaults.dictionaryRepresentation()
    val mappedData = userDefaultData.mapKeys { it.key.toString() }.mapValues { it.value.toString() }
    return listOf(SharedPrefModel("", mappedData))
}

[Pablichjenkov]

I don't see a point in code where you check if data was loaded and reuse it. Perhaps is something userDefaults does internally, IDK. Try printing timestamps before and after prefManager.getAllValues() just to see what's going on. Log timestamps to try to identify in what lines the lagging comes from.

[Abhishek Agarwal]

Thanks for the help, have solved the issue now.

[Colton Idle]

what was the solution

[Abhishek Agarwal]

items(models) {model ->
                Text(
                    text = model.prefName,
                    style = MaterialTheme.typography.titleMedium,
                    fontFamily = FontFamily.Monospace,
                    fontWeight = FontWeight.Bold
                )

                for((key,value) in model.data) {
                    SharedPrefRow(
                        key = "key",
                        value = "value.toString()"
                    ) {newValue ->
//                       
                    }
                }

the forLoop inside item was causing the lag