Placeholder Highlight (#1038)

* Import androidx accompanist placeholder code * Enable data retrieval * Simplify module structure with ktlint fixes --------- Co-authored-by: Ashley Davies <[email protected]>
ashdavies · Jun 24, 2024 · 44f63b5 · 44f63b5
1 parent 6fb091c
commit 44f63b5
Show file tree

Hide file tree

Showing 13 changed files with 493 additions and 39 deletions.
diff --git a/after-party/build.gradle.kts b/after-party/build.gradle.kts
@@ -19,6 +19,7 @@ kotlin {
             implementation(projects.httpCommon)
             implementation(projects.identityManager)
             implementation(projects.pagingCompose)
+            implementation(projects.placeholderHighlight)
             implementation(projects.platformScaffold)
             implementation(projects.platformSupport)
             implementation(projects.sqlCommon)
@@ -54,7 +55,6 @@ kotlin {
         androidMain.dependencies {
             implementation(libs.androidx.activity.compose)
             implementation(libs.google.accompanist.flowlayout)
-            implementation(libs.google.accompanist.placeholderMaterial)
         }
 
         val androidDebug by registering {

diff --git a/after-party/src/androidMain/kotlin/io/ashdavies/android/Modifier.kt b/after-party/src/androidMain/kotlin/io/ashdavies/android/Modifier.kt
diff --git a/after-party/src/commonMain/kotlin/io/ashdavies/activity/ActivityScreen.kt b/after-party/src/commonMain/kotlin/io/ashdavies/activity/ActivityScreen.kt
@@ -1,5 +1,10 @@
 package io.ashdavies.activity
 
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.AnimatedVisibilityScope
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -36,19 +41,28 @@ import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.slack.circuit.runtime.CircuitUiState
 import com.slack.circuit.runtime.screen.Screen
-import io.ashdavies.android.fade
 import io.ashdavies.events.Event
 import io.ashdavies.paging.LazyPagingItems
 import io.ashdavies.parcelable.Parcelable
 import io.ashdavies.parcelable.Parcelize
+import io.ashdavies.placeholder.PlaceholderHighlight
+import io.ashdavies.placeholder.fade
+import io.ashdavies.placeholder.placeholder
+
+private const val EMPTY_STRING = "No Data Available"
+private const val PLACEHOLDER_COUNT = 8
 
 @Parcelize
 internal object ActivityScreen : Parcelable, Screen {
     data class State(val pagingItems: LazyPagingItems<Event>) : CircuitUiState
 }
 
 @Composable
-@OptIn(ExperimentalMaterialApi::class, ExperimentalMaterial3Api::class)
+@OptIn(
+    ExperimentalFoundationApi::class,
+    ExperimentalMaterialApi::class,
+    ExperimentalMaterial3Api::class,
+)
 internal fun ActivityScreen(state: ActivityScreen.State, modifier: Modifier = Modifier) {
     val scrollBehavior = TopAppBarDefaults.pinnedScrollBehavior()
 
@@ -76,18 +90,52 @@ internal fun ActivityScreen(state: ActivityScreen.State, modifier: Modifier = Mo
                 state = pullRefreshState,
             )
 
-            LazyColumn(Modifier.fillMaxSize()) {
-                items(state.pagingItems.itemCount) {
-                    EventSection(state.pagingItems[it])
+            FadeVisibility(state.pagingItems.itemCount > 0) {
+                LazyColumn(Modifier.fillMaxSize()) {
+                    items(state.pagingItems.itemCount) {
+                        EventSection(
+                            event = state.pagingItems[it],
+                            modifier = Modifier.animateItemPlacement(),
+                        )
+                    }
+                }
+            }
+
+            FadeVisibility(state.pagingItems.loadState.isRefreshing) {
+                LazyColumn(Modifier.fillMaxSize()) {
+                    items(PLACEHOLDER_COUNT) {
+                        EventSection(
+                            event = null,
+                            modifier = Modifier.animateItemPlacement(),
+                        )
+                    }
                 }
             }
         }
     }
 }
 
+@Composable
+private fun FadeVisibility(
+    visible: Boolean,
+    modifier: Modifier = Modifier,
+    content: @Composable AnimatedVisibilityScope.() -> Unit,
+) {
+    AnimatedVisibility(
+        visible = visible,
+        modifier = modifier,
+        enter = fadeIn(),
+        exit = fadeOut(),
+        content = content,
+    )
+}
+
 @Composable
 @ExperimentalMaterial3Api
-private fun ActivityTopAppBar(text: String = "Events", modifier: Modifier = Modifier) {
+private fun ActivityTopAppBar(
+    text: String = "Events",
+    modifier: Modifier = Modifier,
+) {
     TopAppBar(
         title = {
             Row {
@@ -105,8 +153,11 @@ private fun ActivityTopAppBar(text: String = "Events", modifier: Modifier = Modi
 }
 
 @Composable
-private fun EventSection(event: Event?) {
-    Box(Modifier.padding(horizontal = 16.dp, vertical = 8.dp)) {
+private fun EventSection(
+    event: Event?,
+    modifier: Modifier = Modifier,
+) {
+    Box(modifier.padding(horizontal = 16.dp, vertical = 8.dp)) {
         Button(
             onClick = { },
             modifier = Modifier.fillMaxWidth(),
@@ -159,13 +210,13 @@ internal fun PlaceholderText(
 ) {
     Text(
         overflow = TextOverflow.Ellipsis,
-        text = text ?: String(),
+        text = text ?: EMPTY_STRING,
         style = style,
         maxLines = 1,
         modifier = modifier
             .padding(vertical = verticalPadding)
             .defaultMinSize(minWidth = Dp(style.fontSize.value * characters))
-            .fade(text == null),
+            .placeholder(text == null, highlight = PlaceholderHighlight.fade()),
     )
 }
 

diff --git a/after-party/src/commonMain/kotlin/io/ashdavies/android/Modifier.kt b/after-party/src/commonMain/kotlin/io/ashdavies/android/Modifier.kt
diff --git a/after-party/src/commonMain/kotlin/io/ashdavies/profile/ProfileScreen.kt b/after-party/src/commonMain/kotlin/io/ashdavies/profile/ProfileScreen.kt
@@ -27,8 +27,10 @@ import com.slack.circuit.runtime.CircuitUiEvent
 import com.slack.circuit.runtime.CircuitUiState
 import com.slack.circuit.runtime.screen.Screen
 import io.ashdavies.android.FlowRow
-import io.ashdavies.android.fade
 import io.ashdavies.parcelable.Parcelize
+import io.ashdavies.placeholder.PlaceholderHighlight
+import io.ashdavies.placeholder.fade
+import io.ashdavies.placeholder.placeholder
 import kotlin.random.Random.Default.nextInt
 
 @Parcelize
@@ -121,7 +123,7 @@ private fun StubLanyardFlow(until: Int = 30) {
                     .border(1.dp, Color.LightGray, CircleShape)
                     .size(64.dp, 64.dp)
                     .clip(CircleShape)
-                    .fade(true)
+                    .placeholder(true, highlight = PlaceholderHighlight.fade())
                     .padding(4.dp),
             )
         }

diff --git a/after-party/src/jvmMain/kotlin/io/ashdavies/android/Modifier.kt b/after-party/src/jvmMain/kotlin/io/ashdavies/android/Modifier.kt
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
@@ -47,7 +47,6 @@ gitlive-firebase-app = { module = "dev.gitlive:firebase-app", version.ref = "git
 
 google-accompanist-flowlayout = { module = "com.google.accompanist:accompanist-flowlayout", version.ref = "google-accompanist" }
 google-accompanist-permissions = { module = "com.google.accompanist:accompanist-permissions", version.ref = "google-accompanist" }
-google-accompanist-placeholderMaterial = { module = "com.google.accompanist:accompanist-placeholder-material", version.ref = "google-accompanist" }
 
 google-android-identity = "com.google.android.libraries.identity.googleid:googleid:1.1.0"
 google-android-location = "com.google.android.gms:play-services-location:21.3.0"

diff --git a/http-common/build.gradle.kts b/http-common/build.gradle.kts
@@ -30,7 +30,3 @@ openApiGenerate {
     configOptions.put("library", "multiplatform")
     configOptions.put("sourceFolder", ".")
 }
-
-detekt {
-    allRules = false
-}
diff --git a/placeholder-highlight/build.gradle.kts b/placeholder-highlight/build.gradle.kts
@@ -0,0 +1,19 @@
+plugins {
+    id("com.android.library")
+    id("io.ashdavies.android")
+    id("io.ashdavies.compose")
+    kotlin("multiplatform")
+}
+
+android {
+    namespace = "io.ashdavies.placeholder"
+}
+
+kotlin {
+    sourceSets.commonMain.dependencies {
+        implementation(compose.material3)
+        implementation(compose.runtime)
+
+        implementation(libs.androidx.annotation)
+    }
+}