Merge pull request #49 from team-haribo/feature/48-creating-skeleton-…

…loading 🔀 :: (#48) - creating skeleton loading
team-haribo · Feb 15, 2024 · a0aecbe · a0aecbe
2 parents 4766bbb + 0c21985
commit a0aecbe
Show file tree

Hide file tree

Showing 21 changed files with 685 additions and 346 deletions.
diff --git a/.idea/gradle.xml b/.idea/gradle.xml
diff --git a/...gn-system/src/main/java/com/goms/design_system/component/bottomsheet/BottomSheetHeader.kt b/...gn-system/src/main/java/com/goms/design_system/component/bottomsheet/BottomSheetHeader.kt
@@ -11,7 +11,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
-import com.goms.design_system.component.modifier.gomsClickable
+import com.goms.design_system.component.clickable.gomsClickable
 import com.goms.design_system.icon.CloseIcon
 import com.goms.design_system.theme.GomsTheme
 

diff --git a/core/design-system/src/main/java/com/goms/design_system/component/button/GomsBackButton.kt b/core/design-system/src/main/java/com/goms/design_system/component/button/GomsBackButton.kt
@@ -11,7 +11,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
-import com.goms.design_system.component.modifier.gomsClickable
+import com.goms.design_system.component.clickable.gomsClickable
 import com.goms.design_system.icon.BackIcon
 import com.goms.design_system.theme.GomsTheme
 

diff --git a/core/design-system/src/main/java/com/goms/design_system/component/button/GomsButton.kt b/core/design-system/src/main/java/com/goms/design_system/component/button/GomsButton.kt
@@ -19,7 +19,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import com.goms.design_system.component.modifier.gomsClickable
+import com.goms.design_system.component.clickable.gomsClickable
 import com.goms.design_system.icon.GAuthIcon
 import com.goms.design_system.theme.GomsTheme
 

diff --git a/...omponent/modifier/MultipleEventsCutter.kt → ...mponent/clickable/MultipleEventsCutter.kt b/...omponent/modifier/MultipleEventsCutter.kt → ...mponent/clickable/MultipleEventsCutter.kt
@@ -1,4 +1,4 @@
-package com.goms.design_system.component.modifier
+package com.goms.design_system.component.clickable
 
 internal interface MultipleEventsCutter {
     fun processEvent(event: () -> Unit)

diff --git a/...ystem/component/modifier/gomsClickable.kt → ...stem/component/clickable/gomsClickable.kt b/...ystem/component/modifier/gomsClickable.kt → ...stem/component/clickable/gomsClickable.kt
@@ -1,4 +1,4 @@
-package com.goms.design_system.component.modifier
+package com.goms.design_system.component.clickable
 
 import androidx.compose.foundation.LocalIndication
 import androidx.compose.foundation.clickable

diff --git a/core/design-system/src/main/java/com/goms/design_system/component/shimmer/ShimmerBrush.kt b/core/design-system/src/main/java/com/goms/design_system/component/shimmer/ShimmerBrush.kt
@@ -0,0 +1,44 @@
+package com.goms.design_system.component.shimmer
+
+import androidx.compose.animation.core.FastOutSlowInEasing
+import androidx.compose.animation.core.RepeatMode
+import androidx.compose.animation.core.animateFloat
+import androidx.compose.animation.core.infiniteRepeatable
+import androidx.compose.animation.core.rememberInfiniteTransition
+import androidx.compose.animation.core.tween
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+
+@Composable
+fun ShimmerBrush(
+    color: Color = Color.LightGray,
+    targetValue: Float = 1300f
+): Brush {
+    val shimmerColors = listOf(
+        color.copy(alpha = 0.15f),
+        color.copy(alpha = 0.13f),
+        color.copy(alpha = 0.1f),
+        color.copy(alpha = 0.13f),
+        color.copy(alpha = 0.15f),
+    )
+
+    val transition = rememberInfiniteTransition()
+    val translateAnimation = transition.animateFloat(
+        initialValue = 0f,
+        targetValue = targetValue,
+        animationSpec = infiniteRepeatable(
+            animation = tween(
+                durationMillis = 1000,
+                easing = FastOutSlowInEasing
+            ), repeatMode = RepeatMode.Restart
+        )
+    )
+
+    return Brush.linearGradient(
+        colors = shimmerColors,
+        start = Offset.Zero,
+        end = Offset(x = translateAnimation.value, y = translateAnimation.value)
+    )
+}
diff --git a/core/design-system/src/main/java/com/goms/design_system/component/shimmer/shimmerEffect.kt b/core/design-system/src/main/java/com/goms/design_system/component/shimmer/shimmerEffect.kt
@@ -0,0 +1,20 @@
+package com.goms.design_system.component.shimmer
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.composed
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.Shape
+
+fun Modifier.shimmerEffect(
+    color: Color = Color.LightGray,
+    targetValue: Float = 1300f,
+    shape: Shape = CircleShape
+) = composed {
+    val brush = ShimmerBrush(
+        color = color,
+        targetValue = targetValue
+    )
+    this.then(background(brush, shape))
+}
diff --git a/core/design-system/src/main/java/com/goms/design_system/component/text/LinkText.kt b/core/design-system/src/main/java/com/goms/design_system/component/text/LinkText.kt
@@ -13,7 +13,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
-import com.goms.design_system.component.modifier.gomsClickable
+import com.goms.design_system.component.clickable.gomsClickable
 import com.goms.design_system.theme.GomsTheme
 
 @Composable

diff --git a/core/design-system/src/main/java/com/goms/design_system/component/textfield/GomsTextField.kt b/core/design-system/src/main/java/com/goms/design_system/component/textfield/GomsTextField.kt
@@ -6,7 +6,6 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
@@ -39,7 +38,7 @@ import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import com.goms.design_system.component.modifier.gomsClickable
+import com.goms.design_system.component.clickable.gomsClickable
 import com.goms.design_system.component.timer.CountdownTimer
 import com.goms.design_system.icon.SearchIcon
 import com.goms.design_system.theme.GomsTheme

diff --git a/core/design-system/src/main/java/com/goms/design_system/component/timer/CountdownTimer.kt b/core/design-system/src/main/java/com/goms/design_system/component/timer/CountdownTimer.kt
@@ -15,7 +15,7 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
-import com.goms.design_system.component.modifier.gomsClickable
+import com.goms.design_system.component.clickable.gomsClickable
 import com.goms.design_system.theme.GomsTheme
 import kotlinx.coroutines.delay
 import java.util.concurrent.TimeUnit

diff --git a/core/ui/src/main/java/com/goms/ui/GomsTopBar.kt b/core/ui/src/main/java/com/goms/ui/GomsTopBar.kt
@@ -24,7 +24,7 @@ import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import com.goms.design_system.component.modifier.gomsClickable
+import com.goms.design_system.component.clickable.gomsClickable
 import com.goms.design_system.icon.GomsTextIcon
 import com.goms.design_system.icon.PersonIcon
 import com.goms.design_system.icon.SettingIcon

diff --git a/feature/main/src/main/java/com/goms/main/component/FilterText.kt b/feature/main/src/main/java/com/goms/main/component/FilterText.kt
@@ -8,7 +8,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
-import com.goms.design_system.component.modifier.gomsClickable
+import com.goms.design_system.component.clickable.gomsClickable
 import com.goms.design_system.theme.GomsTheme
 
 @Composable

diff --git a/feature/main/src/main/java/com/goms/main/component/LateList.kt b/feature/main/src/main/java/com/goms/main/component/LateList.kt
@@ -2,12 +2,16 @@ package com.goms.main.component
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.material3.Divider
 import androidx.compose.material3.Text
@@ -20,6 +24,7 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import coil.compose.AsyncImage
 import com.goms.design_system.R
+import com.goms.design_system.component.shimmer.shimmerEffect
 import com.goms.design_system.theme.GomsTheme
 import com.goms.main.viewmodel.GetLateListUiState
 import com.goms.model.response.council.LateResponse
@@ -42,7 +47,21 @@ fun LateList(
                 FilterText(onFilterTextClick = onBottomSheetOpenClick)
             }
             when (getLateListUiState) {
-                GetLateListUiState.Loading -> Unit
+                GetLateListUiState.Loading -> {
+                    LazyColumn(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .heightIn(max = 10000.dp)
+                    ) {
+                        items(10) {
+                            ShimmerLateListItem(modifier = modifier)
+                            Divider(
+                                modifier = Modifier.fillMaxWidth(),
+                                color = colors.WHITE.copy(0.15f)
+                            )
+                        }
+                    }
+                }
                 is GetLateListUiState.Error -> Unit
                 GetLateListUiState.Empty -> {
                     Column(
@@ -119,4 +138,35 @@ fun LateListItem(
             }
         }
     }
+}
+
+@Composable
+fun ShimmerLateListItem(modifier: Modifier) {
+    GomsTheme { colors, typography ->
+        Row(
+            modifier = modifier
+                .fillMaxWidth()
+                .padding(horizontal = 16.dp, vertical = 12.dp),
+            verticalAlignment = Alignment.CenterVertically
+        ) {
+            Box(
+                modifier = Modifier
+                    .size(48.dp)
+                    .shimmerEffect(color = colors.WHITE)
+            )
+            Spacer(modifier = Modifier.width(16.dp))
+            Column(verticalArrangement = Arrangement.spacedBy(4.dp)) {
+                Box(
+                    modifier = Modifier
+                        .size(42.dp, 18.dp)
+                        .shimmerEffect(color = colors.WHITE)
+                )
+                Box(
+                    modifier = Modifier
+                        .size(50.dp, 14.dp)
+                        .shimmerEffect(color = colors.WHITE)
+                )
+            }
+        }
+    }
 }