add infinite loader to home feed

android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/home/HomeView.kt

@@ -4,23 +4,24 @@ import android.annotation.SuppressLint
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.LazyListState
 import androidx.compose.foundation.lazy.items
+import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material.TopAppBar
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Menu
 import androidx.compose.material3.*
-import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
+import androidx.compose.runtime.*
 import androidx.compose.runtime.livedata.observeAsState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import androidx.navigation.NavHostController
 import app.omnivore.omnivore.Routes
+import kotlinx.coroutines.flow.distinctUntilChanged
 
 
 @OptIn(ExperimentalMaterial3Api::class)
-@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
 @Composable
 fun HomeView(
   homeViewModel: HomeViewModel,
@@ -60,12 +61,11 @@ fun HomeViewContent(
   navController: NavHostController,
   modifier: Modifier
 ) {
+  val listState = rememberLazyListState()
   val linkedItems: List<LinkedItem> by homeViewModel.itemsLiveData.observeAsState(listOf())
 
-  // Fetch items
-  homeViewModel.load()
-
   LazyColumn(
+    state = listState,
     verticalArrangement = Arrangement.Center,
     horizontalAlignment = Alignment.CenterHorizontally,
     modifier = modifier
@@ -82,4 +82,33 @@ fun HomeViewContent(
       )
     }
   }
+
+  InfiniteListHandler(listState = listState) {
+    homeViewModel.load()
+  }
+}
+
+@Composable
+fun InfiniteListHandler(
+  listState: LazyListState,
+  buffer: Int = 2,
+  onLoadMore: () -> Unit
+) {
+  val loadMore = remember {
+    derivedStateOf {
+      val layoutInfo = listState.layoutInfo
+      val totalItemsNumber = layoutInfo.totalItemsCount
+      val lastVisibleItemIndex = (layoutInfo.visibleItemsInfo.lastOrNull()?.index ?: 0) + 1
+
+      lastVisibleItemIndex > (totalItemsNumber - buffer)
+    }
+  }
+
+  LaunchedEffect(loadMore) {
+    snapshotFlow { loadMore.value }
+      .distinctUntilChanged()
+      .collect {
+        onLoadMore()
+      }
+  }
 }

android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/home/HomeViewModel.kt

@@ -31,6 +31,7 @@ import javax.inject.Inject
 class HomeViewModel @Inject constructor(
   private val datastoreRepo: DatastoreRepository
 ): ViewModel() {
+  var cursor: String? = null
   val itemsLiveData = MutableLiveData<List<LinkedItem>>(listOf())
 
   private fun getAuthToken(): String? = runBlocking {
@@ -48,10 +49,12 @@ class HomeViewModel @Inject constructor(
 
       val response = apolloClient.query(
         SearchQuery(
-          first = Optional.presentIfNotNull(20),
+          after = Optional.presentIfNotNull(cursor),
+          first = Optional.presentIfNotNull(15),
         )
       ).execute()
 
+      cursor = response.data?.search?.onSearchSuccess?.pageInfo?.endCursor
       val itemList = response.data?.search?.onSearchSuccess?.edges ?: listOf()
 
       val newItems = itemList.map {
@@ -68,7 +71,7 @@ class HomeViewModel @Inject constructor(
         )
       }
 
-      itemsLiveData.value = newItems
+      itemsLiveData.value = (itemsLiveData.value ?: listOf()).plus(newItems)
     }
   }
 }

android/Omnivore/app/src/main/java/app/omnivore/omnivore/ui/root/RootView.kt

@@ -4,16 +4,15 @@ import SettingsView
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.livedata.observeAsState
-import androidx.lifecycle.viewmodel.compose.viewModel
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.navigation.compose.rememberNavController
 import app.omnivore.omnivore.Routes
 import app.omnivore.omnivore.ui.auth.LoginViewModel
 import app.omnivore.omnivore.ui.auth.WelcomeScreen
-import app.omnivore.omnivore.ui.home.ArticleWebView
 import app.omnivore.omnivore.ui.home.HomeView
 import app.omnivore.omnivore.ui.home.HomeViewModel
+import app.omnivore.omnivore.ui.reader.ArticleWebView
 
 @Composable
 fun RootView(loginViewModel: LoginViewModel, homeViewModel: HomeViewModel) {