finish theme performance improvement

DatL4g · Apr 30, 2024 · 2ab276a · 2ab276a
1 parent 43f7ac2
commit 2ab276a
Show file tree

Hide file tree

Showing 14 changed files with 189 additions and 102 deletions.
diff --git a/build.gradle.kts b/build.gradle.kts
@@ -34,6 +34,7 @@ buildscript {
     }
     dependencies {
         classpath(libs.moko.resources.generator)
+        classpath(libs.atomicfu)
     }
 }
 

diff --git a/composeApp/src/commonMain/kotlin/dev/datlag/aniflow/common/ExtendComponent.kt b/composeApp/src/commonMain/kotlin/dev/datlag/aniflow/common/ExtendComponent.kt
@@ -35,14 +35,14 @@ fun Component.onRender(content: @Composable () -> Unit) {
 }
 
 @Composable
-fun Component.onRenderWithScheme(key: Any?, content: @Composable (DominantColorState<Painter>) -> Unit) {
+fun Component.onRenderWithScheme(key: Any?, content: @Composable (SchemeTheme.Updater?) -> Unit) {
     onRender {
         SchemeTheme(key, content)
     }
 }
 
 @Composable
-fun Component.onRenderApplyCommonScheme(key: Any?, content: @Composable (DominantColorState<Painter>) -> Unit) {
+fun Component.onRenderApplyCommonScheme(key: Any?, content: @Composable (SchemeTheme.Updater?) -> Unit) {
     onRenderWithScheme(key, content)
 
     SchemeTheme.setCommon(key)

diff --git a/composeApp/src/commonMain/kotlin/dev/datlag/aniflow/common/ExtendCompose.kt b/composeApp/src/commonMain/kotlin/dev/datlag/aniflow/common/ExtendCompose.kt
@@ -1,28 +1,25 @@
 package dev.datlag.aniflow.common
 
-import androidx.compose.animation.core.*
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.calculateEndPadding
 import androidx.compose.foundation.layout.calculateStartPadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyListState
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.SheetState
 import androidx.compose.material3.SheetValue
 import androidx.compose.runtime.*
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.composed
-import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.RectangleShape
-import androidx.compose.ui.graphics.Shape
-import androidx.compose.ui.graphics.painter.BrushPainter
 import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.max
+import com.kmpalette.DominantColorState
 import dev.datlag.aniflow.LocalPaddingValues
 
 fun Modifier.bottomShadowBrush(color: Color, alpha: Float = 1F): Modifier {
@@ -108,44 +105,6 @@ fun Modifier.mergedLocalPadding(other: PaddingValues, additional: Dp) = composed
     this.mergedLocalPadding(other, PaddingValues(additional))
 }
 
-@Composable
-private fun shimmerBrush(): Brush {
-    val shimmerColors = listOf(
-        Color.LightGray.copy(alpha = 0.2f),
-        Color.LightGray.copy(alpha = 0.3f),
-        Color.LightGray.copy(alpha = 0.4f),
-        Color.LightGray.copy(alpha = 0.3f),
-        Color.LightGray.copy(alpha = 0.2f),
-    )
-
-    val transition = rememberInfiniteTransition()
-    val translateAnimation by transition.animateFloat(
-        initialValue = 0f,
-        targetValue = 1500.toFloat(),
-        animationSpec = infiniteRepeatable(
-            animation = tween(
-                durationMillis = 1000,
-                easing = LinearEasing,
-            ),
-            repeatMode = RepeatMode.Restart,
-        )
-    )
-
-    return Brush.linearGradient(
-        colors = shimmerColors,
-        start = Offset(x = translateAnimation - 500, y = 0.0f),
-        end = Offset(x = translateAnimation, y = 270F),
-    )
-}
-
-fun Modifier.shimmer(shape: Shape = RectangleShape): Modifier = composed {
-    this.background(
-        brush = shimmerBrush(),
-        shape = shape
-    )
-}
-
-
 @Composable
 fun LazyListState.isScrollingUp(): Boolean {
     var previousIndex by remember(this) {
@@ -186,4 +145,12 @@ fun SheetState.isFullyExpandedOrTargeted(forceFullExpand: Boolean = false): Bool
     }
 
     return this.targetValue == checkState
-}
+}
+
+val <T : Any> DominantColorState<T>?.primary
+    @Composable
+    get() = this?.color ?: MaterialTheme.colorScheme.primary
+
+val <T : Any> DominantColorState<T>?.onPrimary
+    @Composable
+    get() = this?.onColor ?: MaterialTheme.colorScheme.onPrimary
diff --git a/...nMain/kotlin/dev/datlag/aniflow/ui/navigation/screen/initial/home/component/AiringCard.kt b/...nMain/kotlin/dev/datlag/aniflow/ui/navigation/screen/initial/home/component/AiringCard.kt
@@ -22,6 +22,7 @@ import dev.datlag.aniflow.common.preferred
 import dev.datlag.aniflow.settings.Settings
 import dev.datlag.aniflow.settings.model.AppSettings
 import dev.datlag.aniflow.ui.theme.SchemeTheme
+import dev.datlag.aniflow.ui.theme.rememberSchemeThemeDominantColorState
 import dev.datlag.tooling.decompose.lifecycle.collectAsStateWithLifecycle
 import kotlinx.coroutines.flow.Flow
 import kotlinx.coroutines.launch
@@ -36,14 +37,14 @@ fun AiringCard(
     onClick: (Medium) -> Unit
 ) {
     airing.media?.let(::Medium)?.let { media ->
+        val updater = SchemeTheme.create(media.id)
+
         Card(
             modifier = modifier,
             onClick = {
                 onClick(media)
             }
         ) {
-            val scope = rememberCoroutineScope()
-
             Row(
                 modifier = Modifier.fillMaxWidth(),
                 horizontalArrangement = Arrangement.spacedBy(8.dp)
@@ -62,15 +63,15 @@ fun AiringCard(
                             model = media.coverImage.medium,
                             contentScale = ContentScale.Crop,
                             onSuccess = { state ->
-
+                                updater?.update(state.painter)
                             }
                         ),
                         onSuccess = { state ->
-
+                            updater?.update(state.painter)
                         }
                     ),
                     onSuccess = { state ->
-
+                        updater?.update(state.painter)
                     }
                 )
                 Column(

diff --git a/...n/kotlin/dev/datlag/aniflow/ui/navigation/screen/initial/home/component/AiringOverview.kt b/...n/kotlin/dev/datlag/aniflow/ui/navigation/screen/initial/home/component/AiringOverview.kt
@@ -20,7 +20,6 @@ import androidx.compose.ui.unit.dp
 import dev.datlag.aniflow.anilist.AiringQuery
 import dev.datlag.aniflow.anilist.AiringTodayStateMachine
 import dev.datlag.aniflow.anilist.model.Medium
-import dev.datlag.aniflow.common.shimmer
 import dev.datlag.aniflow.other.StateSaver
 import dev.datlag.aniflow.settings.model.AppSettings
 import dev.datlag.tooling.decompose.lifecycle.collectAsStateWithLifecycle

diff --git a/...nMain/kotlin/dev/datlag/aniflow/ui/navigation/screen/initial/home/component/MediumCard.kt b/...nMain/kotlin/dev/datlag/aniflow/ui/navigation/screen/initial/home/component/MediumCard.kt
@@ -1,37 +1,29 @@
 package dev.datlag.aniflow.ui.navigation.screen.initial.home.component
 
-import androidx.compose.animation.animateColorAsState
-import androidx.compose.animation.core.animateFloatAsState
-import androidx.compose.animation.core.tween
 import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.lazy.LazyListState
 import androidx.compose.material3.Card
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.material3.contentColorFor
 import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.scale
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.painter.ColorPainter
-import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import coil3.compose.AsyncImage
 import coil3.compose.rememberAsyncImagePainter
 import dev.datlag.aniflow.anilist.model.Medium
 import dev.datlag.aniflow.common.bottomShadowBrush
+import dev.datlag.aniflow.common.onPrimary
+import dev.datlag.aniflow.common.primary
 import dev.datlag.aniflow.common.preferred
 import dev.datlag.aniflow.settings.model.AppSettings
-import dev.datlag.aniflow.ui.custom.alignment.rememberParallaxAlignment
 import dev.datlag.aniflow.ui.theme.SchemeTheme
 import dev.datlag.aniflow.ui.theme.rememberSchemeThemeDominantColorState
 import dev.datlag.tooling.decompose.lifecycle.collectAsStateWithLifecycle
-import kotlinx.coroutines.CoroutineScope
 import kotlinx.coroutines.flow.Flow
-import kotlinx.coroutines.launch
 
 @OptIn(ExperimentalStdlibApi::class)
 @Composable
@@ -43,7 +35,7 @@ fun MediumCard(
 ) {
     SchemeTheme(
         key = medium.id
-    ) { schemeState ->
+    ) { updater ->
         Card(
             modifier = modifier,
             onClick = {
@@ -64,7 +56,6 @@ fun MediumCard(
                     defaultColor = color ?: MaterialTheme.colorScheme.primary,
                     defaultOnColor = contentColorFor(color ?: MaterialTheme.colorScheme.primary)
                 )
-                val scope = rememberCoroutineScope()
 
                 AsyncImage(
                     model = medium.coverImage.extraLarge,
@@ -78,28 +69,18 @@ fun MediumCard(
                             model = medium.coverImage.medium,
                             contentScale = ContentScale.Crop,
                             onSuccess = { state ->
-                                scope.launch {
-                                    schemeState.updateFrom(state.painter)
-                                }
+                                updater?.update(state.painter)
                             },
                             onError = {
-                                color?.let(::ColorPainter)?.let { painter ->
-                                    scope.launch {
-                                        schemeState.updateFrom(painter)
-                                    }
-                                }
+                                updater?.update(color)
                             }
                         ),
                         onSuccess = { state ->
-                            scope.launch {
-                                schemeState.updateFrom(state.painter)
-                            }
+                            updater?.update(state.painter)
                         }
                     ),
                     onSuccess = { state ->
-                        scope.launch {
-                            schemeState.updateFrom(state.painter)
-                        }
+                        updater?.update(state.painter)
                     }
                 )
 
@@ -114,7 +95,7 @@ fun MediumCard(
                     modifier = Modifier
                         .align(Alignment.BottomStart)
                         .fillMaxWidth()
-                        .bottomShadowBrush(colorState.color)
+                        .bottomShadowBrush(colorState.primary)
                         .padding(16.dp)
                         .padding(top = 16.dp),
                     verticalArrangement = Arrangement.spacedBy(8.dp)
@@ -131,10 +112,10 @@ fun MediumCard(
                         },
                         overflow = TextOverflow.Ellipsis,
                         modifier = Modifier.fillMaxWidth(),
-                        color = colorState.onColor
+                        color = colorState.onPrimary
                     )
                     if (medium.averageScore > 0F) {
-                        Rating(medium, colorState.onColor)
+                        Rating(medium, colorState.onPrimary)
                     }
                 }
             }

diff --git a/...n/dev/datlag/aniflow/ui/navigation/screen/initial/home/component/PopularSeasonOverview.kt b/...n/dev/datlag/aniflow/ui/navigation/screen/initial/home/component/PopularSeasonOverview.kt
@@ -18,7 +18,6 @@ import dev.datlag.aniflow.anilist.SeasonQuery
 import dev.datlag.aniflow.anilist.TrendingQuery
 import dev.datlag.aniflow.anilist.model.Medium
 import dev.datlag.aniflow.anilist.state.SeasonState
-import dev.datlag.aniflow.common.shimmer
 import dev.datlag.aniflow.other.StateSaver
 import dev.datlag.aniflow.settings.model.AppSettings
 import dev.datlag.tooling.decompose.lifecycle.collectAsStateWithLifecycle

diff --git a/...kotlin/dev/datlag/aniflow/ui/navigation/screen/initial/home/component/TrendingOverview.kt b/...kotlin/dev/datlag/aniflow/ui/navigation/screen/initial/home/component/TrendingOverview.kt
@@ -16,7 +16,6 @@ import androidx.compose.ui.unit.dp
 import dev.datlag.aniflow.anilist.TrendingAnimeStateMachine
 import dev.datlag.aniflow.anilist.TrendingQuery
 import dev.datlag.aniflow.anilist.model.Medium
-import dev.datlag.aniflow.common.shimmer
 import dev.datlag.aniflow.other.StateSaver
 import dev.datlag.aniflow.settings.model.AppSettings
 import dev.datlag.tooling.decompose.lifecycle.collectAsStateWithLifecycle
-Original file line number
+Diff line change
@@ Expand Up / @@ -34,6 +34,7 @@ buildscript { @@
         }
         dependencies {
             classpath(libs.moko.resources.generator)
+            classpath(libs.atomicfu)
         }
     }
@@ Expand Down @@