UI will be blocked when I'm trying to fetch big amount of data

[majid2851]

When I'm trying to fetch the big amount of data from server or database,
the UI will be blocked , I didn't have this problem in android development , because I would use Dispatcher.IO which which would receive data in background.
But in kobweb there are just these

Dispatcher.Unconfined
Dispatcher.Main
Dispatcher.Default

here is my function :

fetchProductCategoriesGraphQL( 
        onSuccess = {
            scope.launch(Dispatchers.Main) {
                    saveProductCategoriesInIndexedDB(it.items)
                    //when I'm trying to copy the productsInfo as state , The Ui will be blocked for 2 or 3 seconds 
                    _state.value=_state.value.copy(productsInfo = it.items)

            }
        },
        onError = {
            hideProgress()  
        }
    )

[bitspittle]

In general, if you have a frozen UI in the world of web dev, you need use a background worker.

See also: https://github.com/varabyte/kobweb#creating-a-kobweb-worker

You can also do kobweb create examples/imageprocessor (I believe) to see an example

Note that the download itself will not the source of the freeze, but probably deserializing it is the problem I would guess. In this case, you should deserialize it in a worker and then send it to the UI thread when ready.

Workers are a feature I'm proud that Kobweb supports, but it is a newer feature, so don't hesitate to let me know if you find bugs and/or missing features.

[majid2851]

I used worker , but didn't work , also I tried to change the way that I cashed data but It didn't work either.
until I noticed the problem is not about getting data , but It's about showing this big amount of data in a list in kobweb
In android development , we solve this problem by using Recyclerview , but in kobweb we didn't have such a thing.
So I managed it by myself ,by creating a function to show items

This is my function :

 @Composable
fun InfiniteScrollGrid(
    items: List<Any>,
    onLoadMore: () -> Unit,
    itemContent: @Composable (Int) -> Unit
) {
    var loadedItems by remember { mutableStateOf(0) }
    var isLoading by remember { mutableStateOf(false) }

    LaunchedEffect(items) {
        if (items.isNotEmpty() && loadedItems == 0) {
            loadedItems = minOf(20, items.size)
        }
    }

    Column(
        Modifier
            .fillMaxWidth()
            .overflow(Overflow.Auto)
            .attrsModifier {
                style {
                    property("scrollbar-width", "none")
                }

            }
            .onScroll { event ->
                val target = event.target as HTMLElement
                if (target.scrollHeight - target.scrollTop <= target.clientHeight * 1.5) {
                    if (!isLoading && loadedItems < items.size) {
                        isLoading = true
                        onLoadMore()
                        loadedItems = (loadedItems + 20).coerceAtMost(items.size)
                        isLoading = false
                    }
                }
            }
    ) {
        if (items.isEmpty()) {
            Box(Modifier.fillMaxSize().display(DisplayStyle.Flex)
                .justifyContent(JustifyContent.Center)
                .alignItems(AlignItems.Center)) {
                Text("No items to display")
            }
        } else {
            for (i in 0 until loadedItems) {
                key(i) {
                    itemContent(i)
                }
            }
            if (isLoading) {
                Box(Modifier.fillMaxWidth().height(50.px)) {
                    Text("Loading...")
                }
            }
        }
    }
}

[bitspittle]

Ah, I see. I'll keep this in mind if anyone brings this up in the future. Thank you for the update and for sharing your code!

There is also https://gitlab.com/opensavvy/ui/compose-lazy-html which one user wrote for Compose HTML which people may find helpful.