Implement paginated loading for TopicScreen

composeApp/src/androidMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/previews/topic/TopicScreenPreview.kt

@@ -15,6 +15,7 @@ private fun TopicScreenPreview() {
             searchQuery = "Search",
             onQueryChange = { },
             onTopicClick = { },
+            onLoadMore = {},
         )
     }
 }

composeApp/src/commonMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/ui/screens/topic/TopicList.kt

@@ -5,13 +5,15 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 
 @Composable
 fun TopicList(
     topics: List<ItemTopic>,
     onTopicClick: (String) -> Unit,
+    onLoadMore: () -> Unit,
 ) {
     LazyColumn(
         modifier = Modifier.fillMaxSize(),
@@ -25,5 +27,12 @@ fun TopicList(
                 onCardClick = { onTopicClick(topic.name) },
             )
         }
+
+        item {
+            // Trigger load more when reaching end
+            LaunchedEffect(Unit) {
+                onLoadMore()
+            }
+        }
     }
 }

composeApp/src/commonMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/ui/screens/topic/TopicScreen.kt

@@ -3,6 +3,7 @@ package com.developersbreach.kotlindictionarymultiplatform.ui.screens.topic
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
+import com.developersbreach.kotlindictionarymultiplatform.ui.components.UiState
 import com.developersbreach.kotlindictionarymultiplatform.ui.components.UiStateHandler
 
 @Composable
@@ -14,12 +15,14 @@ fun TopicScreen(
 
     UiStateHandler(
         uiState = uiState,
+        isLoading = (uiState as? UiState.Success)?.data?.isLoading == true && (uiState as? UiState.Success)?.data?.page == 0,
     ) { data ->
         TopicScreenUI(
             topics = data.filteredTopics,
             searchQuery = data.searchQuery,
             onQueryChange = viewModel::updateSearchQuery,
             onTopicClick = onTopicClick,
+            onLoadMore = viewModel::loadNextPage,
         )
     }
 }

composeApp/src/commonMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/ui/screens/topic/TopicScreenUI.kt

@@ -15,6 +15,7 @@ fun TopicScreenUI(
     searchQuery: String,
     onQueryChange: (String) -> Unit,
     onTopicClick: (String) -> Unit,
+    onLoadMore: () -> Unit,
 ) {
     KdScaffold(
         modifier = Modifier,
@@ -30,9 +31,11 @@ fun TopicScreenUI(
                 onQueryChange = onQueryChange,
             )
             Spacer(modifier = Modifier.height(8.dp))
+
             TopicList(
                 topics = topics,
                 onTopicClick = onTopicClick,
+                onLoadMore = onLoadMore,
             )
         }
     }

composeApp/src/commonMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/ui/screens/topic/TopicUiState.kt

@@ -7,6 +7,8 @@ data class TopicUi(
     val topics: List<Topic> = emptyList(),
     val searchQuery: String = "",
     val filteredTopics: List<ItemTopic> = emptyList(),
+    val page: Int = 0,
+    val hasMore: Boolean = true,
 )
 
 data class ItemTopic(

composeApp/src/commonMain/kotlin/com/developersbreach/kotlindictionarymultiplatform/ui/screens/topic/TopicViewModel.kt

@@ -16,53 +16,97 @@ class TopicViewModel(
     private val _uiState: MutableStateFlow<UiState<TopicUi>> = MutableStateFlow(UiState.Loading)
     val uiState: StateFlow<UiState<TopicUi>> = _uiState
 
-    private var rawTopics: List<Topic> = emptyList()
+    private var allTopics: List<Topic> = emptyList()
+
+    companion object {
+        private const val PAGE_SIZE = 8
+    }
 
     init {
         viewModelScope.launch {
-            fetchTopicList()
+            fetchTopics()
         }
     }
 
-    private suspend fun fetchTopicList() {
-        _uiState.value = UiState.Success(TopicUi(isLoading = true))
+    private suspend fun fetchTopics() {
+        _uiState.value = UiState.Loading
+
         repository.getTopics().fold(
-            ifLeft = { UiState.Error(it) },
-            ifRight = { list ->
-                rawTopics = list.sortedBy { it.name?.lowercase() ?: "" }
-                applyFilters(rawTopics, (_uiState.value as UiState.Success).data.searchQuery)
+            ifLeft = {
+                _uiState.value = UiState.Error(it)
+            },
+            ifRight = { topics ->
+                allTopics = topics.sortedBy { it.name?.lowercase() ?: "" }
+
+                _uiState.value = UiState.Success(
+                    TopicUi(isLoading = false),
+                )
+                loadNextPage()
             },
         )
     }
 
+    private fun getPagedTopics(
+        page: Int,
+    ): List<Topic> {
+        val start = page * PAGE_SIZE
+        val end = minOf(start + PAGE_SIZE, allTopics.size)
+        return if (start >= allTopics.size) emptyList() else allTopics.subList(start, end)
+    }
+
+    fun loadNextPage() {
+        val state = (_uiState.value as? UiState.Success)?.data ?: return
+        if (state.isLoading || !state.hasMore) {
+            return
+        }
+
+        _uiState.value = UiState.Success(state.copy(isLoading = true))
+
+        val newTopics = getPagedTopics(state.page)
+
+        val combined = state.topics + newTopics
+        val nextPage = state.page + 1
+        val hasMore = newTopics.size == PAGE_SIZE
+
+        applyFilters(
+            topics = combined,
+            query = state.searchQuery,
+            currentPage = nextPage,
+            hasMore = hasMore,
+        )
+    }
+
     fun updateSearchQuery(
         newQuery: String,
     ) {
-        applyFilters(rawTopics, newQuery)
+        val state = (_uiState.value as? UiState.Success)?.data ?: return
+        applyFilters(state.topics, newQuery, state.page, state.hasMore)
+    }
+
+    private fun Topic.toItemTopic(): ItemTopic {
+        return ItemTopic(
+            name = this.name ?: "",
+            initial = this.name?.firstOrNull()?.uppercase() ?: "",
+            description = this.description ?: "",
+        )
     }
 
     private fun applyFilters(
         topics: List<Topic>,
         query: String,
+        currentPage: Int,
+        hasMore: Boolean,
     ) {
-        val filtered = topics
-            .filter { topic ->
-                topic.name?.contains(query, ignoreCase = true) == true
-            }
-            .map { topic ->
-                ItemTopic(
-                    name = topic.name ?: "",
-                    initial = topic.name?.firstOrNull()?.uppercase() ?: "",
-                    description = topic.description ?: "",
-                )
-            }
+        val filtered = topics.filter { it.name?.contains(query, ignoreCase = true) == true }.map { it.toItemTopic() }
 
-        _uiState.value = (_uiState.value as UiState.Success).copy(
+        _uiState.value = UiState.Success(
             TopicUi(
                 isLoading = false,
                 searchQuery = query,
                 topics = topics,
                 filteredTopics = filtered,
+                page = currentPage,
+                hasMore = hasMore,
             ),
         )
     }