improve medium screen performance

DatL4g · Apr 29, 2024 · 15859f2 · 15859f2
1 parent b6e0032
commit 15859f2
Show file tree

Hide file tree

Showing 13 changed files with 167 additions and 235 deletions.
diff --git a/anilist/src/commonMain/kotlin/dev/datlag/aniflow/anilist/MediumStateMachine.kt b/anilist/src/commonMain/kotlin/dev/datlag/aniflow/anilist/MediumStateMachine.kt
@@ -62,8 +62,8 @@ class MediumStateMachine(
             }
             inState<State.Success> {
                 onEnterEffect {
-                    Cache.setMedium(it.query, it.data)
                     currentState = it
+                    Cache.setMedium(it.query, it.data)
                 }
             }
             inState<State.Error> {

diff --git a/composeApp/src/commonMain/kotlin/dev/datlag/aniflow/common/ExtendComponent.kt b/composeApp/src/commonMain/kotlin/dev/datlag/aniflow/common/ExtendComponent.kt
@@ -8,6 +8,7 @@ import dev.datlag.aniflow.ui.navigation.Component
 import dev.datlag.aniflow.ui.theme.SchemeTheme
 import dev.datlag.tooling.decompose.lifecycle.LocalLifecycleOwner
 import dev.datlag.tooling.decompose.lifecycle.collectAsStateWithLifecycle
+import kotlinx.coroutines.flow.Flow
 import kotlinx.coroutines.flow.StateFlow
 import kotlinx.coroutines.flow.map
 
@@ -57,4 +58,13 @@ fun <T, R> StateFlow<T>.mapCollect(transform: (value: T) -> R): State<R> {
     }.collectAsStateWithLifecycle(
         initialValue = transform(this.value)
     )
+}
+
+@Composable
+fun <T, R> Flow<T>.mapCollect(defaultValue: T, transform: (value: T) -> R): State<R> {
+    return remember(this) {
+        this.map(transform)
+    }.collectAsStateWithLifecycle(
+        initialValue = transform(defaultValue)
+    )
 }
