android: use AsyncImage for images

* Coil recommends using clip instead of CircleCropTransformation for compose.
* Enable crossfade by default
* Allow caching images
* Run spotlessApply

Closes #320

Signed-off-by: Rahul Krishna <Rahulkrishna585@gmail.com>

android/build.gradle.kts

@@ -35,6 +35,7 @@ dependencies {
   implementation(libs.androidx.lifecycle.compose)
   implementation(libs.androidx.navigation.compose)
   implementation(libs.androidx.paging.compose)
+  implementation(libs.coil)
   implementation(libs.copydown)
   implementation(libs.dagger.hilt.android)
   implementation(libs.material.motion.core)

android/src/main/kotlin/dev/msfjarvis/claw/android/ClawApplication.kt

@@ -5,11 +5,15 @@ import android.os.StrictMode
 import android.util.Log
 import androidx.hilt.work.HiltWorkerFactory
 import androidx.work.Configuration
+import coil.ImageLoader
+import coil.ImageLoaderFactory
+import coil.disk.DiskCache
+import coil.memory.MemoryCache
 import dagger.hilt.android.HiltAndroidApp
 import javax.inject.Inject
 
 @HiltAndroidApp
-class ClawApplication : Application(), Configuration.Provider {
+class ClawApplication : Application(), Configuration.Provider, ImageLoaderFactory {
   @Inject lateinit var workerFactory: HiltWorkerFactory
 
   override fun onCreate() {
@@ -26,4 +30,18 @@ class ClawApplication : Application(), Configuration.Provider {
       .setWorkerFactory(workerFactory)
       .build()
   }
+
+  override fun newImageLoader(): ImageLoader {
+    return ImageLoader.Builder(this)
+      .memoryCache { MemoryCache.Builder(this).maxSizePercent(0.25).build() }
+      .diskCache {
+        DiskCache.Builder()
+          .directory(cacheDir.resolve("image_cache"))
+          .maxSizeBytes(25L * 1024 * 1024) // 25 MB
+          .build()
+      }
+      // Show a short crossfade when loading images asynchronously.
+      .crossfade(true)
+      .build()
+  }
 }

common/src/androidMain/kotlin/dev/msfjarvis/claw/common/ui/composables.kt

@@ -1,31 +1,20 @@
 package dev.msfjarvis.claw.common.ui
 
-import androidx.compose.foundation.Image
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.platform.LocalContext
-import coil.annotation.ExperimentalCoilApi
-import coil.compose.rememberAsyncImagePainter
-import coil.request.ImageRequest
-import coil.transform.CircleCropTransformation
+import androidx.compose.ui.draw.clip
+import coil.compose.AsyncImage
 
 @Composable
-@OptIn(ExperimentalCoilApi::class)
 actual fun NetworkImage(
   url: String,
   contentDescription: String,
   modifier: Modifier,
 ) {
-  Image(
-    painter =
-      rememberAsyncImagePainter(
-        ImageRequest.Builder(LocalContext.current)
-          .data(data = url)
-          .transformations(CircleCropTransformation())
-          .crossfade(true)
-          .build()
-      ),
+  AsyncImage(
+    model = url,
     contentDescription = contentDescription,
-    modifier = modifier,
+    modifier = modifier.clip(CircleShape)
   )
 }

gradle/libs.versions.toml

@@ -1,6 +1,7 @@
 [versions]
 accompanist = "0.24.6-alpha"
 aurora = "1.1.0"
+coil = "2.0.0-rc03"
 coroutines = "1.6.1"
 dagger = "2.41"
 hilt = "1.0.0"
@@ -35,7 +36,8 @@ build-kotlin-serialization = { module = "org.jetbrains.kotlin:kotlin-serializati
 build-spotless = "com.diffplug.spotless:spotless-plugin-gradle:6.5.2"
 build-vcu = "nl.littlerobots.version-catalog-update:nl.littlerobots.version-catalog-update.gradle.plugin:0.3.1"
 build-versions = "com.github.ben-manes:gradle-versions-plugin:0.42.0"
-coil-compose = "io.coil-kt:coil-compose:2.0.0-rc03"
+coil = { module = "io.coil-kt:coil", version.ref = "coil" }
+coil-compose = { module = "io.coil-kt:coil-compose", version.ref = "coil" }
 compose-richtext-markdown = { module = "com.halilibo.compose-richtext:richtext-commonmark", version.ref = "richtext" }
 compose-richtext-material = { module = "com.halilibo.compose-richtext:richtext-ui-material", version.ref = "richtext" }
 compose-richtext-ui = { module = "com.halilibo.compose-richtext:richtext-ui", version.ref = "richtext" }