From 43db35e9a2b4b0120631deebe8941b988b526e7a Mon Sep 17 00:00:00 2001 From: Hammed Abass Date: Wed, 15 Jul 2026 18:34:26 +0200 Subject: [PATCH] feat(ui): add animated empty states --- gradle/libs.versions.toml | 2 ++ shared/build.gradle.kts | 1 + .../files/animations/receive_empty_state.json | 1 + .../files/animations/send_empty_state.json | 1 + .../app/feature/receive/ReceiveScreen.kt | 10 +++--- .../vnidrop/app/feature/send/SendCatalog.kt | 13 ++++--- .../app/ui/components/EmptyStateAnimation.kt | 34 +++++++++++++++++++ 7 files changed, 51 insertions(+), 11 deletions(-) create mode 100644 shared/src/commonMain/composeResources/files/animations/receive_empty_state.json create mode 100644 shared/src/commonMain/composeResources/files/animations/send_empty_state.json create mode 100644 shared/src/commonMain/kotlin/com/vnidrop/app/ui/components/EmptyStateAnimation.kt diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml index 55363fc..2fc1758 100644 --- a/gradle/libs.versions.toml +++ b/gradle/libs.versions.toml @@ -11,6 +11,7 @@ androidx-lifecycle = "2.11.0-beta01" androidx-datastore = "1.2.1" androidx-testExt = "1.3.0" composeMultiplatform = "1.11.1" +compottie = "2.2.4" gobley = "0.3.7" junit = "4.13.2" kotlin = "2.4.0" @@ -41,6 +42,7 @@ compose-ui = { module = "org.jetbrains.compose.ui:ui", version.ref = "composeMul compose-uiTest = { module = "org.jetbrains.compose.ui:ui-test", version.ref = "composeMultiplatform" } compose-components-resources = { module = "org.jetbrains.compose.components:components-resources", version.ref = "composeMultiplatform" } compose-uiToolingPreview = { module = "org.jetbrains.compose.ui:ui-tooling-preview", version.ref = "composeMultiplatform" } +compottie-lite = { module = "io.github.alexzhirkevich:compottie-lite", version.ref = "compottie" } kotlinx-coroutinesCore = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-core", version.ref = "kotlinx-coroutines" } kotlinx-coroutinesTest = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-test", version.ref = "kotlinx-coroutines" } kotlinx-coroutinesSwing = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-swing", version.ref = "kotlinx-coroutines" } diff --git a/shared/build.gradle.kts b/shared/build.gradle.kts index 05ee35a..7b799cd 100644 --- a/shared/build.gradle.kts +++ b/shared/build.gradle.kts @@ -137,6 +137,7 @@ kotlin { implementation(libs.compose.ui) implementation(libs.compose.components.resources) implementation(libs.compose.uiToolingPreview) + implementation(libs.compottie.lite) implementation(libs.androidx.lifecycle.viewmodelCompose) implementation(libs.androidx.lifecycle.runtimeCompose) implementation(libs.androidx.datastore) diff --git a/shared/src/commonMain/composeResources/files/animations/receive_empty_state.json b/shared/src/commonMain/composeResources/files/animations/receive_empty_state.json new file mode 100644 index 0000000..68de6ec --- /dev/null +++ b/shared/src/commonMain/composeResources/files/animations/receive_empty_state.json @@ -0,0 +1 @@ +{"nm":"VniDrop — Receive Empty","ddd":0,"h":256,"w":256,"meta":{"g":"@lottiefiles/creator@1.99.2"},"layers":[{"ty":4,"nm":"receive_arrival_spark","sr":1,"st":0,"op":84,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[30,30],"t":0},{"o":{"x":0.34,"y":1.45},"i":{"x":0.64,"y":1},"s":[30,30],"t":48},{"o":{"x":0.22,"y":1},"i":{"x":0.36,"y":1},"s":[105,105],"t":58},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[135,135],"t":70},{"s":[30,30],"t":84}]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[128,130]},"r":{"a":1,"k":[{"o":{"x":0.22,"y":1},"i":{"x":0.36,"y":1},"s":[35],"t":48},{"s":[0],"t":70}]},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":0},{"o":{"x":0.22,"y":1},"i":{"x":0.36,"y":1},"s":[0],"t":48},{"o":{"x":0.42,"y":0},"i":{"x":0.58,"y":1},"s":[100],"t":57},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":70},{"s":[0],"t":84}]}},"shapes":[{"ty":"sr","bm":0,"hd":false,"nm":"Star Shape 1","d":1,"ir":{"a":0,"k":3.5},"is":{"a":0,"k":100},"pt":{"a":0,"k":4},"p":{"a":0,"k":[0,0]},"or":{"a":0,"k":9},"os":{"a":0,"k":100},"r":{"a":0,"k":45},"sy":1},{"ty":"el","bm":0,"hd":false,"nm":"Ellipse Shape 2","d":1,"p":{"a":0,"k":[18,10]},"s":{"a":0,"k":[7,7]}},{"ty":"el","bm":0,"hd":false,"nm":"Ellipse Shape 3","d":1,"p":{"a":0,"k":[-7,19]},"s":{"a":0,"k":[5,5]}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[0.6588,0.3333,0.9686]},"r":1,"o":{"a":0,"k":100}}],"ind":1},{"ty":4,"nm":"receive_portal_lip","sr":1,"st":0,"op":84,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100,100],"t":0},{"o":{"x":0.22,"y":1},"i":{"x":0.36,"y":1},"s":[100,100],"t":46},{"o":{"x":0.34,"y":1.45},"i":{"x":0.64,"y":1},"s":[112,78],"t":54},{"o":{"x":0.42,"y":0},"i":{"x":0.58,"y":1},"s":[94,118],"t":60},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100,100],"t":68},{"s":[100,100],"t":84}]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[128,166]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"rc","bm":0,"hd":false,"nm":"Rect Shape 1","d":1,"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":8},"s":{"a":0,"k":[106,15]}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[0.5765,0.2,0.9176]},"r":1,"o":{"a":0,"k":100}}],"ind":2},{"ty":4,"nm":"receive_file_front","sr":1,"st":0,"op":84,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[200,52]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":0},{"o":{"x":0.42,"y":0},"i":{"x":0.58,"y":1},"s":[0],"t":8},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":16},{"o":{"x":0.42,"y":0},"i":{"x":0.58,"y":1},"s":[100],"t":74},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":80},{"s":[0],"t":84}]}},"shapes":[{"ty":"rc","bm":0,"hd":false,"nm":"Rect Shape 1","d":1,"p":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,0],"t":0},{"o":{"x":0.22,"y":1},"i":{"x":0.36,"y":1},"s":[0,0],"t":8},{"o":{"x":0.42,"y":0},"i":{"x":0.58,"y":1},"s":[-6,6],"t":16},{"o":{"x":0.42,"y":0},"i":{"x":0.58,"y":1},"s":[-22,26],"t":30},{"o":{"x":0.34,"y":1.45},"i":{"x":0.64,"y":1},"s":[-58,64],"t":46},{"o":{"x":0.34,"y":1.45},"i":{"x":0.64,"y":1},"s":[-72,94],"t":54},{"o":{"x":0.42,"y":0},"i":{"x":0.58,"y":1},"s":[-72,84],"t":60},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-72,88],"t":68},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[-72,88],"t":80},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,0],"t":81},{"s":[0,0],"t":84}]},"r":{"a":0,"k":10},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[51.5,64.4],"t":0},{"o":{"x":0.22,"y":1},"i":{"x":0.36,"y":1},"s":[51.5,64.4],"t":8},{"o":{"x":0.42,"y":0},"i":{"x":0.58,"y":1},"s":[56,70],"t":16},{"o":{"x":0.34,"y":1.45},"i":{"x":0.64,"y":1},"s":[58.2,72.8],"t":54},{"o":{"x":0.42,"y":0},"i":{"x":0.58,"y":1},"s":[54.3,67.9],"t":60},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[56,70],"t":68},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[56,70],"t":80},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[51.5,64.4],"t":81},{"s":[51.5,64.4],"t":84}]}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[0.9373,0.8863,1]},"r":1,"o":{"a":0,"k":100}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":3},"c":{"a":0,"k":[0.6588,0.3333,0.9686]}}],"ind":3},{"ty":4,"nm":"receive_travel_streak","sr":1,"st":0,"op":84,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":0},{"o":{"x":0.42,"y":0},"i":{"x":0.58,"y":1},"s":[0],"t":8},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[52],"t":16},{"o":{"x":0.42,"y":0},"i":{"x":0.58,"y":1},"s":[52],"t":66},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":78},{"s":[0],"t":84}]}},"shapes":[{"ty":"sh","bm":0,"hd":false,"nm":"Path Curve 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[21,-32]],"o":[[-29,16],[0,0]],"v":[[198,54],[128,140]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":3},"c":{"a":0,"k":[0.6588,0.3333,0.9686]}},{"ty":"tm","bm":0,"hd":false,"nm":"Trim Path","e":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":0},{"o":{"x":0.22,"y":1},"i":{"x":0.36,"y":1},"s":[0],"t":8},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":54},{"s":[100],"t":84}]},"o":{"a":0,"k":0},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":0},{"o":{"x":0.42,"y":0},"i":{"x":0.58,"y":1},"s":[0],"t":30},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":66},{"s":[100],"t":84}]},"m":1}],"ind":4},{"ty":4,"nm":"receive_arrival_ring","sr":1,"st":0,"op":84,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[62,62],"t":0},{"o":{"x":0.34,"y":1.45},"i":{"x":0.64,"y":1},"s":[62,62],"t":46},{"o":{"x":0.22,"y":1},"i":{"x":0.36,"y":1},"s":[100,100],"t":54},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[136,136],"t":72},{"s":[62,62],"t":84}]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[128,140]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":0},{"o":{"x":0.22,"y":1},"i":{"x":0.36,"y":1},"s":[0],"t":46},{"o":{"x":0.42,"y":0},"i":{"x":0.58,"y":1},"s":[72],"t":54},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":72},{"s":[0],"t":84}]}},"shapes":[{"ty":"el","bm":0,"hd":false,"nm":"Ellipse Shape 1","d":1,"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[72,72]}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":3},"c":{"a":0,"k":[0.6588,0.3333,0.9686]}}],"ind":5},{"ty":4,"nm":"receive_portal_base","sr":1,"st":0,"op":84,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100,100],"t":0},{"o":{"x":0.34,"y":1.45},"i":{"x":0.64,"y":1},"s":[100,100],"t":48},{"o":{"x":0.34,"y":1.45},"i":{"x":0.64,"y":1},"s":[104,90],"t":56},{"o":{"x":0.42,"y":0},"i":{"x":0.58,"y":1},"s":[98,106],"t":64},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100,100],"t":72},{"s":[100,100],"t":84}]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[128,178]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"rc","bm":0,"hd":false,"nm":"Rect Shape 1","d":1,"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":15},"s":{"a":0,"k":[132,30]}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[0.9373,0.8863,1]},"r":1,"o":{"a":0,"k":100}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":2},"c":{"a":0,"k":[0.8471,0.7059,0.9961]}}],"ind":6},{"ty":4,"nm":"receive_ambient_halo","sr":1,"st":0,"op":84,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":1,"k":[{"o":{"x":0.42,"y":0},"i":{"x":0.58,"y":1},"s":[96,96],"t":0},{"o":{"x":0.42,"y":0},"i":{"x":0.58,"y":1},"s":[103,103],"t":42},{"s":[96,96],"t":84}]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[128,163]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":18}},"shapes":[{"ty":"el","bm":0,"hd":false,"nm":"Ellipse Shape 1","d":1,"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[170,90]}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[0.8471,0.7059,0.9961]},"r":1,"o":{"a":0,"k":100}}],"ind":7}],"v":"5.7.0","fr":30,"op":84,"ip":0,"assets":[{"nm":"vnidrop-mark","id":"precomp_Shape Layer - SVG_ZNP9xboZcj_aaf4b507-e380-44bc-82bc-d8c08a076b59","fr":30,"layers":[{"ty":4,"nm":"Shape Layer 1","sr":1,"st":0,"op":150,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":true,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"ef":[{"ty":25,"nm":"","en":1,"ef":[{"ty":2,"nm":"","v":{"a":0,"k":[0.302,0.1098,0.5804]}},{"ty":0,"nm":"","v":{"a":0,"k":122.4}},{"ty":1,"nm":"","v":{"a":0,"k":-146.31}},{"ty":0,"nm":"","v":{"a":0,"k":3.61}},{"ty":0,"nm":"","v":{"a":0,"k":12}}]}],"masksProperties":[{"nm":"","inv":false,"mode":"a","x":{"a":0,"k":0},"o":{"a":0,"k":100},"pt":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,-6.97],[0,0],[0,-6.56],[-21.32,0],[0,19.68],[0,8.2],[0,0],[-6.97,0],[0,0],[0,-9.02],[0,0],[45.51,0],[0,43.46],[0,0],[0,0],[0,0],[0,4.1],[0,0],[-3.69,0],[0,0]],"o":[[0,0],[6.97,0],[0,0],[0,8.2],[0,19.68],[21.32,0],[0,-6.56],[0,0],[0,-6.97],[0,0],[9.02,0],[0,0],[0,43.46],[-45.51,0],[0,0],[0,0],[0,0],[-6.15,0],[0,0],[0,-3.69],[0,0],[0,0]],"v":[[69.7,55.35],[95.12,55.35],[107.42,68.06],[107.42,159.49],[103.73,179.99],[141.04,215.25],[177.53,179.99],[174.66,159.49],[174.66,68.06],[186.96,55.35],[205.82,55.35],[222.22,71.75],[222.22,159.49],[141.04,238.21],[59.04,159.49],[59.04,111.93],[65.6,111.93],[65.6,94.71],[54.53,88.56],[54.53,79.95],[61.09,73.39],[69.7,73.39]]}}},{"nm":"","inv":false,"mode":"a","x":{"a":0,"k":0},"o":{"a":0,"k":100},"pt":{"a":0,"k":{"c":true,"i":[[0,0],[0,-1.23],[0,0],[-1.64,0],[0,0],[0,1.64],[0,0],[1.64,0]],"o":[[-1.23,0],[0,0],[0,1.64],[0,0],[1.64,0],[0,0],[0,-1.64],[0,0]],"v":[[74.62,78.31],[72.57,80.77],[72.57,87.33],[75.44,89.79],[81.18,89.79],[83.64,86.92],[83.64,81.18],[80.77,78.31]]}}}],"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","np":2,"it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,-9.06],[0,0]],"o":[[0,0],[9.06,0],[0,0],[0,0]],"v":[[181.22,55.76],[205.82,55.76],[222.22,72.16],[222.22,95.53]]}}},{"ty":"gf","bm":0,"hd":false,"nm":"mark-fold","e":{"a":0,"k":[209.92,95.53]},"g":{"p":2,"k":{"a":0,"k":[0,0.9490196078431372,0.8705882352941177,1,1,0.7490196078431373,0.5215686274509804,0.9882352941176471]}},"t":1,"a":{"a":0,"k":0},"h":{"a":0,"k":0},"s":{"a":0,"k":[181.22,55.76]},"r":2,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":1},{"ty":4,"nm":"vnidrop-mark","sr":1,"st":0,"op":150,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[-0.12501681463547626,-1.1500000485544888]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","np":2,"it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 2","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[5.74,-11.89],[-10.66,-8.2],[-10.66,6.97],[6.56,14.76],[6.56,8.2]],"o":[[-6.15,8.2],[-7.38,14.76],[10.25,6.56],[10.25,-7.38],[-5.74,-11.89],[0,0]],"v":[[140.63,126.28],[115.62,162.77],[122.18,201.31],[158.67,200.9],[165.64,162.77],[140.63,126.28]]}}},{"ty":"gf","bm":0,"hd":false,"nm":"mark-brand","e":{"a":0,"k":[169.03,206.18]},"g":{"p":3,"k":{"a":0,"k":[0,0.6588235294117647,0.32941176470588235,0.9686274509803922,0.48,0.6196078431372549,0.30196078431372547,0.9607843137254902,1,0.49019607843137253,0.1607843137254902,0.9411764705882353]}},"t":1,"a":{"a":0,"k":0},"h":{"a":0,"k":0},"s":{"a":0,"k":[111.64,126.28]},"r":2,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 3","np":3,"it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 3","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,-6.97],[0,0],[0,-6.56],[-21.32,0],[0,19.68],[0,8.2],[0,0],[-6.97,0],[0,0],[0,-9.02],[0,0],[45.51,0],[0,43.46],[0,0],[0,0],[0,0],[0,4.1],[0,0],[-3.69,0],[0,0]],"o":[[0,0],[6.97,0],[0,0],[0,8.2],[0,19.68],[21.32,0],[0,-6.56],[0,0],[0,-6.97],[0,0],[9.02,0],[0,0],[0,43.46],[-45.51,0],[0,0],[0,0],[0,0],[-6.15,0],[0,0],[0,-3.69],[0,0],[0,0]],"v":[[69.7,55.35],[95.12,55.35],[107.42,68.06],[107.42,159.49],[103.73,179.99],[141.04,215.25],[177.53,179.99],[174.66,159.49],[174.66,68.06],[186.96,55.35],[205.82,55.35],[222.22,71.75],[222.22,159.49],[141.04,238.21],[59.04,159.49],[59.04,111.93],[65.6,111.93],[65.6,94.71],[54.53,88.56],[54.53,79.95],[61.09,73.39],[69.7,73.39]]}}},{"ty":"sh","bm":0,"hd":false,"nm":"Path 4","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,-1.23],[0,0],[-1.64,0],[0,0],[0,1.64],[0,0],[1.64,0]],"o":[[-1.23,0],[0,0],[0,1.64],[0,0],[1.64,0],[0,0],[0,-1.64],[0,0]],"v":[[74.62,78.31],[72.57,80.77],[72.57,87.33],[75.44,89.79],[81.18,89.79],[83.64,86.92],[83.64,81.18],[80.77,78.31]]}}},{"ty":"gf","bm":0,"hd":false,"nm":"linearGradient5","e":{"a":0,"k":[222.22,238.21]},"g":{"p":3,"k":{"a":0,"k":[0,0.6588235294117647,0.32941176470588235,0.9686274509803922,0.48,0.6196078431372549,0.30196078431372547,0.9607843137254902,1,0.49019607843137253,0.1607843137254902,0.9411764705882353]}},"t":1,"a":{"a":0,"k":0},"h":{"a":0,"k":0},"s":{"a":0,"k":[54.53,55.35]},"r":2,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 8","np":4,"it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 4","np":2,"it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 5","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,-1.47],[0,0],[1.47,0],[0,0],[0,1.47],[0,0],[-1.47,0]],"o":[[0,0],[1.47,0],[0,0],[0,1.47],[0,0],[-1.47,0],[0,0],[0,-1.47],[0,0]],"v":[[36.7,67.24],[44.48,67.24],[47.15,69.91],[47.15,78.1],[44.48,80.77],[36.7,80.77],[34.03,78.1],[34.03,69.91],[36.7,67.24]]}}},{"ty":"gf","bm":0,"hd":false,"nm":"linearGradient4","e":{"a":0,"k":[47.15,80.77]},"g":{"p":3,"k":{"a":0,"k":[0,0.6588235294117647,0.32941176470588235,0.9686274509803922,0.48,0.6196078431372549,0.30196078431372547,0.9607843137254902,1,0.49019607843137253,0.1607843137254902,0.9411764705882353]}},"t":1,"a":{"a":0,"k":0},"h":{"a":0,"k":0},"s":{"a":0,"k":[34.03,67.24]},"r":2,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 5","np":2,"it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 6","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,-1.13],[0,0],[1.13,0],[0,0],[0,1.13],[0,0],[-1.13,0]],"o":[[0,0],[1.13,0],[0,0],[0,1.13],[0,0],[-1.13,0],[0,0],[0,-1.13],[0,0]],"v":[[43.46,46.33],[48.38,46.33],[50.43,48.38],[50.43,54.12],[48.38,56.17],[43.46,56.17],[41.41,54.12],[41.41,48.38],[43.46,46.33]]}}},{"ty":"gf","bm":0,"hd":false,"nm":"linearGradient3","e":{"a":0,"k":[50.43,56.17]},"g":{"p":3,"k":{"a":0,"k":[0,0.6588235294117647,0.32941176470588235,0.9686274509803922,0.48,0.6196078431372549,0.30196078431372547,0.9607843137254902,1,0.49019607843137253,0.1607843137254902,0.9411764705882353]}},"t":1,"a":{"a":0,"k":0},"h":{"a":0,"k":0},"s":{"a":0,"k":[41.41,46.33]},"r":2,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 6","np":2,"it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 7","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,-1.36],[0,0],[1.36,0],[0,0],[0,1.36],[0,0],[-1.36,0]],"o":[[0,0],[1.36,0],[0,0],[0,1.36],[0,0],[-1.36,0],[0,0],[0,-1.36],[0,0]],"v":[[59.45,36.49],[67.24,36.49],[69.7,38.95],[69.7,47.15],[67.24,49.61],[59.45,49.61],[56.99,47.15],[56.99,38.95],[59.45,36.49]]}}},{"ty":"gf","bm":0,"hd":false,"nm":"linearGradient2","e":{"a":0,"k":[69.7,49.61]},"g":{"p":3,"k":{"a":0,"k":[0,0.6588235294117647,0.32941176470588235,0.9686274509803922,0.48,0.6196078431372549,0.30196078431372547,0.9607843137254902,1,0.49019607843137253,0.1607843137254902,0.9411764705882353]}},"t":1,"a":{"a":0,"k":0},"h":{"a":0,"k":0},"s":{"a":0,"k":[56.99,36.49]},"r":2,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 7","np":2,"it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 8","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,-1.59],[0,0],[1.59,0],[0,0],[0,1.59],[0,0],[-1.59,0]],"o":[[0,0],[1.59,0],[0,0],[0,1.59],[0,0],[-1.59,0],[0,0],[0,-1.59],[0,0]],"v":[[38.54,20.09],[47.97,20.09],[50.84,22.96],[50.84,32.39],[47.97,35.26],[38.54,35.26],[35.67,32.39],[35.67,22.96],[38.54,20.09]]}}},{"ty":"gf","bm":0,"hd":false,"nm":"linearGradient1","e":{"a":0,"k":[50.84,35.26]},"g":{"p":3,"k":{"a":0,"k":[0,0.6588235294117647,0.32941176470588235,0.9686274509803922,0.48,0.6196078431372549,0.30196078431372547,0.9607843137254902,1,0.49019607843137253,0.1607843137254902,0.9411764705882353]}},"t":1,"a":{"a":0,"k":0},"h":{"a":0,"k":0},"s":{"a":0,"k":[35.67,20.09]},"r":2,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":2}]}]} diff --git a/shared/src/commonMain/composeResources/files/animations/send_empty_state.json b/shared/src/commonMain/composeResources/files/animations/send_empty_state.json new file mode 100644 index 0000000..520c61a --- /dev/null +++ b/shared/src/commonMain/composeResources/files/animations/send_empty_state.json @@ -0,0 +1 @@ +{"nm":"VniDrop — Send Empty","ddd":0,"h":256,"w":256,"meta":{"g":"@lottiefiles/creator@1.99.2"},"layers":[{"ty":4,"nm":"send_endpoint_spark","sr":1,"st":0,"op":84,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[35,35],"t":0},{"o":{"x":0.34,"y":1.45},"i":{"x":0.64,"y":1},"s":[35,35],"t":48},{"o":{"x":0.22,"y":1},"i":{"x":0.36,"y":1},"s":[112,112],"t":58},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[142,142],"t":70},{"s":[35,35],"t":84}]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[196,55]},"r":{"a":1,"k":[{"o":{"x":0.22,"y":1},"i":{"x":0.36,"y":1},"s":[0],"t":48},{"s":[35],"t":70}]},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":0},{"o":{"x":0.22,"y":1},"i":{"x":0.36,"y":1},"s":[0],"t":48},{"o":{"x":0.42,"y":0},"i":{"x":0.58,"y":1},"s":[100],"t":57},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":70},{"s":[0],"t":84}]}},"shapes":[{"ty":"sr","bm":0,"hd":false,"nm":"Star Shape 1","d":1,"ir":{"a":0,"k":3.5},"is":{"a":0,"k":100},"pt":{"a":0,"k":4},"p":{"a":0,"k":[0,0]},"or":{"a":0,"k":9},"os":{"a":0,"k":100},"r":{"a":0,"k":45},"sy":1},{"ty":"el","bm":0,"hd":false,"nm":"Ellipse Shape 2","d":1,"p":{"a":0,"k":[18,10]},"s":{"a":0,"k":[7,7]}},{"ty":"el","bm":0,"hd":false,"nm":"Ellipse Shape 3","d":1,"p":{"a":0,"k":[-7,19]},"s":{"a":0,"k":[5,5]}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[0.6588,0.3333,0.9686]},"r":1,"o":{"a":0,"k":100}}],"ind":1},{"ty":4,"nm":"send_portal_lip","sr":1,"st":0,"op":84,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100,100],"t":0},{"o":{"x":0.22,"y":1},"i":{"x":0.36,"y":1},"s":[100,100],"t":10},{"o":{"x":0.34,"y":1.45},"i":{"x":0.64,"y":1},"s":[110,82],"t":18},{"o":{"x":0.42,"y":0},"i":{"x":0.58,"y":1},"s":[96,110],"t":28},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100,100],"t":38},{"s":[100,100],"t":84}]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[128,166]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"rc","bm":0,"hd":false,"nm":"Rect Shape 1","d":1,"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":8},"s":{"a":0,"k":[106,15]}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[0.5765,0.2,0.9176]},"r":1,"o":{"a":0,"k":100}}],"ind":2},{"ty":4,"nm":"send_file_front","sr":1,"st":0,"op":84,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[128,137]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":0},{"o":{"x":0.22,"y":1},"i":{"x":0.36,"y":1},"s":[100],"t":56},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":66},{"o":{"x":0.42,"y":0},"i":{"x":0.58,"y":1},"s":[0],"t":73},{"s":[100],"t":84}]}},"shapes":[{"ty":"rc","bm":0,"hd":false,"nm":"Rect Shape 3","d":1,"p":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,0],"t":0},{"o":{"x":0.22,"y":1},"i":{"x":0.36,"y":1},"s":[0,0],"t":10},{"o":{"x":0.42,"y":0},"i":{"x":0.58,"y":1},"s":[-2,-16],"t":22},{"o":{"x":0.22,"y":1},"i":{"x":0.36,"y":1},"s":[55,-67],"t":50},{"o":{"x":0.22,"y":1},"i":{"x":0.36,"y":1},"s":[68,-82],"t":62},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[74,-87],"t":66},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0,0],"t":67},{"s":[0,0],"t":84}]},"r":{"a":0,"k":10},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[56,70],"t":0},{"o":{"x":0.22,"y":1},"i":{"x":0.36,"y":1},"s":[56,70],"t":10},{"o":{"x":0.42,"y":0},"i":{"x":0.58,"y":1},"s":[58,73],"t":22},{"o":{"x":0.22,"y":1},"i":{"x":0.36,"y":1},"s":[54,67],"t":50},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[49,62],"t":66},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[56,70],"t":67},{"s":[56,70],"t":84}]}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[0.9373,0.8863,1]},"r":1,"o":{"a":0,"k":100}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":3},"c":{"a":0,"k":[0.6588,0.3333,0.9686]}}],"ind":3},{"ty":4,"nm":"send_file_back_left","sr":1,"st":0,"op":84,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.42,"y":0},"i":{"x":0.58,"y":1},"s":[114,141],"t":0},{"o":{"x":0.42,"y":0},"i":{"x":0.58,"y":1},"s":[112,138],"t":42},{"s":[114,141],"t":84}]},"r":{"a":1,"k":[{"o":{"x":0.42,"y":0},"i":{"x":0.58,"y":1},"s":[-9],"t":0},{"o":{"x":0.42,"y":0},"i":{"x":0.58,"y":1},"s":[-11],"t":42},{"s":[-9],"t":84}]},"sa":{"a":0,"k":0},"o":{"a":0,"k":62}},"shapes":[{"ty":"rc","bm":0,"hd":false,"nm":"Rect Shape 1","d":1,"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":10},"s":{"a":0,"k":[50,64]}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[0.8471,0.7059,0.9961]},"r":1,"o":{"a":0,"k":100}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":2},"c":{"a":0,"k":[0.5765,0.2,0.9176]}}],"ind":4},{"ty":4,"nm":"send_file_back_right","sr":1,"st":0,"op":84,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.42,"y":0},"i":{"x":0.58,"y":1},"s":[142,143],"t":0},{"o":{"x":0.42,"y":0},"i":{"x":0.58,"y":1},"s":[145,140],"t":42},{"s":[142,143],"t":84}]},"r":{"a":1,"k":[{"o":{"x":0.42,"y":0},"i":{"x":0.58,"y":1},"s":[9],"t":0},{"o":{"x":0.42,"y":0},"i":{"x":0.58,"y":1},"s":[11],"t":42},{"s":[9],"t":84}]},"sa":{"a":0,"k":0},"o":{"a":0,"k":46}},"shapes":[{"ty":"rc","bm":0,"hd":false,"nm":"Rect Shape 1","d":1,"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":10},"s":{"a":0,"k":[50,64]}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[0.8471,0.7059,0.9961]},"r":1,"o":{"a":0,"k":100}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":2},"c":{"a":0,"k":[0.5765,0.2,0.9176]}}],"ind":5},{"ty":4,"nm":"send_travel_streak","sr":1,"st":0,"op":84,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":0},{"o":{"x":0.42,"y":0},"i":{"x":0.58,"y":1},"s":[0],"t":10},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[52],"t":18},{"o":{"x":0.42,"y":0},"i":{"x":0.58,"y":1},"s":[52],"t":64},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":74},{"s":[0],"t":84}]}},"shapes":[{"ty":"sh","bm":0,"hd":false,"nm":"Path Curve 1","d":1,"ks":{"a":0,"k":{"c":false,"i":[[0,0],[-18,30]],"o":[[29,-16],[0,0]],"v":[[126,132],[196,55]]}}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":3},"c":{"a":0,"k":[0.6588,0.3333,0.9686]}},{"ty":"tm","bm":0,"hd":false,"nm":"Trim Path","e":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":0},{"o":{"x":0.22,"y":1},"i":{"x":0.36,"y":1},"s":[0],"t":10},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":48},{"s":[100],"t":84}]},"o":{"a":0,"k":0},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":0},{"o":{"x":0.42,"y":0},"i":{"x":0.58,"y":1},"s":[0],"t":28},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[100],"t":66},{"s":[100],"t":84}]},"m":1}],"ind":6},{"ty":4,"nm":"send_launch_ring","sr":1,"st":0,"op":84,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[62,62],"t":0},{"o":{"x":0.34,"y":1.45},"i":{"x":0.64,"y":1},"s":[62,62],"t":10},{"o":{"x":0.22,"y":1},"i":{"x":0.36,"y":1},"s":[100,100],"t":18},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[136,136],"t":36},{"s":[62,62],"t":84}]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[128,137]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":0},{"o":{"x":0.22,"y":1},"i":{"x":0.36,"y":1},"s":[0],"t":10},{"o":{"x":0.42,"y":0},"i":{"x":0.58,"y":1},"s":[72],"t":18},{"o":{"x":0.167,"y":0.167},"i":{"x":0.833,"y":0.833},"s":[0],"t":36},{"s":[0],"t":84}]}},"shapes":[{"ty":"el","bm":0,"hd":false,"nm":"Ellipse Shape 1","d":1,"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[72,72]}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":3},"c":{"a":0,"k":[0.6588,0.3333,0.9686]}}],"ind":7},{"ty":4,"nm":"send_portal_base","sr":1,"st":0,"op":84,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[128,178]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"rc","bm":0,"hd":false,"nm":"Rect Shape 1","d":1,"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":15},"s":{"a":0,"k":[132,30]}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[0.9373,0.8863,1]},"r":1,"o":{"a":0,"k":100}},{"ty":"st","bm":0,"hd":false,"nm":"Stroke","lc":2,"lj":2,"ml":1,"o":{"a":0,"k":100},"w":{"a":0,"k":2},"c":{"a":0,"k":[0.8471,0.7059,0.9961]}}],"ind":8},{"ty":4,"nm":"send_ambient_halo","sr":1,"st":0,"op":84,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":1,"k":[{"o":{"x":0.42,"y":0},"i":{"x":0.58,"y":1},"s":[96,96],"t":0},{"o":{"x":0.42,"y":0},"i":{"x":0.58,"y":1},"s":[103,103],"t":42},{"s":[96,96],"t":84}]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[128,163]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":18}},"shapes":[{"ty":"el","bm":0,"hd":false,"nm":"Ellipse Shape 1","d":1,"p":{"a":0,"k":[0,0]},"s":{"a":0,"k":[170,90]}},{"ty":"fl","bm":0,"hd":false,"nm":"Fill","c":{"a":0,"k":[0.8471,0.7059,0.9961]},"r":1,"o":{"a":0,"k":100}}],"ind":9}],"v":"5.7.0","fr":30,"op":84,"ip":0,"assets":[{"nm":"vnidrop-mark","id":"precomp_Shape Layer - SVG_ZNP9xboZcj_aaf4b507-e380-44bc-82bc-d8c08a076b59","fr":30,"layers":[{"ty":4,"nm":"Shape Layer 1","sr":1,"st":0,"op":150,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":true,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"ef":[{"ty":25,"nm":"","en":1,"ef":[{"ty":2,"nm":"","v":{"a":0,"k":[0.302,0.1098,0.5804]}},{"ty":0,"nm":"","v":{"a":0,"k":122.4}},{"ty":1,"nm":"","v":{"a":0,"k":-146.31}},{"ty":0,"nm":"","v":{"a":0,"k":3.61}},{"ty":0,"nm":"","v":{"a":0,"k":12}}]}],"masksProperties":[{"nm":"","inv":false,"mode":"a","x":{"a":0,"k":0},"o":{"a":0,"k":100},"pt":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,-6.97],[0,0],[0,-6.56],[-21.32,0],[0,19.68],[0,8.2],[0,0],[-6.97,0],[0,0],[0,-9.02],[0,0],[45.51,0],[0,43.46],[0,0],[0,0],[0,0],[0,4.1],[0,0],[-3.69,0],[0,0]],"o":[[0,0],[6.97,0],[0,0],[0,8.2],[0,19.68],[21.32,0],[0,-6.56],[0,0],[0,-6.97],[0,0],[9.02,0],[0,0],[0,43.46],[-45.51,0],[0,0],[0,0],[0,0],[-6.15,0],[0,0],[0,-3.69],[0,0],[0,0]],"v":[[69.7,55.35],[95.12,55.35],[107.42,68.06],[107.42,159.49],[103.73,179.99],[141.04,215.25],[177.53,179.99],[174.66,159.49],[174.66,68.06],[186.96,55.35],[205.82,55.35],[222.22,71.75],[222.22,159.49],[141.04,238.21],[59.04,159.49],[59.04,111.93],[65.6,111.93],[65.6,94.71],[54.53,88.56],[54.53,79.95],[61.09,73.39],[69.7,73.39]]}}},{"nm":"","inv":false,"mode":"a","x":{"a":0,"k":0},"o":{"a":0,"k":100},"pt":{"a":0,"k":{"c":true,"i":[[0,0],[0,-1.23],[0,0],[-1.64,0],[0,0],[0,1.64],[0,0],[1.64,0]],"o":[[-1.23,0],[0,0],[0,1.64],[0,0],[1.64,0],[0,0],[0,-1.64],[0,0]],"v":[[74.62,78.31],[72.57,80.77],[72.57,87.33],[75.44,89.79],[81.18,89.79],[83.64,86.92],[83.64,81.18],[80.77,78.31]]}}}],"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 1","np":2,"it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 1","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,-9.06],[0,0]],"o":[[0,0],[9.06,0],[0,0],[0,0]],"v":[[181.22,55.76],[205.82,55.76],[222.22,72.16],[222.22,95.53]]}}},{"ty":"gf","bm":0,"hd":false,"nm":"mark-fold","e":{"a":0,"k":[209.92,95.53]},"g":{"p":2,"k":{"a":0,"k":[0,0.9490196078431372,0.8705882352941177,1,1,0.7490196078431373,0.5215686274509804,0.9882352941176471]}},"t":1,"a":{"a":0,"k":0},"h":{"a":0,"k":0},"s":{"a":0,"k":[181.22,55.76]},"r":2,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":1},{"ty":4,"nm":"vnidrop-mark","sr":1,"st":0,"op":150,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[-0.12501681463547626,-1.1500000485544888]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}},"shapes":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 2","np":2,"it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 2","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[5.74,-11.89],[-10.66,-8.2],[-10.66,6.97],[6.56,14.76],[6.56,8.2]],"o":[[-6.15,8.2],[-7.38,14.76],[10.25,6.56],[10.25,-7.38],[-5.74,-11.89],[0,0]],"v":[[140.63,126.28],[115.62,162.77],[122.18,201.31],[158.67,200.9],[165.64,162.77],[140.63,126.28]]}}},{"ty":"gf","bm":0,"hd":false,"nm":"mark-brand","e":{"a":0,"k":[169.03,206.18]},"g":{"p":3,"k":{"a":0,"k":[0,0.6588235294117647,0.32941176470588235,0.9686274509803922,0.48,0.6196078431372549,0.30196078431372547,0.9607843137254902,1,0.49019607843137253,0.1607843137254902,0.9411764705882353]}},"t":1,"a":{"a":0,"k":0},"h":{"a":0,"k":0},"s":{"a":0,"k":[111.64,126.28]},"r":2,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 3","np":3,"it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 3","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,-6.97],[0,0],[0,-6.56],[-21.32,0],[0,19.68],[0,8.2],[0,0],[-6.97,0],[0,0],[0,-9.02],[0,0],[45.51,0],[0,43.46],[0,0],[0,0],[0,0],[0,4.1],[0,0],[-3.69,0],[0,0]],"o":[[0,0],[6.97,0],[0,0],[0,8.2],[0,19.68],[21.32,0],[0,-6.56],[0,0],[0,-6.97],[0,0],[9.02,0],[0,0],[0,43.46],[-45.51,0],[0,0],[0,0],[0,0],[-6.15,0],[0,0],[0,-3.69],[0,0],[0,0]],"v":[[69.7,55.35],[95.12,55.35],[107.42,68.06],[107.42,159.49],[103.73,179.99],[141.04,215.25],[177.53,179.99],[174.66,159.49],[174.66,68.06],[186.96,55.35],[205.82,55.35],[222.22,71.75],[222.22,159.49],[141.04,238.21],[59.04,159.49],[59.04,111.93],[65.6,111.93],[65.6,94.71],[54.53,88.56],[54.53,79.95],[61.09,73.39],[69.7,73.39]]}}},{"ty":"sh","bm":0,"hd":false,"nm":"Path 4","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,-1.23],[0,0],[-1.64,0],[0,0],[0,1.64],[0,0],[1.64,0]],"o":[[-1.23,0],[0,0],[0,1.64],[0,0],[1.64,0],[0,0],[0,-1.64],[0,0]],"v":[[74.62,78.31],[72.57,80.77],[72.57,87.33],[75.44,89.79],[81.18,89.79],[83.64,86.92],[83.64,81.18],[80.77,78.31]]}}},{"ty":"gf","bm":0,"hd":false,"nm":"linearGradient5","e":{"a":0,"k":[222.22,238.21]},"g":{"p":3,"k":{"a":0,"k":[0,0.6588235294117647,0.32941176470588235,0.9686274509803922,0.48,0.6196078431372549,0.30196078431372547,0.9607843137254902,1,0.49019607843137253,0.1607843137254902,0.9411764705882353]}},"t":1,"a":{"a":0,"k":0},"h":{"a":0,"k":0},"s":{"a":0,"k":[54.53,55.35]},"r":2,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 8","np":4,"it":[{"ty":"gr","bm":0,"hd":false,"nm":"Group 4","np":2,"it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 5","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,-1.47],[0,0],[1.47,0],[0,0],[0,1.47],[0,0],[-1.47,0]],"o":[[0,0],[1.47,0],[0,0],[0,1.47],[0,0],[-1.47,0],[0,0],[0,-1.47],[0,0]],"v":[[36.7,67.24],[44.48,67.24],[47.15,69.91],[47.15,78.1],[44.48,80.77],[36.7,80.77],[34.03,78.1],[34.03,69.91],[36.7,67.24]]}}},{"ty":"gf","bm":0,"hd":false,"nm":"linearGradient4","e":{"a":0,"k":[47.15,80.77]},"g":{"p":3,"k":{"a":0,"k":[0,0.6588235294117647,0.32941176470588235,0.9686274509803922,0.48,0.6196078431372549,0.30196078431372547,0.9607843137254902,1,0.49019607843137253,0.1607843137254902,0.9411764705882353]}},"t":1,"a":{"a":0,"k":0},"h":{"a":0,"k":0},"s":{"a":0,"k":[34.03,67.24]},"r":2,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 5","np":2,"it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 6","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,-1.13],[0,0],[1.13,0],[0,0],[0,1.13],[0,0],[-1.13,0]],"o":[[0,0],[1.13,0],[0,0],[0,1.13],[0,0],[-1.13,0],[0,0],[0,-1.13],[0,0]],"v":[[43.46,46.33],[48.38,46.33],[50.43,48.38],[50.43,54.12],[48.38,56.17],[43.46,56.17],[41.41,54.12],[41.41,48.38],[43.46,46.33]]}}},{"ty":"gf","bm":0,"hd":false,"nm":"linearGradient3","e":{"a":0,"k":[50.43,56.17]},"g":{"p":3,"k":{"a":0,"k":[0,0.6588235294117647,0.32941176470588235,0.9686274509803922,0.48,0.6196078431372549,0.30196078431372547,0.9607843137254902,1,0.49019607843137253,0.1607843137254902,0.9411764705882353]}},"t":1,"a":{"a":0,"k":0},"h":{"a":0,"k":0},"s":{"a":0,"k":[41.41,46.33]},"r":2,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 6","np":2,"it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 7","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,-1.36],[0,0],[1.36,0],[0,0],[0,1.36],[0,0],[-1.36,0]],"o":[[0,0],[1.36,0],[0,0],[0,1.36],[0,0],[-1.36,0],[0,0],[0,-1.36],[0,0]],"v":[[59.45,36.49],[67.24,36.49],[69.7,38.95],[69.7,47.15],[67.24,49.61],[59.45,49.61],[56.99,47.15],[56.99,38.95],[59.45,36.49]]}}},{"ty":"gf","bm":0,"hd":false,"nm":"linearGradient2","e":{"a":0,"k":[69.7,49.61]},"g":{"p":3,"k":{"a":0,"k":[0,0.6588235294117647,0.32941176470588235,0.9686274509803922,0.48,0.6196078431372549,0.30196078431372547,0.9607843137254902,1,0.49019607843137253,0.1607843137254902,0.9411764705882353]}},"t":1,"a":{"a":0,"k":0},"h":{"a":0,"k":0},"s":{"a":0,"k":[56.99,36.49]},"r":2,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"gr","bm":0,"hd":false,"nm":"Group 7","np":2,"it":[{"ty":"sh","bm":0,"hd":false,"nm":"Path 8","d":1,"ks":{"a":0,"k":{"c":true,"i":[[0,0],[0,0],[0,-1.59],[0,0],[1.59,0],[0,0],[0,1.59],[0,0],[-1.59,0]],"o":[[0,0],[1.59,0],[0,0],[0,1.59],[0,0],[-1.59,0],[0,0],[0,-1.59],[0,0]],"v":[[38.54,20.09],[47.97,20.09],[50.84,22.96],[50.84,32.39],[47.97,35.26],[38.54,35.26],[35.67,32.39],[35.67,22.96],[38.54,20.09]]}}},{"ty":"gf","bm":0,"hd":false,"nm":"linearGradient1","e":{"a":0,"k":[50.84,35.26]},"g":{"p":3,"k":{"a":0,"k":[0,0.6588235294117647,0.32941176470588235,0.9686274509803922,0.48,0.6196078431372549,0.30196078431372547,0.9607843137254902,1,0.49019607843137253,0.1607843137254902,0.9411764705882353]}},"t":1,"a":{"a":0,"k":0},"h":{"a":0,"k":0},"s":{"a":0,"k":[35.67,20.09]},"r":2,"o":{"a":0,"k":100}},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]},{"ty":"tr","a":{"a":0,"k":[0,0]},"s":{"a":0,"k":[100,100]},"sk":{"a":0,"k":0},"p":{"a":0,"k":[0,0]},"r":{"a":0,"k":0},"sa":{"a":0,"k":0},"o":{"a":0,"k":100}}]}],"ind":2}]}]} diff --git a/shared/src/commonMain/kotlin/com/vnidrop/app/feature/receive/ReceiveScreen.kt b/shared/src/commonMain/kotlin/com/vnidrop/app/feature/receive/ReceiveScreen.kt index c99987e..4b4db2e 100644 --- a/shared/src/commonMain/kotlin/com/vnidrop/app/feature/receive/ReceiveScreen.kt +++ b/shared/src/commonMain/kotlin/com/vnidrop/app/feature/receive/ReceiveScreen.kt @@ -49,6 +49,7 @@ import com.vnidrop.app.core.TransferStatus import com.vnidrop.app.ui.components.AdaptiveDrawer import com.vnidrop.app.ui.components.DestructiveButton import com.vnidrop.app.ui.components.DestructiveQuietButton +import com.vnidrop.app.ui.components.EmptyStateAnimation import com.vnidrop.app.ui.components.Field import com.vnidrop.app.ui.components.PrimaryButton import com.vnidrop.app.ui.components.ProgressRow @@ -176,10 +177,11 @@ private fun ReceiveEmptyState(onOpen: () -> Unit) { horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center, ) { - Box(Modifier.size(68.dp).background(colors.brandLink.copy(alpha = 0.12f), RoundedCornerShape(20.dp)), contentAlignment = Alignment.Center) { - Icon(ReceiveIcons.Download, null, tint = colors.brandLink, modifier = Modifier.size(30.dp)) - } - Text(stringResource(Res.string.receive_empty_title), modifier = Modifier.padding(top = 22.dp), style = MaterialTheme.typography.headlineSmall, fontWeight = FontWeight.Bold) + EmptyStateAnimation( + assetPath = "files/animations/receive_empty_state.json", + modifier = Modifier.size(168.dp), + ) + Text(stringResource(Res.string.receive_empty_title), modifier = Modifier.padding(top = 12.dp), style = MaterialTheme.typography.headlineSmall, fontWeight = FontWeight.Bold) Text( stringResource(Res.string.receive_empty_body), modifier = Modifier.padding(top = 8.dp).widthIn(max = 480.dp), diff --git a/shared/src/commonMain/kotlin/com/vnidrop/app/feature/send/SendCatalog.kt b/shared/src/commonMain/kotlin/com/vnidrop/app/feature/send/SendCatalog.kt index dd419e3..f56d1f9 100644 --- a/shared/src/commonMain/kotlin/com/vnidrop/app/feature/send/SendCatalog.kt +++ b/shared/src/commonMain/kotlin/com/vnidrop/app/feature/send/SendCatalog.kt @@ -37,6 +37,7 @@ import androidx.compose.ui.unit.dp import com.vnidrop.app.core.CoreEventModel import com.vnidrop.app.core.Transfer import com.vnidrop.app.core.TransferStatus +import com.vnidrop.app.ui.components.EmptyStateAnimation import com.vnidrop.app.ui.components.PillTone import com.vnidrop.app.ui.components.PrimaryButton import com.vnidrop.app.ui.components.ProgressRow @@ -145,15 +146,13 @@ private fun SendEmptyState(onOpenComposer: () -> Unit) { horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center, ) { - Box( - modifier = Modifier.size(68.dp).clip(RoundedCornerShape(22.dp)).background(colors.brandLink.copy(alpha = 0.12f)), - contentAlignment = Alignment.Center, - ) { - Icon(SendIcons.File, contentDescription = null, tint = colors.brandLink, modifier = Modifier.size(30.dp)) - } + EmptyStateAnimation( + assetPath = "files/animations/send_empty_state.json", + modifier = Modifier.size(168.dp), + ) Text( stringResource(Res.string.send_empty_title), - modifier = Modifier.padding(top = 22.dp), + modifier = Modifier.padding(top = 12.dp), style = MaterialTheme.typography.headlineSmall, fontWeight = FontWeight.Bold, textAlign = TextAlign.Center, diff --git a/shared/src/commonMain/kotlin/com/vnidrop/app/ui/components/EmptyStateAnimation.kt b/shared/src/commonMain/kotlin/com/vnidrop/app/ui/components/EmptyStateAnimation.kt new file mode 100644 index 0000000..97653f1 --- /dev/null +++ b/shared/src/commonMain/kotlin/com/vnidrop/app/ui/components/EmptyStateAnimation.kt @@ -0,0 +1,34 @@ +package com.vnidrop.app.ui.components + +import androidx.compose.foundation.Image +import androidx.compose.runtime.Composable +import androidx.compose.runtime.getValue +import androidx.compose.ui.Modifier +import androidx.compose.ui.layout.ContentScale +import io.github.alexzhirkevich.compottie.Compottie +import io.github.alexzhirkevich.compottie.LottieCompositionSpec +import io.github.alexzhirkevich.compottie.rememberLottieComposition +import io.github.alexzhirkevich.compottie.rememberLottiePainter +import vnidrop.shared.generated.resources.Res + +@Composable +internal fun EmptyStateAnimation( + assetPath: String, + modifier: Modifier = Modifier, +) { + val composition by rememberLottieComposition { + LottieCompositionSpec.JsonString( + Res.readBytes(assetPath).decodeToString(), + ) + } + + Image( + painter = rememberLottiePainter( + composition = composition, + iterations = Compottie.IterateForever, + ), + contentDescription = null, + modifier = modifier, + contentScale = ContentScale.Fit, + ) +}