Updated on 2026-08-14

features/txhistory/api/build.gradle.kts

@@ -21,6 +21,7 @@ dependencies {
     /** Compose */
     implementation(deps.compose.runtime)
     implementation(deps.compose.foundation)
+    implementation(deps.compose.ui.tooling)
 
     /** Other */
     implementation(deps.kotlin.immutable.collections)

features/txhistory/api/src/main/kotlin/com/tangem/features/txhistory/component/TxHistoryComponent.kt

@@ -14,6 +14,8 @@ interface TxHistoryComponent {
 
     val txHistoryState: StateFlow<TxHistoryUM>
 
+    fun LazyListScope.txHistoryContentLegacy(listState: LazyListState, state: TxHistoryUM)
+
     fun LazyListScope.txHistoryContent(listState: LazyListState, state: TxHistoryUM)
 
     data class Params(

features/txhistory/api/src/main/kotlin/com/tangem/features/txhistory/entity/TxHistoryUM.kt

@@ -15,6 +15,7 @@ sealed interface TxHistoryUM {
             TxHistoryItemUM.Transaction(TransactionState.Loading("LOADING_TX_HASH_1")),
             TxHistoryItemUM.Transaction(TransactionState.Loading("LOADING_TX_HASH_2")),
             TxHistoryItemUM.Transaction(TransactionState.Loading("LOADING_TX_HASH_3")),
+            TxHistoryItemUM.Transaction(TransactionState.Loading("LOADING_TX_HASH_4")),
         )
     }
 

features/txhistory/api/src/main/kotlin/com/tangem/features/txhistory/ui/TxHistoryContent.kt

@@ -1,139 +1,214 @@
 package com.tangem.features.txhistory.ui
 
+import android.content.res.Configuration
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.lazy.LazyListScope
 import androidx.compose.foundation.lazy.LazyListState
-import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import com.tangem.core.ui.components.list.InfiniteListHandler
-import com.tangem.core.ui.components.transactions.PendingTxsBlock
-import com.tangem.core.ui.components.transactions.Transaction
-import com.tangem.core.ui.components.transactions.TxHistoryGroupTitle
-import com.tangem.core.ui.components.transactions.TxHistoryTitle
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.layout.layoutId
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.util.lerp
+import com.tangem.core.ui.R
+import com.tangem.core.ui.components.CircleShimmer
+import com.tangem.core.ui.components.RectangleShimmer
 import com.tangem.core.ui.components.transactions.empty.EmptyTransactionBlock
 import com.tangem.core.ui.components.transactions.empty.EmptyTransactionsBlockState
-import com.tangem.core.ui.components.transactions.state.TransactionState
-import com.tangem.core.ui.decorations.roundedShapeItemDecoration
+import com.tangem.core.ui.ds.row.TangemRowContainer
+import com.tangem.core.ui.ds.row.TangemRowLayoutId
 import com.tangem.core.ui.res.TangemTheme
+import com.tangem.core.ui.res.TangemThemePreviewRedesign
 import com.tangem.features.txhistory.entity.TxHistoryUM
 
-private const val LOAD_ITEMS_BUFFER = 20
+private val LoadingTitleShimmerWidth = 52.dp
+private val LoadingPrimaryShimmerWidth = 110.dp
+private val LoadingSecondaryShimmerWidth = 52.dp
+private val LoadingEndTopShimmerWidth = 107.dp
+private val LoadingEndBottomShimmerWidth = 52.dp
+
+private const val LOADING_TRANSACTION_MIN_ALPHA = 0.1f
 
 fun LazyListScope.txHistoryItems(listState: LazyListState, state: TxHistoryUM) {
     when (state) {
         is TxHistoryUM.Content -> contentItems(listState, state)
-        is TxHistoryUM.Empty -> nonContentItem(state = EmptyTransactionsBlockState.Empty(state.onExploreClick))
-        is TxHistoryUM.Error -> nonContentItem(
-            state = EmptyTransactionsBlockState.FailedToLoad(
-                onReload = state.onReloadClick,
-                onExplore = state.onExploreClick,
-            ),
-        )
+        is TxHistoryUM.Empty -> emptyItem(state)
+        is TxHistoryUM.Error -> errorItem(state)
         is TxHistoryUM.Loading -> loadingItems(state)
-        is TxHistoryUM.NotSupported -> {
-            if (state.pendingTransactions.isNotEmpty()) {
-                item(key = "PendingTxsBlock", contentType = "PendingTxsBlock") {
-                    PendingTxsBlock(pendingTxs = state.pendingTransactions, isBalanceHidden = state.isBalanceHidden)
-                }
-            }
-
-            nonContentItem(
-                state = EmptyTransactionsBlockState.NotImplemented(onExplore = state.onExploreClick),
-            )
-        }
+        is TxHistoryUM.NotSupported -> notSupportedItem(state)
     }
 }
 
-private fun LazyListScope.nonContentItem(state: EmptyTransactionsBlockState, modifier: Modifier = Modifier) {
-    item(key = state::class.java, contentType = state::class.java) {
-        EmptyTransactionBlock(
-            state = state,
-            modifier = modifier
-                .animateItem(fadeInSpec = null, fadeOutSpec = null)
-                .padding(horizontal = TangemTheme.dimens.spacing16, vertical = TangemTheme.dimens.spacing12)
-                .fillMaxWidth(),
-        )
+@Suppress("UNUSED_PARAMETER")
+private fun LazyListScope.contentItems(listState: LazyListState, state: TxHistoryUM.Content) {
+    item(key = "tx_history_content", contentType = "tx_history_content") {
+        TxHistoryContentBlock(state = state)
+    }
+}
+
+private fun LazyListScope.emptyItem(state: TxHistoryUM.Empty) {
+    item(key = "tx_history_empty", contentType = "tx_history_empty") {
+        TxHistoryEmptyBlock(state = state)
+    }
+}
+
+private fun LazyListScope.errorItem(state: TxHistoryUM.Error) {
+    item(key = "tx_history_error", contentType = "tx_history_error") {
+        TxHistoryErrorBlock(state = state)
     }
 }
 
 private fun LazyListScope.loadingItems(state: TxHistoryUM.Loading) {
-    itemsIndexed(
-        items = state.items,
-        key = { _, item ->
-            when (item) {
-                is TxHistoryUM.TxHistoryItemUM.GroupTitle -> item.itemKey
-                is TxHistoryUM.TxHistoryItemUM.Title -> item.onExploreClick.hashCode()
-                is TxHistoryUM.TxHistoryItemUM.Transaction ->
-                    item.state.txHash + (item.state as? TransactionState.Content)?.hashCode()
-            }
-        },
-        contentType = { _, item -> item::class.java },
-        itemContent = { index, item ->
-            TxHistoryListItem(
-                state = item,
-                isBalanceHidden = true,
-                modifier = Modifier.roundedShapeItemDecoration(
-                    currentIndex = index,
-                    lastIndex = state.items.lastIndex,
-                ),
-            )
-        },
+    item(key = "tx_history_loading", contentType = "tx_history_loading") {
+        TxHistoryLoadingBlock(state = state)
+    }
+}
+
+private fun LazyListScope.notSupportedItem(state: TxHistoryUM.NotSupported) {
+    item(key = "tx_history_not_supported", contentType = "tx_history_not_supported") {
+        TxHistoryNotSupportedBlock(state = state)
+    }
+}
+
+@Suppress("UNUSED_PARAMETER")
+@Composable
+private fun TxHistoryContentBlock(state: TxHistoryUM.Content, modifier: Modifier = Modifier) {
+    // TODO [REDACTED_TASK_KEY] redesign Content state
+}
+
+@Composable
+private fun TxHistoryEmptyBlock(state: TxHistoryUM.Empty, modifier: Modifier = Modifier) {
+    EmptyTransactionBlock(
+        state = EmptyTransactionsBlockState.Empty(
+            onExplore = state.onExploreClick,
+            exploreIconResId = R.drawable.ic_compass_24,
+        ),
+        modifier = modifier,
     )
 }
 
-private fun LazyListScope.contentItems(listState: LazyListState, state: TxHistoryUM.Content) {
-    itemsIndexed(
-        items = state.items,
-        key = { _, item ->
-            when (item) {
-                is TxHistoryUM.TxHistoryItemUM.GroupTitle -> item.itemKey
-                is TxHistoryUM.TxHistoryItemUM.Title -> item.onExploreClick.hashCode()
-                is TxHistoryUM.TxHistoryItemUM.Transaction ->
-                    item.state.txHash + (item.state as? TransactionState.Content)?.hashCode()
-            }
-        },
-        contentType = { _, item -> item::class.java },
-        itemContent = { index, item ->
-            TxHistoryListItem(
-                state = item,
-                isBalanceHidden = state.isBalanceHidden,
-                modifier = Modifier.roundedShapeItemDecoration(
-                    currentIndex = index,
-                    lastIndex = state.items.lastIndex,
-                ),
-            )
-        },
+@Composable
+private fun TxHistoryErrorBlock(state: TxHistoryUM.Error, modifier: Modifier = Modifier) {
+    EmptyTransactionBlock(
+        state = EmptyTransactionsBlockState.FailedToLoad(
+            onReload = state.onReloadClick,
+            onExplore = state.onExploreClick,
+            reloadIconResId = R.drawable.ic_refresh_24,
+            exploreIconResId = R.drawable.ic_compass_24,
+        ),
+        modifier = modifier,
     )
-    item {
-        InfiniteListHandler(
-            listState = listState,
-            buffer = LOAD_ITEMS_BUFFER,
-            onLoadMore = state.loadMore,
-        )
+}
+
+@Composable
+private fun TxHistoryLoadingBlock(state: TxHistoryUM.Loading, modifier: Modifier = Modifier) {
+    val transactionCount = state.items.count { it is TxHistoryUM.TxHistoryItemUM.Transaction }
+    Column(modifier = modifier.fillMaxWidth()) {
+        var transactionIndex = 0
+        state.items.forEach { item ->
+            when (item) {
+                is TxHistoryUM.TxHistoryItemUM.Title -> TxHistoryLoadingTitle()
+                is TxHistoryUM.TxHistoryItemUM.Transaction -> {
+                    val fraction = if (transactionCount <= 1) {
+                        0f
+                    } else {
+                        transactionIndex.toFloat() / (transactionCount - 1)
+                    }
+                    val alpha = lerp(start = 1f, stop = LOADING_TRANSACTION_MIN_ALPHA, fraction = fraction)
+                    TxHistoryLoadingTransaction(modifier = Modifier.alpha(alpha))
+                    transactionIndex++
+                }
+                is TxHistoryUM.TxHistoryItemUM.GroupTitle -> Unit
+            }
+        }
     }
 }
 
 @Composable
-internal fun TxHistoryListItem(
-    state: TxHistoryUM.TxHistoryItemUM,
-    isBalanceHidden: Boolean,
-    modifier: Modifier = Modifier,
-) {
-    when (state) {
-        is TxHistoryUM.TxHistoryItemUM.GroupTitle -> {
-            TxHistoryGroupTitle(config = state.legacyGroupTitle, modifier = modifier)
-        }
-        is TxHistoryUM.TxHistoryItemUM.Title -> {
-            TxHistoryTitle(onExploreClick = state.onExploreClick, modifier = modifier)
-        }
-        is TxHistoryUM.TxHistoryItemUM.Transaction -> {
-            Transaction(
-                state = state.state,
-                isBalanceHidden = isBalanceHidden,
-                modifier = modifier,
+private fun TxHistoryLoadingTitle(modifier: Modifier = Modifier) {
+    RectangleShimmer(
+        modifier = modifier
+            .padding(
+                top = TangemTheme.dimens2.x6,
+                bottom = TangemTheme.dimens2.x3,
+                start = TangemTheme.dimens2.x4,
             )
-        }
+            .size(width = LoadingTitleShimmerWidth, height = TangemTheme.dimens2.x4),
+        radius = TangemTheme.dimens2.x2,
+    )
+}
+
+@Composable
+private fun TxHistoryLoadingTransaction(modifier: Modifier = Modifier) {
+    TangemRowContainer(
+        modifier = modifier.fillMaxWidth(),
+        contentPadding = PaddingValues(
+            horizontal = TangemTheme.dimens2.x4,
+            vertical = TangemTheme.dimens2.x3,
+        ),
+        content = {
+            CircleShimmer(
+                modifier = Modifier
+                    .layoutId(TangemRowLayoutId.HEAD)
+                    .padding(end = TangemTheme.dimens2.x3)
+                    .size(TangemTheme.dimens2.x10),
+            )
+            RectangleShimmer(
+                modifier = Modifier
+                    .layoutId(TangemRowLayoutId.START_TOP)
+                    .size(width = LoadingPrimaryShimmerWidth, height = TangemTheme.dimens2.x5),
+                radius = TangemTheme.dimens2.x2,
+            )
+            RectangleShimmer(
+                modifier = Modifier
+                    .layoutId(TangemRowLayoutId.START_BOTTOM)
+                    .size(width = LoadingSecondaryShimmerWidth, height = TangemTheme.dimens2.x4),
+                radius = TangemTheme.dimens2.x2,
+            )
+            RectangleShimmer(
+                modifier = Modifier
+                    .layoutId(TangemRowLayoutId.END_TOP)
+                    .size(width = LoadingEndTopShimmerWidth, height = TangemTheme.dimens2.x5),
+                radius = TangemTheme.dimens2.x2,
+            )
+            RectangleShimmer(
+                modifier = Modifier
+                    .layoutId(TangemRowLayoutId.END_BOTTOM)
+                    .size(width = LoadingEndBottomShimmerWidth, height = TangemTheme.dimens2.x4),
+                radius = TangemTheme.dimens2.x2,
+            )
+        },
+    )
+}
+
+@Composable
+private fun TxHistoryNotSupportedBlock(state: TxHistoryUM.NotSupported, modifier: Modifier = Modifier) {
+    EmptyTransactionBlock(
+        state = EmptyTransactionsBlockState.NotImplemented(
+            onExplore = state.onExploreClick,
+            exploreIconResId = R.drawable.ic_compass_24,
+        ),
+        modifier = modifier,
+    )
+}
+
+// region Preview
+@Preview(showBackground = true, widthDp = 360)
+@Preview(showBackground = true, widthDp = 360, uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+private fun TxHistoryLoadingBlock_Preview() {
+    TangemThemePreviewRedesign {
+        TxHistoryLoadingBlock(
+            state = TxHistoryUM.Loading(
+                isBalanceHidden = false,
+                onExploreClick = {},
+            ),
+        )
     }
-}
+}
+// endregion Preview

features/txhistory/api/src/main/kotlin/com/tangem/features/txhistory/ui/TxHistoryContentLegacy.kt

@@ -0,0 +1,150 @@
+package com.tangem.features.txhistory.ui
+
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyListScope
+import androidx.compose.foundation.lazy.LazyListState
+import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import com.tangem.core.ui.R
+import com.tangem.core.ui.components.list.InfiniteListHandler
+import com.tangem.core.ui.components.transactions.PendingTxsBlock
+import com.tangem.core.ui.components.transactions.Transaction
+import com.tangem.core.ui.components.transactions.TxHistoryGroupTitle
+import com.tangem.core.ui.components.transactions.TxHistoryTitle
+import com.tangem.core.ui.components.transactions.empty.EmptyTransactionBlockLegacy
+import com.tangem.core.ui.components.transactions.empty.EmptyTransactionsBlockState
+import com.tangem.core.ui.components.transactions.state.TransactionState
+import com.tangem.core.ui.decorations.roundedShapeItemDecoration
+import com.tangem.core.ui.res.TangemTheme
+import com.tangem.features.txhistory.entity.TxHistoryUM
+
+private const val LOAD_ITEMS_BUFFER = 20
+
+fun LazyListScope.txHistoryItemsLegacy(listState: LazyListState, state: TxHistoryUM) {
+    when (state) {
+        is TxHistoryUM.Content -> contentItems(listState, state)
+        is TxHistoryUM.Empty -> nonContentItem(
+            state = EmptyTransactionsBlockState.Empty(
+                onExplore = state.onExploreClick,
+                exploreIconResId = R.drawable.ic_arrow_top_right_24,
+            ),
+        )
+        is TxHistoryUM.Error -> nonContentItem(
+            state = EmptyTransactionsBlockState.FailedToLoad(
+                onReload = state.onReloadClick,
+                onExplore = state.onExploreClick,
+                reloadIconResId = R.drawable.ic_refresh_24,
+                exploreIconResId = R.drawable.ic_arrow_top_right_24,
+            ),
+        )
+        is TxHistoryUM.Loading -> loadingItems(state)
+        is TxHistoryUM.NotSupported -> {
+            if (state.pendingTransactions.isNotEmpty()) {
+                item(key = "PendingTxsBlock", contentType = "PendingTxsBlock") {
+                    PendingTxsBlock(pendingTxs = state.pendingTransactions, isBalanceHidden = state.isBalanceHidden)
+                }
+            }
+
+            nonContentItem(
+                state = EmptyTransactionsBlockState.NotImplemented(
+                    onExplore = state.onExploreClick,
+                    exploreIconResId = R.drawable.ic_arrow_top_right_24,
+                ),
+            )
+        }
+    }
+}
+
+private fun LazyListScope.nonContentItem(state: EmptyTransactionsBlockState, modifier: Modifier = Modifier) {
+    item(key = state::class.java, contentType = state::class.java) {
+        EmptyTransactionBlockLegacy(
+            state = state,
+            modifier = modifier
+                .animateItem(fadeInSpec = null, fadeOutSpec = null)
+                .padding(horizontal = TangemTheme.dimens.spacing16, vertical = TangemTheme.dimens.spacing12)
+                .fillMaxWidth(),
+        )
+    }
+}
+
+private fun LazyListScope.loadingItems(state: TxHistoryUM.Loading) {
+    itemsIndexed(
+        items = state.items,
+        key = { _, item ->
+            when (item) {
+                is TxHistoryUM.TxHistoryItemUM.GroupTitle -> item.itemKey
+                is TxHistoryUM.TxHistoryItemUM.Title -> item.onExploreClick.hashCode()
+                is TxHistoryUM.TxHistoryItemUM.Transaction ->
+                    item.state.txHash + (item.state as? TransactionState.Content)?.hashCode()
+            }
+        },
+        contentType = { _, item -> item::class.java },
+        itemContent = { index, item ->
+            TxHistoryListItemLegacy(
+                state = item,
+                isBalanceHidden = true,
+                modifier = Modifier.roundedShapeItemDecoration(
+                    currentIndex = index,
+                    lastIndex = state.items.lastIndex,
+                ),
+            )
+        },
+    )
+}
+
+private fun LazyListScope.contentItems(listState: LazyListState, state: TxHistoryUM.Content) {
+    itemsIndexed(
+        items = state.items,
+        key = { _, item ->
+            when (item) {
+                is TxHistoryUM.TxHistoryItemUM.GroupTitle -> item.itemKey
+                is TxHistoryUM.TxHistoryItemUM.Title -> item.onExploreClick.hashCode()
+                is TxHistoryUM.TxHistoryItemUM.Transaction ->
+                    item.state.txHash + (item.state as? TransactionState.Content)?.hashCode()
+            }
+        },
+        contentType = { _, item -> item::class.java },
+        itemContent = { index, item ->
+            TxHistoryListItemLegacy(
+                state = item,
+                isBalanceHidden = state.isBalanceHidden,
+                modifier = Modifier.roundedShapeItemDecoration(
+                    currentIndex = index,
+                    lastIndex = state.items.lastIndex,
+                ),
+            )
+        },
+    )
+    item {
+        InfiniteListHandler(
+            listState = listState,
+            buffer = LOAD_ITEMS_BUFFER,
+            onLoadMore = state.loadMore,
+        )
+    }
+}
+
+@Composable
+internal fun TxHistoryListItemLegacy(
+    state: TxHistoryUM.TxHistoryItemUM,
+    isBalanceHidden: Boolean,
+    modifier: Modifier = Modifier,
+) {
+    when (state) {
+        is TxHistoryUM.TxHistoryItemUM.GroupTitle -> {
+            TxHistoryGroupTitle(config = state.legacyGroupTitle, modifier = modifier)
+        }
+        is TxHistoryUM.TxHistoryItemUM.Title -> {
+            TxHistoryTitle(onExploreClick = state.onExploreClick, modifier = modifier)
+        }
+        is TxHistoryUM.TxHistoryItemUM.Transaction -> {
+            Transaction(
+                state = state.state,
+                isBalanceHidden = isBalanceHidden,
+                modifier = modifier,
+            )
+        }
+    }
+}

features/txhistory/impl/src/main/kotlin/com/tangem/features/txhistory/component/DefaultTxHistoryComponent.kt

@@ -7,6 +7,7 @@ import com.tangem.core.decompose.model.getOrCreateModel
 import com.tangem.features.txhistory.entity.TxHistoryUM
 import com.tangem.features.txhistory.model.TxHistoryModel
 import com.tangem.features.txhistory.ui.txHistoryItems
+import com.tangem.features.txhistory.ui.txHistoryItemsLegacy
 import dagger.assisted.Assisted
 import dagger.assisted.AssistedFactory
 import dagger.assisted.AssistedInject
@@ -22,6 +23,10 @@ internal class DefaultTxHistoryComponent @AssistedInject constructor(
     override val txHistoryState: StateFlow<TxHistoryUM>
         get() = model.uiState
 
+    override fun LazyListScope.txHistoryContentLegacy(listState: LazyListState, state: TxHistoryUM) {
+        txHistoryItemsLegacy(listState, state)
+    }
+
     override fun LazyListScope.txHistoryContent(listState: LazyListState, state: TxHistoryUM) {
         txHistoryItems(listState, state)
     }