Stop jumping

Author: samiuelson

WooCommerce/src/main/kotlin/com/woocommerce/android/ui/woopos/orders/WooPosOrdersLoadingScreen.kt

@@ -2,6 +2,7 @@ package com.woocommerce.android.ui.woopos.orders
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
@@ -112,7 +113,7 @@ fun WooPosOrdersOrderLoadingRow() {
 @Composable
 fun WooPosOrdersListLoadingPane(modifier: Modifier = Modifier) {
     Column(modifier = modifier.statusBarsPadding()) {
-        Spacer(modifier = Modifier.height(WOO_POS_ORDERS_TOOLBAR_HEIGHT))
+        Spacer(modifier = Modifier.height(WOO_POS_ORDERS_TOOLBAR_HEIGHT + WooPosSpacing.Small.value))
 
         LazyColumn(
             modifier = Modifier.fillMaxSize(),
@@ -140,22 +141,22 @@ private fun OrderDetailsLoadingPane(modifier: Modifier = Modifier) {
             horizontalArrangement = Arrangement.SpaceBetween
         ) {
             Column {
-                Spacer(modifier = Modifier.height(WooPosSpacing.Small.value))
-
-                WooPosShimmerText(
-                    text = "Order #123",
-                    style = WooPosTypography.Heading.style,
-                    fontWeight = FontWeight.Bold
-                )
+                Box(Modifier.height(WOO_POS_ORDERS_TOOLBAR_HEIGHT), contentAlignment = Alignment.Center) {
+                    WooPosShimmerText(
+                        text = "Order #123",
+                        style = WooPosTypography.Heading.style,
+                        fontWeight = FontWeight.Bold
+                    )
+                }
 
-                Spacer(modifier = Modifier.height(WooPosSpacing.Medium.value))
+                Spacer(modifier = Modifier.height(WooPosSpacing.Small.value))
 
                 WooPosShimmerText(
                     text = "Jul 28, 2025 at 10:31 PM",
                     style = WooPosTypography.BodyMedium.style
                 )
 
-                Spacer(modifier = Modifier.height(WooPosSpacing.Small.value))
+                Spacer(modifier = Modifier.height(WooPosSpacing.Medium.value))
 
                 WooPosShimmerText(
                     text = "Completed",
@@ -165,6 +166,7 @@ private fun OrderDetailsLoadingPane(modifier: Modifier = Modifier) {
 
             WooPosShimmerBox(
                 modifier = Modifier
+                    .padding(vertical = WooPosSpacing.Small.value)
                     .width(140.dp)
                     .height(36.dp)
                     .clip(RoundedCornerShape(WooPosCornerRadius.Small.value))
@@ -185,7 +187,7 @@ private fun OrderDetailsLoadingPane(modifier: Modifier = Modifier) {
                         text = stringResource(R.string.woopos_orders_details_products_title),
                         style = WooPosTypography.BodyXLarge,
                         color = MaterialTheme.colorScheme.onSurface,
-                        fontWeight = FontWeight.Bold
+                        fontWeight = FontWeight.SemiBold
                     )
 
                     Spacer(modifier = Modifier.height(WooPosSpacing.Medium.value))
@@ -215,7 +217,7 @@ private fun OrderDetailsLoadingPane(modifier: Modifier = Modifier) {
                         text = stringResource(R.string.woopos_orders_details_totals_title),
                         style = WooPosTypography.BodyXLarge,
                         color = MaterialTheme.colorScheme.onSurface,
-                        fontWeight = FontWeight.Bold
+                        fontWeight = FontWeight.SemiBold
                     )
 
                     Spacer(modifier = Modifier.height(WooPosSpacing.Medium.value))