diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/Shimmers.kt b/core/ui/src/main/java/com/tangem/core/ui/components/Shimmers.kt index 640f986b3e..311fe1aae8 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/components/Shimmers.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/components/Shimmers.kt @@ -1,15 +1,25 @@ package com.tangem.core.ui.components +import androidx.compose.animation.core.LinearEasing +import androidx.compose.animation.core.RepeatMode +import androidx.compose.animation.core.infiniteRepeatable +import androidx.compose.animation.core.tween import androidx.compose.foundation.background import androidx.compose.foundation.layout.* import androidx.compose.foundation.shape.CircleShape import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.runtime.Composable +import androidx.compose.runtime.ReadOnlyComposable import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.graphics.BlendMode +import androidx.compose.ui.graphics.Color import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.Dp +import com.tangem.core.ui.res.LocalIsInDarkTheme +import com.tangem.core.ui.res.TangemColorPalette import com.tangem.core.ui.res.TangemTheme -import com.valentinilk.shimmer.shimmer +import com.valentinilk.shimmer.* /** * Rectangle shimmer item with rounded shape from DS @@ -18,11 +28,8 @@ import com.valentinilk.shimmer.shimmer fun RectangleShimmer(modifier: Modifier = Modifier, radius: Dp = TangemTheme.dimens.radius6) { Box( modifier = modifier - .shimmer() - .background( - color = TangemTheme.colors.button.secondary, - shape = RoundedCornerShape(size = radius), - ), + .clip(RoundedCornerShape(size = radius)) + .shimmer(TangemShimmer), ) } @@ -34,27 +41,67 @@ fun RectangleShimmer(modifier: Modifier = Modifier, radius: Dp = TangemTheme.dim fun CircleShimmer(modifier: Modifier = Modifier) { Box( modifier = modifier - .shimmer() - .background( - color = TangemTheme.colors.button.secondary, - shape = CircleShape, - ), + .clip(CircleShape) + .shimmer(TangemShimmer), ) } +private val TangemShimmer: Shimmer + @Composable + get() = rememberShimmer( + shimmerBounds = ShimmerBounds.View, + theme = defaultShimmerTheme.copy( + animationSpec = infiniteRepeatable( + animation = tween( + durationMillis = 800, + easing = LinearEasing, + delayMillis = 800, + ), + repeatMode = RepeatMode.Restart, + ), + shaderColors = TangemShimmerColors, + blendMode = BlendMode.Src, + shaderColorStops = null, + ), + ) + +private val TangemShimmerColors: List + @Composable + @ReadOnlyComposable + get() { + val isInDarkTheme = LocalIsInDarkTheme.current + + return buildList { + if (isInDarkTheme) { + TangemColorPalette.Dark3.let(::add) + TangemColorPalette.Dark4.let(::add) + TangemColorPalette.Dark6.let(::add) + TangemColorPalette.Dark4.let(::add) + TangemColorPalette.Dark3.let(::add) + } else { + TangemColorPalette.Light2.let(::add) + TangemColorPalette.Light1.let(::add) + TangemColorPalette.White.let(::add) + TangemColorPalette.Light1.let(::add) + TangemColorPalette.Light2.let(::add) + } + } + } + // region preview @Composable private fun ShimmersPreview() { Column( - modifier = Modifier.fillMaxWidth(), + modifier = Modifier + .fillMaxWidth() + .background(TangemTheme.colors.background.primary), verticalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing18), ) { RectangleShimmer( - modifier = Modifier.size( - width = TangemTheme.dimens.size72, - height = TangemTheme.dimens.size12, - ), + modifier = Modifier + .fillMaxWidth() + .height(TangemTheme.dimens.size24), ) CircleShimmer(modifier = Modifier.size(size = TangemTheme.dimens.size42)) } diff --git a/core/ui/src/main/java/com/tangem/core/ui/res/TangemTheme.kt b/core/ui/src/main/java/com/tangem/core/ui/res/TangemTheme.kt index efe05116e7..f72c4b456f 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/res/TangemTheme.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/res/TangemTheme.kt @@ -36,6 +36,7 @@ fun TangemTheme( LocalTangemTypography provides typography, LocalTangemDimens provides dimens, LocalTangemShapes provides shapes, + LocalIsInDarkTheme provides isDark, ) { ProvideTextStyle( value = TangemTheme.typography.body1, @@ -197,4 +198,6 @@ private val LocalTangemDimens = staticCompositionLocalOf { private val LocalTangemShapes = staticCompositionLocalOf { error("No TangemShapes provided") -} \ No newline at end of file +} + +val LocalIsInDarkTheme = staticCompositionLocalOf { false } \ No newline at end of file