💄 The preview interface supports displaying skeleton preloading (#389)

CrossPaste · Feb 26, 2024 · 59d74db · 59d74db
1 parent 9e5cb6f
commit 59d74db
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 2 deletions.
diff --git a/composeApp/build.gradle.kts b/composeApp/build.gradle.kts
@@ -22,6 +22,7 @@ kotlin {
 
         desktopMain.dependencies {
             implementation(compose.desktop.currentOs)
+            implementation(libs.compose.shimmer)
             implementation(libs.guava)
             implementation(libs.jmdns)
             implementation(libs.jna)

diff --git a/composeApp/src/commonMain/kotlin/com/clipevery/dao/clip/ClipDao.kt b/composeApp/src/commonMain/kotlin/com/clipevery/dao/clip/ClipDao.kt
@@ -17,6 +17,8 @@ interface ClipDao {
     fun getClipData(appInstanceId: String? = null,
                     limit: Int): RealmResults<ClipData>
 
+    fun getClipData(objectId: ObjectId): ClipData?
+
     fun releaseClipData(id: ObjectId, clipPlugins: List<ClipPlugin>)
 
     fun updateClipItem(update: (MutableRealm) -> Unit)

diff --git a/composeApp/src/commonMain/kotlin/com/clipevery/ui/clip/ClipPreviewItemView.kt b/composeApp/src/commonMain/kotlin/com/clipevery/ui/clip/ClipPreviewItemView.kt
@@ -133,6 +133,14 @@ fun ClipPreviewItemView(clipData: ClipData, isLast: Boolean, clipContent: @Compo
                 )
             }
         }
+    } ?: run {
+        PrePreviewView(clipData)
+        if (!isLast) {
+            Divider(
+                color = MaterialTheme.colors.onBackground,
+                thickness = 2.dp
+            )
+        }
     }
 }
 
@@ -148,7 +156,7 @@ fun getDateText(createTime: RealmInstant, copywriter: Copywriter): String {
 @Composable
 fun ClipSpecificPreviewItemView(clipData: ClipData) {
     if (clipData.preCreate) {
-        // todo preCreate
+        PrePreviewView(clipData)
     } else {
         when(clipData.clipType) {
             ClipType.TEXT -> TextPreviewView(clipData)

diff --git a/composeApp/src/commonMain/kotlin/com/clipevery/ui/clip/ClipPreviewsView.kt b/composeApp/src/commonMain/kotlin/com/clipevery/ui/clip/ClipPreviewsView.kt
@@ -33,6 +33,7 @@ import androidx.compose.ui.unit.dp
 import com.clipevery.LocalKoinApplication
 import com.clipevery.dao.clip.ClipDao
 import com.clipevery.dao.clip.ClipData
+import com.clipevery.dao.clip.ClipType
 import io.realm.kotlin.notifications.ResultsChange
 import io.realm.kotlin.notifications.UpdatedResults
 import io.realm.kotlin.query.RealmResults
@@ -60,7 +61,7 @@ fun ClipPreviewsView() {
     } }
 
     LaunchedEffect(Unit) {
-        val clipDatasFlow = clipDao.getClipData(limit = 20).asFlow()
+        val clipDatasFlow = clipDataList.asFlow()
         clipDatasFlow.collect { changes: ResultsChange<ClipData> ->
             when (changes) {
                 is UpdatedResults -> {
@@ -79,6 +80,17 @@ fun ClipPreviewsView() {
                         val newClipDataList = clipDao.getClipData(limit = 20)
                         rememberClipDataList.addAll(newClipDataList.sortedWith(clipDataComparator))
                     }
+
+                    changes.changes
+                    changes.changeRanges
+
+                    rememberClipDataList.forEachIndexed { index, currentElement ->
+                        if (currentElement.clipType == ClipType.INVALID) {
+                            clipDao.getClipData(currentElement.id)?.let {
+                                rememberClipDataList[index] = it
+                            }
+                        }
+                    }
                 }
                 else -> {
                     // types other than UpdatedResults are not changes -- ignore them

diff --git a/composeApp/src/commonMain/kotlin/com/clipevery/ui/clip/PrePreviewView.kt b/composeApp/src/commonMain/kotlin/com/clipevery/ui/clip/PrePreviewView.kt
@@ -0,0 +1,64 @@
+package com.clipevery.ui.clip
+
+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.Row
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.material.MaterialTheme
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import com.clipevery.dao.clip.ClipData
+import com.valentinilk.shimmer.shimmer
+
+@Composable
+fun PrePreviewView(clipData: ClipData) {
+    Row(
+        modifier = Modifier
+            .width(400.dp)
+            .height(150.dp)
+            .background(MaterialTheme.colors.background)
+            .shimmer(),
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        Box(
+            modifier = Modifier
+                .size(131.dp)
+                .padding(10.dp)
+                .background(Color.Gray)
+        )
+
+        Column(modifier = Modifier.height(150.dp).width(230.dp).padding(10.dp),
+            verticalArrangement = Arrangement.Center
+        ) {
+            Box(
+                modifier = Modifier
+                    .height(37.dp)
+                    .width(230.dp)
+                    .padding(bottom = 5.dp)
+                    .background(Color.Gray)
+            )
+            Box(
+                modifier = Modifier
+                    .height(37.dp)
+                    .width(180.dp)
+                    .padding(vertical = 5.dp)
+                    .background(Color.Gray)
+            )
+            Box(
+                modifier = Modifier
+                    .height(37.dp)
+                    .width(230.dp)
+                    .padding(top = 5.dp)
+                    .background(Color.Gray)
+            )
+        }
+    }
+}
diff --git a/composeApp/src/desktopMain/kotlin/com/clipevery/dao/clip/ClipRealm.kt b/composeApp/src/desktopMain/kotlin/com/clipevery/dao/clip/ClipRealm.kt
@@ -68,6 +68,10 @@ class ClipRealm(private val realm: Realm) : ClipDao {
         return query.sort("createTime", Sort.DESCENDING).limit(limit).find()
     }
 
+    override fun getClipData(objectId: ObjectId): ClipData? {
+        return realm.query(ClipData::class).query("id == $0", objectId).first().find()
+    }
+
     override fun releaseClipData(id: ObjectId, clipPlugins: List<ClipPlugin>) {
         var md5: String? = null
         realm.writeBlocking {

diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
@@ -2,6 +2,7 @@
 compose = "1.6.2"
 compose-plugin = "1.6.0-rc03"
 compose-compiler = "1.5.8"
+compose-shimmer = "1.2.0"
 compose-webview-multiplatform = "1.8.8"
 guava = "33.0.0-jre"
 jmdns = "3.5.9"
@@ -28,6 +29,7 @@ compose-ui-tooling = { module = "androidx.compose.ui:ui-tooling", version.ref =
 compose-ui-tooling-preview = { module = "androidx.compose.ui:ui-tooling-preview", version.ref = "compose" }
 compose-foundation = { module = "androidx.compose.foundation:foundation", version.ref = "compose" }
 compose-material = { module = "androidx.compose.material:material", version.ref = "compose" }
+compose-shimmer = { module = "com.valentinilk.shimmer:compose-shimmer", version.ref = "compose-shimmer" }
 compose-webview-multiplatform = { module = "io.github.kevinnzou:compose-webview-multiplatform", version.ref = "compose-webview-multiplatform" }
 guava = { module = "com.google.guava:guava", version.ref = "guava" }
 jmdns = { module = "org.jmdns:jmdns", version.ref = "jmdns" }