diff --git a/...p/src/commonMain/kotlin/dev/datlag/aniflow/ui/navigation/screen/medium/MediumComponent.kt b/...p/src/commonMain/kotlin/dev/datlag/aniflow/ui/navigation/screen/medium/MediumComponent.kt
@@ -15,34 +15,35 @@ import kotlinx.coroutines.flow.StateFlow
 
 interface MediumComponent : ContentHolderComponent {
     val initialMedium: Medium
+    val initialState: MediumStateMachine.State
 
-    val mediumState: StateFlow<MediumStateMachine.State>
-    val isAdult: StateFlow<Boolean>
+    val mediumState: Flow<MediumStateMachine.State>
+    val isAdult: Flow<Boolean>
     val isAdultAllowed: Flow<Boolean>
 
-    val bannerImage: StateFlow<String?>
-    val coverImage: StateFlow<Medium.CoverImage>
-    val title: StateFlow<Medium.Title>
-    val description: StateFlow<String?>
+    val bannerImage: Flow<String?>
+    val coverImage: Flow<Medium.CoverImage>
+    val title: Flow<Medium.Title>
+    val description: Flow<String?>
     val translatedDescription: StateFlow<String?>
-    val genres: StateFlow<Set<String>>
-
-    val format: StateFlow<MediaFormat>
-    val episodes: StateFlow<Int>
-    val duration: StateFlow<Int>
-    val status: StateFlow<MediaStatus>
-
-    val rated: StateFlow<Medium.Ranking?>
-    val popular: StateFlow<Medium.Ranking?>
-    val score: StateFlow<Int?>
-
-    val characters: StateFlow<Set<Character>>
-    val rating: StateFlow<Int>
-    val alreadyAdded: StateFlow<Boolean>
-    val trailer: StateFlow<Medium.Trailer?>
-    val isFavorite: StateFlow<Boolean>
-    val isFavoriteBlocked: StateFlow<Boolean>
-    val siteUrl: StateFlow<String>
+    val genres: Flow<Set<String>>
+
+    val format: Flow<MediaFormat>
+    val episodes: Flow<Int>
+    val duration: Flow<Int>
+    val status: Flow<MediaStatus>
+
+    val rated: Flow<Medium.Ranking?>
+    val popular: Flow<Medium.Ranking?>
+    val score: Flow<Int?>
+
+    val characters: Flow<Set<Character>>
+    val rating: Flow<Int>
+    val alreadyAdded: Flow<Boolean>
+    val trailer: Flow<Medium.Trailer?>
+    val isFavorite: Flow<Boolean>
+    val isFavoriteBlocked: Flow<Boolean>
+    val siteUrl: Flow<String>
 
     val bsAvailable: Boolean
 

diff --git a/...eApp/src/commonMain/kotlin/dev/datlag/aniflow/ui/navigation/screen/medium/MediumScreen.kt b/...eApp/src/commonMain/kotlin/dev/datlag/aniflow/ui/navigation/screen/medium/MediumScreen.kt
@@ -41,7 +41,7 @@ import dev.datlag.tooling.decompose.lifecycle.collectAsStateWithLifecycle
 @OptIn(ExperimentalMaterial3Api::class, ExperimentalHazeMaterialsApi::class, ExperimentalFoundationApi::class)
 @Composable
 fun MediumScreen(component: MediumComponent) {
-    val coverImage by component.coverImage.collectAsStateWithLifecycle()
+    val coverImage by component.coverImage.collectAsStateWithLifecycle(component.initialMedium.coverImage)
     val dialogState by component.dialog.subscribeAsState()
 
     dialogState.child?.instance?.render()
@@ -64,6 +64,7 @@ fun MediumScreen(component: MediumComponent) {
                 CollapsingToolbar(
                     state = appBarState,
                     scrollBehavior = scrollState,
+                    initialMedium = component.initialMedium,
                     mediumStateFlow = component.mediumState,
                     bannerImageFlow = component.bannerImage,
                     coverImage = coverImage,
@@ -72,16 +73,19 @@ fun MediumScreen(component: MediumComponent) {
                     isFavoriteBlockedFlow = component.isFavoriteBlocked,
                     siteUrlFlow = component.siteUrl,
                     showShare = listState.isScrollingUp(),
+                    initialState = { component.initialState },
                     onBack = { component.back() },
                     onToggleFavorite = { component.toggleFavorite() }
                 )
             },
             floatingActionButton = {
-                val userRating by component.rating.collectAsStateWithLifecycle()
+                val userRating by component.rating.collectAsStateWithLifecycle(-1)
                 val ratingState = rememberUseCaseState()
 
-                val alreadyAdded by component.alreadyAdded.collectAsStateWithLifecycle()
-                val notReleased by component.status.mapCollect {
+                val alreadyAdded by component.alreadyAdded.collectAsStateWithLifecycle(
+                    component.initialMedium.entry != null
+                )
+                val notReleased by component.status.mapCollect(component.initialMedium.status) {
                     it == MediaStatus.UNKNOWN__ || it == MediaStatus.NOT_YET_RELEASED
                 }
 
@@ -138,6 +142,7 @@ fun MediumScreen(component: MediumComponent) {
                     item {
                         CoverSection(
                             coverImage = coverImage,
+                            initialMedium = component.initialMedium,
                             formatFlow = component.format,
                             episodesFlow = component.episodes,
                             durationFlow = component.duration,
@@ -147,6 +152,7 @@ fun MediumScreen(component: MediumComponent) {
                     }
                     item {
                         RatingSection(
+                            initialMedium = component.initialMedium,
                             ratedFlow = component.rated,
                             popularFlow = component.popular,
                             scoreFlow = component.score,
@@ -155,12 +161,14 @@ fun MediumScreen(component: MediumComponent) {
                     }
                     item {
                         GenreSection(
+                            initialMedium = component.initialMedium,
                             genreFlow = component.genres,
                             modifier = Modifier.fillParentMaxWidth()
                         )
                     }
                     item {
                         DescriptionSection(
+                            initialMedium = component.initialMedium,
                             descriptionFlow = component.description,
                             translatedDescriptionFlow = component.translatedDescription,
                             modifier = Modifier.fillParentMaxWidth()
@@ -170,6 +178,7 @@ fun MediumScreen(component: MediumComponent) {
                     }
                     item {
                         CharacterSection(
+                            initialMedium = component.initialMedium,
                             characterFlow = component.characters,
                             modifier = Modifier.fillParentMaxWidth().animateItemPlacement()
                         ) { char ->
@@ -178,6 +187,7 @@ fun MediumScreen(component: MediumComponent) {
                     }
                     item {
                         TrailerSection(
+                            initialMedium = component.initialMedium,
                             trailerFlow = component.trailer,
                             modifier = Modifier.fillParentMaxWidth().animateItemPlacement()
                         )
@@ -187,6 +197,7 @@ fun MediumScreen(component: MediumComponent) {
         }
 
         AdultSection(
+            initialMedium = component.initialMedium,
             isAdultContentFlow = component.isAdult,
             isAdultContentAllowedFlow = component.isAdultAllowed,
             onBack = component::back