🔀 :: (#36) - publishing location loading state

feature/location/src/main/java/com/ohnalmwo/location/LocationScreen.kt

@@ -24,6 +24,7 @@ import com.ohnalmwo.design_system.component.bottomsheet.OptionBottomSheet
 import com.ohnalmwo.design_system.component.button.OndoseeBackButton
 import com.ohnalmwo.design_system.icons.HamburgerIcon
 import com.ohnalmwo.design_system.theme.OndoseeTheme.colors
+import com.ohnalmwo.location.component.LoadingLocationCard
 import com.ohnalmwo.location.component.LocationCard
 import com.ohnalmwo.location.component.LocationCountText
 import com.ohnalmwo.location.component.LocationText
@@ -75,29 +76,44 @@ fun LocationScreen(
         mutableStateOf(false)
     }
 
-    if (!state.isLoading) {
+    Column(
+        modifier = Modifier
+            .fillMaxSize()
+            .background(color = colors.BACKGROUND)
+            .statusBarsPadding()
+            .padding(top = 16.dp),
+        verticalArrangement = Arrangement.spacedBy(16.dp)
+    ) {
+        OndoseeBackButton(
+            content = {
+                HamburgerIcon(tint = colors.PRIMARY)
+            },
+            onContentClick = {
+                openBottomSheet = true
+            }
+        ) {
+            navigateToBack()
+        }
         Column(
-            modifier = Modifier
-                .fillMaxSize()
-                .background(color = colors.BACKGROUND)
-                .statusBarsPadding()
-                .padding(top = 16.dp),
+            modifier = Modifier.padding(start = 16.dp, end = 16.dp),
             verticalArrangement = Arrangement.spacedBy(16.dp)
         ) {
-            OndoseeBackButton(
-                content = {
-                    HamburgerIcon(tint = colors.PRIMARY)
-                },
-                onContentClick = {
-                    openBottomSheet = true
+            if (state.isLoading) {
+                Row(
+                    horizontalArrangement = Arrangement.spacedBy(4.dp),
+                    verticalAlignment = Alignment.Bottom
+                ) {
+                    LocationText(text = "위치")
+                    LocationCountText(size = 4)
                 }
-            ) {
-                navigateToBack()
-            }
-            Column(
-                modifier = Modifier.padding(start = 16.dp, end = 16.dp),
-                verticalArrangement = Arrangement.spacedBy(16.dp)
-            ) {
+                LazyColumn(
+                    verticalArrangement = Arrangement.spacedBy(16.dp)
+                ) {
+                    items(count = 4) { item ->
+                        LoadingLocationCard(isCurrentLocation = item == 0)
+                    }
+                }
+            } else {
                 Row(
                     horizontalArrangement = Arrangement.spacedBy(4.dp),
                     verticalAlignment = Alignment.Bottom
@@ -124,18 +140,18 @@ fun LocationScreen(
                     }
                 }
             }
+        }
 
-            if (openBottomSheet) {
-                OptionBottomSheet(
-                    closeSheet = { openBottomSheet = false },
-                    navigateToLocationManagement = {
-                        navigateToLocationManagement()
-                    },
-                    navigateToAddLocation = {
-                        navigateToAddLocation()
-                    }
-                )
-            }
+        if (openBottomSheet) {
+            OptionBottomSheet(
+                closeSheet = { openBottomSheet = false },
+                navigateToLocationManagement = {
+                    navigateToLocationManagement()
+                },
+                navigateToAddLocation = {
+                    navigateToAddLocation()
+                }
+            )
         }
     }
 }

feature/location/src/main/java/com/ohnalmwo/location/component/LoadingLocationCard.kt

@@ -0,0 +1,90 @@
+package com.ohnalmwo.location.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.unit.dp
+import com.ohnalmwo.design_system.component.shimmer.ShimmerBox
+import com.ohnalmwo.design_system.icons.CurrentLocationIcon
+import com.ohnalmwo.design_system.theme.OndoseeTheme.colors
+import com.ohnalmwo.design_system.theme.OndoseeTheme.typography
+import com.ohnalmwo.model.enum.Significant
+import com.ohnalmwo.ui.getBackgroundColors
+
+@Composable
+fun LoadingLocationCard(
+    modifier: Modifier = Modifier,
+    isCurrentLocation: Boolean
+) {
+    Column(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(144.dp)
+            .clip(RoundedCornerShape(8.dp))
+            .background(color = Significant.WORST_10.getBackgroundColors()[0])
+            .padding(16.dp),
+        verticalArrangement = Arrangement.SpaceBetween
+    ) {
+        Column(verticalArrangement = Arrangement.spacedBy(8.dp)) {
+            ShimmerBox(Modifier.size(136.dp, 22.dp))
+            ShimmerBox(Modifier.size(88.dp, 18.dp))
+        }
+        if (isCurrentLocation) {
+            Row(
+                horizontalArrangement = Arrangement.spacedBy(4.dp)
+            ) {
+                CurrentLocationIcon(
+                    modifier = Modifier.size(16.dp),
+                    tint = colors.WHITE
+                )
+                Text(
+                    text = "현재 위치",
+                    style = typography.textMedium,
+                    fontWeight = FontWeight.Medium,
+                    color = colors.WHITE
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun LoadingWeatherForecastCard(modifier: Modifier = Modifier) {
+    Column(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(160.dp)
+            .clip(RoundedCornerShape(16.dp))
+            .background(color = colors.WHITE.copy(alpha = .2f))
+            .padding(16.dp),
+        verticalArrangement = Arrangement.spacedBy(4.dp)
+    ) {
+        Text(
+            text = "시간 별 일기예보",
+            style = typography.textSmall,
+            fontWeight = FontWeight.Bold,
+            color = colors.WHITE.copy(.75f)
+        )
+        ShimmerBox(
+            Modifier
+                .fillMaxWidth(.8f)
+                .height(16.dp)
+        )
+        ShimmerBox(
+            Modifier
+                .fillMaxWidth(.5f)
+                .height(16.dp)
+        )
+    }
+}