MangaScreen: Improve chapter list scrolling performance (#7491)

* MangaScreen: Improve chapter list scrolling performance

Process chapter title, date and read progress string ahead of time

* Use enum for contentType and add key

app/src/main/java/eu/kanade/presentation/manga/MangaScreen.kt

@@ -44,7 +44,6 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.hapticfeedback.HapticFeedbackType
 import androidx.compose.ui.layout.onSizeChanged
-import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.platform.LocalHapticFeedback
 import androidx.compose.ui.platform.LocalLayoutDirection
@@ -52,7 +51,6 @@ import androidx.compose.ui.res.stringResource
 import com.google.accompanist.swiperefresh.SwipeRefresh
 import com.google.accompanist.swiperefresh.rememberSwipeRefreshState
 import eu.kanade.domain.chapter.model.Chapter
-import eu.kanade.domain.manga.model.Manga.Companion.CHAPTER_DISPLAY_NUMBER
 import eu.kanade.presentation.components.ExtendedFloatingActionButton
 import eu.kanade.presentation.components.Scaffold
 import eu.kanade.presentation.components.SwipeRefreshIndicator
@@ -73,16 +71,6 @@ import eu.kanade.tachiyomi.source.SourceManager
 import eu.kanade.tachiyomi.source.getNameForMangaInfo
 import eu.kanade.tachiyomi.ui.manga.ChapterItem
 import eu.kanade.tachiyomi.ui.manga.MangaScreenState
-import eu.kanade.tachiyomi.util.lang.toRelativeString
-import java.text.DecimalFormat
-import java.text.DecimalFormatSymbols
-import java.util.Date
-
-private val chapterDecimalFormat = DecimalFormat(
-    "#.###",
-    DecimalFormatSymbols()
-        .apply { decimalSeparator = '.' },
-)
 
 @Composable
 fun MangaScreen(
@@ -321,7 +309,10 @@ private fun MangaScreenSmallImpl(
                     state = chapterListState,
                     contentPadding = noTopContentPadding,
                 ) {
-                    item(contentType = "info_box") {
+                    item(
+                        key = MangaScreenItem.INFO_BOX,
+                        contentType = MangaScreenItem.INFO_BOX,
+                    ) {
                         MangaInfoBox(
                             windowWidthSizeClass = WindowWidthSizeClass.Compact,
                             appBarPadding = topPadding,
@@ -337,7 +328,10 @@ private fun MangaScreenSmallImpl(
                         )
                     }
 
-                    item(contentType = "action_row") {
+                    item(
+                        key = MangaScreenItem.ACTION_ROW,
+                        contentType = MangaScreenItem.ACTION_ROW,
+                    ) {
                         MangaActionRow(
                             favorite = state.manga.favorite,
                             trackingCount = state.trackingCount,
@@ -348,7 +342,10 @@ private fun MangaScreenSmallImpl(
                         )
                     }
 
-                    item(contentType = "desc") {
+                    item(
+                        key = MangaScreenItem.DESCRIPTION_WITH_TAG,
+                        contentType = MangaScreenItem.DESCRIPTION_WITH_TAG,
+                    ) {
                         ExpandableMangaDescription(
                             defaultExpandState = state.isFromSource,
                             description = state.manga.description,
@@ -357,7 +354,10 @@ private fun MangaScreenSmallImpl(
                         )
                     }
 
-                    item(contentType = "header") {
+                    item(
+                        key = MangaScreenItem.CHAPTER_HEADER,
+                        contentType = MangaScreenItem.CHAPTER_HEADER,
+                    ) {
                         ChapterHeader(
                             chapterCount = chapters.size,
                             isChapterFiltered = state.manga.chaptersFiltered(),
@@ -367,7 +367,6 @@ private fun MangaScreenSmallImpl(
 
                     sharedChapterItems(
                         chapters = chapters,
-                        state = state,
                         selected = selected,
                         selectedPositions = selectedPositions,
                         onChapterClicked = onChapterClicked,
@@ -564,7 +563,10 @@ fun MangaScreenLargeImpl(
                         state = chapterListState,
                         contentPadding = withNavBarContentPadding,
                     ) {
-                        item(contentType = "header") {
+                        item(
+                            key = MangaScreenItem.CHAPTER_HEADER,
+                            contentType = MangaScreenItem.CHAPTER_HEADER,
+                        ) {
                             ChapterHeader(
                                 chapterCount = chapters.size,
                                 isChapterFiltered = state.manga.chaptersFiltered(),
@@ -574,7 +576,6 @@ fun MangaScreenLargeImpl(
 
                         sharedChapterItems(
                             chapters = chapters,
-                            state = state,
                             selected = selected,
                             selectedPositions = selectedPositions,
                             onChapterClicked = onChapterClicked,
@@ -637,56 +638,27 @@ private fun SharedMangaBottomActionMenu(
 
 private fun LazyListScope.sharedChapterItems(
     chapters: List<ChapterItem>,
-    state: MangaScreenState.Success,
     selected: SnapshotStateList<ChapterItem>,
     selectedPositions: Array<Int>,
     onChapterClicked: (Chapter) -> Unit,
     onDownloadChapter: ((List<ChapterItem>, ChapterDownloadAction) -> Unit)?,
 ) {
-    items(items = chapters) { chapterItem ->
-        val context = LocalContext.current
+    items(
+        items = chapters,
+        key = { it.chapter.id },
+        contentType = { MangaScreenItem.CHAPTER },
+    ) { chapterItem ->
         val haptic = LocalHapticFeedback.current
-
-        val (chapter, downloadState, downloadProgress) = chapterItem
-        val chapterTitle = if (state.manga.displayMode == CHAPTER_DISPLAY_NUMBER) {
-            stringResource(
-                id = R.string.display_mode_chapter,
-                chapterDecimalFormat.format(chapter.chapterNumber.toDouble()),
-            )
-        } else {
-            chapter.name
-        }
-        val date = remember(chapter.dateUpload) {
-            chapter.dateUpload
-                .takeIf { it > 0 }
-                ?.let {
-                    Date(it).toRelativeString(
-                        context,
-                        state.dateRelativeTime,
-                        state.dateFormat,
-                    )
-                }
-        }
-        val lastPageRead = remember(chapter.lastPageRead) {
-            chapter.lastPageRead.takeIf { !chapter.read && it > 0 }
-        }
-        val scanlator = remember(chapter.scanlator) { chapter.scanlator.takeIf { !it.isNullOrBlank() } }
-
         MangaChapterListItem(
-            title = chapterTitle,
-            date = date,
-            readProgress = lastPageRead?.let {
-                stringResource(
-                    id = R.string.chapter_progress,
-                    it + 1,
-                )
-            },
-            scanlator = scanlator,
-            read = chapter.read,
-            bookmark = chapter.bookmark,
+            title = chapterItem.chapterTitleString,
+            date = chapterItem.dateUploadString,
+            readProgress = chapterItem.readProgressString,
+            scanlator = chapterItem.chapter.scanlator.takeIf { !it.isNullOrBlank() },
+            read = chapterItem.chapter.read,
+            bookmark = chapterItem.chapter.bookmark,
             selected = selected.contains(chapterItem),
-            downloadStateProvider = { downloadState },
-            downloadProgressProvider = { downloadProgress },
+            downloadStateProvider = { chapterItem.downloadState },
+            downloadProgressProvider = { chapterItem.downloadProgress },
             onLongClick = {
                 val dispatched = onChapterItemLongClick(
                     chapterItem = chapterItem,

app/src/main/java/eu/kanade/presentation/manga/MangaScreenConstants.kt

@@ -20,3 +20,11 @@ enum class EditCoverAction {
     EDIT,
     DELETE,
 }
+
+enum class MangaScreenItem {
+    INFO_BOX,
+    ACTION_ROW,
+    DESCRIPTION_WITH_TAG,
+    CHAPTER_HEADER,
+    CHAPTER,
+}

app/src/main/java/eu/kanade/presentation/manga/components/MangaChapterListItem.kt

@@ -81,8 +81,8 @@ fun MangaChapterListItem(
                 }
                 Text(
                     text = title,
-                    style = MaterialTheme.typography.bodyMedium
-                        .copy(color = textColor),
+                    color = textColor,
+                    style = MaterialTheme.typography.bodyMedium,
                     maxLines = 1,
                     overflow = TextOverflow.Ellipsis,
                     onTextLayout = { textHeight = it.size.height },