performance is much better on LazyColumn on serverList Screen, separe serveritem and countryitem..

app/src/main/java/com/vpn/fastestvpnservice/customItems/CountryItem.kt

@@ -76,7 +76,7 @@ import java.lang.Exception
 import java.util.logging.Handler
 
 @Composable
-fun CountryItem(server: Server, category: String, navHostController: NavHostController) {
+fun CountryItem(server: Server, category: String, countryTotalServers: Int, navHostController: NavHostController) {
     Log.d("test_countrySize", "CountryItem Called ${server.server_name} ${server.totalServers}")
     Box(
         modifier = Modifier
@@ -100,9 +100,7 @@ fun CountryItem(server: Server, category: String, navHostController: NavHostCont
         val homeViewModel: HomeViewModel = viewModel {
             HomeViewModel(context, scope)
         }
-        var isCountryServerClicked by remember {
-            mutableStateOf(false)
-        }
+        var isCountryServerClicked by remember { mutableStateOf(false) }
         if (isCountryServerClicked) {
             Log.d("ServerCallbacks", "isServerClicked $isCountryServerClicked")
             onServer.onServerSelected(context, homeViewModel,
@@ -112,9 +110,7 @@ fun CountryItem(server: Server, category: String, navHostController: NavHostCont
             )
             navHostController.popBackStack()
         }
-        var isServerServerClicked by remember {
-            mutableStateOf(false)
-        }
+        var isServerServerClicked by remember { mutableStateOf(false) }
         if (isServerServerClicked) {
             Log.d("ServerCallbacks", "isServerClicked $isServerServerClicked")
             onServer.onServerSelected(
@@ -128,187 +124,189 @@ fun CountryItem(server: Server, category: String, navHostController: NavHostCont
         }
 
         countrySize.let { size ->
-                    if (size > 1) {
-                        var locationsSize: Int = 0
-                        val countriesServersData = basePreferenceHelper.getServerData().get(0).servers
-                        countriesServersData?.let {
-                            val serversGroup = serverListViewModel.getServerGroupList(server, it)
-//                            Log.d("test_compose_servers", "${server.server_name} = ${serversGroup.size}")
-                            locationsSize = serversGroup.size
+//            var locationsSize: Int = 0
+//            val countriesServersData = basePreferenceHelper.getServerData().get(0).servers
+//            countriesServersData?.let {
+//                val serversGroup = serverListViewModel.getServerGroupList(server, it)
+//                locationsSize = serversGroup.size
+//            }
+            Column {
+                /* Country Location's Row */
+                Row(
+                    verticalAlignment = Alignment.Top,
+                    horizontalArrangement = Arrangement.Start,
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(
+                            start = 16.dp, end = 12.dp, top = 12.dp
+                        )
+                        .clickable(
+                            indication = null,
+                            interactionSource = remember { MutableInteractionSource() }
+                        ) {
+                            basePreferenceHelper.setServerObject(server)
+                            isCountryServerClicked = true
                         }
-                        Column {
-                            /* Country Location's Row */
-                            Row(
-                                verticalAlignment = Alignment.Top,
-                                horizontalArrangement = Arrangement.Start,
-                                modifier = Modifier
-                                    .fillMaxWidth()
-                                    .padding(
-                                        start = 16.dp, end = 12.dp, top = 12.dp
-                                    )
-                                    .clickable(
-                                        indication = null,
-                                        interactionSource = remember { MutableInteractionSource() }
-                                    ) {
-//                                        Toast
-//                                            .makeText(
-//                                                context, server.server_name, Toast.LENGTH_SHORT
-//                                            )
-//                                            .show()
-                                        basePreferenceHelper.setServerObject(server)
-                                        isCountryServerClicked = true
-//                                        navHostController.popBackStack()
-                                    }
-                            ) {
-                                val icon = if (server.enable == 1) Utils.getDrawable(context, server.iso)
-                                else Utils.getDrawableGray(context, server.iso)
-
-                                Icon(
-                                    painter = painterResource(id = icon),
-                                    contentDescription = "Server Logo",
-                                    tint = Color.Unspecified,
-                                    modifier = Modifier
-                                        .padding(bottom = 16.dp)
-                                        .size(24.dp)
-                                        .clip(CircleShape)
-                                        .paint(
-                                            painter = painterResource(id = icon),
-                                            contentScale = ContentScale.FillHeight
-                                        )
-                                )
-                                Text(text = server.country!!,
-                                    style = MaterialTheme.typography.labelMedium,
-                                    color = MaterialTheme.colorScheme.primary,
-                                    modifier = Modifier
-                                        .padding(start = 16.dp, bottom = 18.dp)
-                                        .align(Alignment.CenterVertically)
-                                )
-                                Spacer(modifier = Modifier.weight(1F))
-                                Text(text = "$locationsSize locations",
-                                    style = MaterialTheme.typography.bodySmall,
-                                    color = colorResource(id = R.color.dark_blue_gray_text),
-                                    modifier = Modifier
-                                        .padding(end = 30.dp, bottom = 18.dp)
-                                        .align(Alignment.CenterVertically)
-                                        .alpha(0.4F)
-                                )
+                ) {
+                    val icon = if (server.enable == 1) Utils.getDrawable(context, server.iso)
+                    else Utils.getDrawableGray(context, server.iso)
+
+                    Icon(
+                        painter = painterResource(id = icon),
+                        contentDescription = "Server Logo",
+                        tint = Color.Unspecified,
+                        modifier = Modifier
+                            .padding(bottom = 16.dp)
+                            .size(24.dp)
+                            .clip(CircleShape)
+                            .paint(
+                                painter = painterResource(id = icon),
+                                contentScale = ContentScale.FillHeight
+                            )
+                    )
+                    Text(text = server.country!!,
+                        style = MaterialTheme.typography.labelMedium,
+                        color = MaterialTheme.colorScheme.primary,
+                        modifier = Modifier
+                            .padding(start = 16.dp, bottom = 18.dp)
+                            .align(Alignment.CenterVertically)
+                    )
+                    Spacer(modifier = Modifier.weight(1F))
+                    Text(text = "$countryTotalServers locations",
+                        style = MaterialTheme.typography.bodySmall,
+                        color = colorResource(id = R.color.dark_blue_gray_text),
+                        modifier = Modifier
+                            .padding(end = 30.dp, bottom = 18.dp)
+                            .align(Alignment.CenterVertically)
+                            .alpha(0.4F)
+                    )
 //            Spacer(modifier = Modifier.weight(1F))
+                    Icon(
+                        modifier = Modifier
+                            .padding(bottom = 18.dp, end = 0.dp)
+                            .size(12.dp, 7.dp)
+                            .align(Alignment.CenterVertically)
+                            .clickable(
+                                indication = null,
+                                interactionSource = remember { MutableInteractionSource() }
+                            ) { isServerExpanded = !isServerExpanded },
 
-                                Icon(
-                                    modifier = Modifier
-                                        .padding(bottom = 18.dp, end = 0.dp)
-                                        .size(12.dp, 7.dp)
-                                        .align(Alignment.CenterVertically)
-                                        .clickable(
-                                            indication = null,
-                                            interactionSource = remember { MutableInteractionSource() }
-                                        ) { isServerExpanded = !isServerExpanded },
-
-                                    painter = if (isServerExpanded) painterResource(
-                                        id = R.drawable.dragarrow3x) else painterResource(
-                                        id = R.drawable.downarrow3x),
-
-                                    contentDescription = "Server Logo",
-                                    tint = MaterialTheme.colorScheme.primary,
-                                )
-                            }
+                        painter = if (isServerExpanded) painterResource(
+                            id = R.drawable.dragarrow3x) else painterResource(
+                            id = R.drawable.downarrow3x),
 
-                            /* Country Expandable's Row */
-                            if (isServerExpanded) {
-                                val countriesServersData1 = basePreferenceHelper.getServerData().get(0).servers
-                                countriesServersData1?.let {
-                                    val serversGroup = serverListViewModel.getServerGroupList(server, it)
-                                    ExpandableRow(server = serversGroup, navHostController)
-                                }
-                            }
-                        }
-                    }
-                    else {
-                        Log.d("test_return_ping","C[1]=> " + server.server_name + server.ping)
-                        Row(
-                            verticalAlignment = Alignment.Top,
-                            horizontalArrangement = Arrangement.Start,
-                            modifier = Modifier
-                                .fillMaxWidth()
-                                .padding(start = 16.dp, end = 7.dp, top = 12.dp)
-                                .clickable(
-                                    indication = null,
-                                    interactionSource = remember { MutableInteractionSource() }
-                                ) {
-                                    basePreferenceHelper.setServerObject(server)
-                                    isServerServerClicked = true
-//                                    navHostController.popBackStack()
-                                }
-                        ) {
-                            val icon = if (server.enable == 1) Utils.getDrawable(context, server.iso)
-                            else Utils.getDrawableGray(context, server.iso)
+                        contentDescription = "Server Logo",
+                        tint = MaterialTheme.colorScheme.primary,
+                    )
+                }
 
-                            Icon(
-                                painter = painterResource(id = icon),
-                                contentDescription = "Server Logo",
-                                tint = Color.Unspecified,
-                                modifier = Modifier
-                                    .padding(bottom = 16.dp)
-                                    .size(24.dp)
-                                    .clip(CircleShape)
-                                    .paint(
-                                        painter = painterResource(id = icon),
-                                        contentScale = ContentScale.FillHeight
-                                    )
-                            )
-                            val serverTitle = if (category.lowercase().toString() == "servers") server.country else server.server_name
-                            Text(text = serverTitle!!,
-                                style = MaterialTheme.typography.labelMedium,
-                                color = MaterialTheme.colorScheme.primary,
-                                modifier = Modifier
-                                    .padding(start = 16.dp, bottom = 18.dp)
-                                    .align(Alignment.CenterVertically)
-                            )
-                            Spacer(modifier = Modifier.weight(1F))
-                            val pings = server.ping
-                            Text(
-                                text = "${server.ping} ms",
-                                style = MaterialTheme.typography.displayMedium,
-                                color = colorResource(id = R.color.blue_text),
-                                modifier = Modifier
-                                    .padding(end = 30.dp, bottom = 18.dp)
-                                    .align(Alignment.CenterVertically)
-                            )
-                            var isFavorite by rememberSaveable { mutableStateOf(server.isFavourited) }
-
-                            IconButton(
-                                modifier = Modifier
-                                    .padding(bottom = 18.dp, end = 8.dp)
-                                    .size(21.dp, 20.dp)
-                                    .align(Alignment.CenterVertically),
-                                onClick = {
-                                    isFavorite = !isFavorite!!
-                                    serverListViewModel.favAndUnFav(server)
-                                }
-                            )
-                            {
-//                                val favResponse = serverListViewModel.mutableLiveDataFavUnFav.observeAsState().value
-//                                favResponse?.let {
-//                                    Log.d("test_fav_response", it.message.toString())
-//                                    splashViewModel.serverDataApi()
-//                                    serverListViewModel.mutableLiveDataFavUnFav.value = null
-//                                }
+                /* Country Expandable's Row */
+                if (isServerExpanded) {
+                    val countriesServersData1 = basePreferenceHelper.getServerData().get(0).servers
+                    countriesServersData1?.let {
+                        val serversGroup = serverListViewModel.getServerGroupList(server, it)
+                        ExpandableRow(server = serversGroup, navHostController)
+                    }
+                }
+            }
 
-                                Icon(
-//                                    .clickable(
-//                                        indication = null,
-//                                        interactionSource = remember { MutableInteractionSource() }
-//                                    ) {  },
+            Surface(
+                modifier = Modifier
+                    .padding(start = 0.dp, end = 0.dp)
+                    .height(1.dp)
+                    .fillMaxWidth()
+                    .alpha(0.6F)
+                    .align(Alignment.BottomCenter),
+                color = colorResource(id = R.color.gray_icon)
+            ) {}
 
-                                    painter = if (isFavorite == true) painterResource(
-                                        id = R.drawable.fav_server3x) else painterResource(
-                                        id = R.drawable.unfav_server3x),
 
-                                    contentDescription = "Server Logo",
-                                    tint = Color.Unspecified,
-                                )
-                            }
-                        }
+//                    else {
+//                        Log.d("test_return_ping","C[1]=> " + server.server_name + server.ping)
+//                        Row(
+//                            verticalAlignment = Alignment.Top,
+//                            horizontalArrangement = Arrangement.Start,
+//                            modifier = Modifier
+//                                .fillMaxWidth()
+//                                .padding(start = 16.dp, end = 7.dp, top = 12.dp)
+//                                .clickable(
+//                                    indication = null,
+//                                    interactionSource = remember { MutableInteractionSource() }
+//                                ) {
+//                                    basePreferenceHelper.setServerObject(server)
+//                                    isServerServerClicked = true
+////                                    navHostController.popBackStack()
+//                                }
+//                        ) {
+//                            val icon = if (server.enable == 1) Utils.getDrawable(context, server.iso)
+//                            else Utils.getDrawableGray(context, server.iso)
+//
+//                            Icon(
+//                                painter = painterResource(id = icon),
+//                                contentDescription = "Server Logo",
+//                                tint = Color.Unspecified,
+//                                modifier = Modifier
+//                                    .padding(bottom = 16.dp)
+//                                    .size(24.dp)
+//                                    .clip(CircleShape)
+//                                    .paint(
+//                                        painter = painterResource(id = icon),
+//                                        contentScale = ContentScale.FillHeight
+//                                    )
+//                            )
+//                            val serverTitle = if (category.lowercase().toString() == "servers") server.country else server.server_name
+//                            Text(text = serverTitle!!,
+//                                style = MaterialTheme.typography.labelMedium,
+//                                color = MaterialTheme.colorScheme.primary,
+//                                modifier = Modifier
+//                                    .padding(start = 16.dp, bottom = 18.dp)
+//                                    .align(Alignment.CenterVertically)
+//                            )
+//                            Spacer(modifier = Modifier.weight(1F))
+//                            val pings = server.ping
+//                            Text(
+//                                text = "${server.ping} ms",
+//                                style = MaterialTheme.typography.displayMedium,
+//                                color = colorResource(id = R.color.blue_text),
+//                                modifier = Modifier
+//                                    .padding(end = 30.dp, bottom = 18.dp)
+//                                    .align(Alignment.CenterVertically)
+//                            )
+//                            var isFavorite by rememberSaveable { mutableStateOf(server.isFavourited) }
+//
+//                            IconButton(
+//                                modifier = Modifier
+//                                    .padding(bottom = 18.dp, end = 8.dp)
+//                                    .size(21.dp, 20.dp)
+//                                    .align(Alignment.CenterVertically),
+//                                onClick = {
+//                                    isFavorite = !isFavorite!!
+//                                    serverListViewModel.favAndUnFav(server)
+//                                }
+//                            )
+//                            {
+////                                val favResponse = serverListViewModel.mutableLiveDataFavUnFav.observeAsState().value
+////                                favResponse?.let {
+////                                    Log.d("test_fav_response", it.message.toString())
+////                                    splashViewModel.serverDataApi()
+////                                    serverListViewModel.mutableLiveDataFavUnFav.value = null
+////                                }
+//
+//                                Icon(
+////                                    .clickable(
+////                                        indication = null,
+////                                        interactionSource = remember { MutableInteractionSource() }
+////                                    ) {  },
+//
+//                                    painter = if (isFavorite == true) painterResource(
+//                                        id = R.drawable.fav_server3x) else painterResource(
+//                                        id = R.drawable.unfav_server3x),
+//
+//                                    contentDescription = "Server Logo",
+//                                    tint = Color.Unspecified,
+//                                )
+//                            }
+//                        }
 
 //                    Log.d("test_servers_count", "${server.server_name} ${server.countryServers?.size}")
                         /* Country Location's Row -> 1 Location() */
@@ -329,16 +327,6 @@ fun CountryItem(server: Server, category: String, navHostController: NavHostCont
 //                            }
 //                        )
                     }
-                }
-            Surface(
-                modifier = Modifier
-                    .padding(start = 0.dp, end = 0.dp)
-                    .height(1.dp)
-                    .fillMaxWidth()
-                    .alpha(0.6F)
-                    .align(Alignment.BottomCenter),
-                color = colorResource(id = R.color.gray_icon)
-            ) {}
     }
 }
 
@@ -504,5 +492,5 @@ fun calculatePing(server: Server, onPingResult: (Int) -> Unit) {
 @Preview
 @Composable
 fun CountryItemPreview() {
-    CountryItem(server = favListServer[0], "servers", rememberNavController())
+    CountryItem(server = favListServer[0], "servers", 1, rememberNavController())
 }

app/src/main/java/com/vpn/fastestvpnservice/customItems/ServerItem.kt

@@ -233,8 +233,7 @@ fun ServerItem(server: Server, navHostController: NavHostController) {
                 .height(1.dp)
                 .fillMaxWidth()
                 .alpha(0.6F)
-                .align(Alignment.BottomCenter)
-               ,
+                .align(Alignment.BottomCenter),
             color = colorResource(id = R.color.gray_icon)
         ) {}
     }

app/src/main/java/com/vpn/fastestvpnservice/screens/ServerListScreen.kt

@@ -616,6 +616,21 @@ fun ColumnScope.ShowAllLocationsList(
 //    var isServersListExpanded by rememberSaveable { mutableStateOf(List(data.size) {true}) }
     val isServersListExpanded by rememberSaveable { mutableStateOf(true) }
 
+    filterServersList = if (
+        data[selectedTabIndex].name?.lowercase().toString() == "servers") {
+        data.get(selectedTabIndex).servers?.let {
+            serverListViewModel.filterServersByISO(
+                it, isAlphabetList.value
+            )
+        }!!
+    } else {
+        data.get(selectedTabIndex).servers?.let {
+            serverListViewModel.filterServersByStreamingServers(
+                it, isAlphabetList.value
+            )
+        }!!
+    }
+
     HorizontalPager(
         state = pagerState,
         modifier = Modifier
@@ -628,32 +643,29 @@ fun ColumnScope.ShowAllLocationsList(
             LocalOverscrollConfiguration provides null
         ) {
             Column(modifier = Modifier.fillMaxSize()) {
-                Log.d("serverTabPager = ", "serverTabPager: $serverTabPager , selectedTabIndex: $selectedTabIndex")
+                Log.d("serverTabPager = ", "filterServersList: ${filterServersList.size} , selectedTabIndex: $selectedTabIndex")
 
                 CompositionLocalProvider(
                     LocalOverscrollConfiguration provides null
-                ) { filterServersList = if (
-                        data[selectedTabIndex].name?.lowercase().toString() == "servers") {
-                        data.get(selectedTabIndex).servers?.let {
-                            serverListViewModel.filterServersByISO(
-                                it, isAlphabetList.value
-                            )
-                        }!!
-                    } else {
-                        data.get(selectedTabIndex).servers?.let {
-                            serverListViewModel.filterServersByStreamingServers(
-                                it, isAlphabetList.value
-                            )
-                        }!!
-                    }
+                )
+                {
 
                     Log.d("filterServersList", "filterServersList: ${filterServersList.size}")
 
-                    LazyColumn() {
-                        items(items = filterServersList, itemContent = {country ->
-                            ServerItem(server = country, navHostController )
-                        })
+                    if (selectedTabIndex == 0) {
+                        LazyColumn() {
+                            items(items = filterServersList, itemContent = {country ->
+                                CountryItem(server = country, "servers", country.totalServers, navHostController )
+                            })
+                        }
+                    } else {
+                        LazyColumn() {
+                            items(items = filterServersList, itemContent = {country ->
+                                ServerItem(server = country, navHostController )
+                            })
+                        }
                     }
+
                 }
 
 //                var serverTitle by rememberSaveable { mutableStateOf("") }
@@ -672,29 +684,6 @@ fun ColumnScope.ShowAllLocationsList(
 //                }
             }
         }
-
-
-        val splashViewModel: SplashViewModel = viewModel{
-            SplashViewModel(context)
-        }
-        val searchListViewModel: SearchListViewModel = viewModel{
-            SearchListViewModel(context, serverListViewModel, splashViewModel)
-        }
-
-//        CompositionLocalProvider(
-//            LocalOverscrollConfiguration provides null
-//        ) {
-//            LazyColumn(
-//                modifier = Modifier
-//                    .padding(top = 0.dp, bottom = 0.dp),
-//            ) {
-//                val searchServersList = searchListViewModel.countriesList.value
-//                items(items = searchServersList!!) { server ->
-////                    ServerSearchItem(server, navHostController = navHostController)
-//                    CountryItem(server = server, category = "", navHostController = navHostController)
-//                }
-//            }
-//        }
     }
 }