Mobile: image loading and caching

// In practice: Coil. Its pipeline does memory → disk → network, downsampling to the view's size
val imageLoader = ImageLoader.Builder(context)
    .memoryCache { MemoryCache.Builder().maxSizePercent(context, 0.20).build() }   // 20% of app memory
    .diskCache {
        DiskCache.Builder()
            .directory(context.cacheDir.resolve("image_cache"))
            .maxSizeBytes(250L * 1024 * 1024)
            .build()
    }
    .crossfade(true)
    .build()

@Composable
fun ProductThumbnail(url: String, modifier: Modifier = Modifier) {
    AsyncImage(
        model = ImageRequest.Builder(LocalContext.current)
            .data(url)
            .size(360, 360)                     // 120.dp at 3x; omit to let Coil measure the view
            .build(),
        contentDescription = null,
        contentScale = ContentScale.Crop,
        modifier = modifier.size(120.dp),
    )
}

// What downsampling means underneath, with the platform decoder
fun decodeSampled(bytes: ByteArray, reqWidth: Int, reqHeight: Int): Bitmap {
    val source = ImageDecoder.createSource(ByteBuffer.wrap(bytes))
    return ImageDecoder.decodeBitmap(source) { decoder, info, _ ->
        val scale = minOf(reqWidth.toFloat() / info.size.width, reqHeight.toFloat() / info.size.height, 1f)
        decoder.setTargetSize((info.size.width * scale).toInt(), (info.size.height * scale).toInt())
    }
}

// Web or React Native web: the browser decodes, so the job is to request the right size
function ProductThumbnail({ imageId }: { imageId: string }) {
  const base = `https://img.example.com/${imageId}`;
  return (
    <img
      src={`${base}?w=240&fm=webp`}
      srcSet={`${base}?w=120&fm=webp 120w, ${base}?w=240&fm=webp 240w, ${base}?w=360&fm=webp 360w`}
      sizes="120px"
      width={120}
      height={120}
      loading="lazy"            // don't load until near the viewport
      decoding="async"          // decode off the main thread
      alt=""
    />
  );
}

// Compose + Coil: the request is tied to the composable for this key.
// When the item scrolls away or the url changes, the old request is cancelled.
@Composable
fun ProductGrid(products: List<Product>) {
    val context = LocalContext.current
    val gridState = rememberLazyGridState()
    LazyVerticalGrid(columns = GridCells.Adaptive(120.dp), state = gridState) {
        items(products, key = { it.id.value }) { product ->
            AsyncImage(model = product.thumbnailUrl, contentDescription = product.name,
                modifier = Modifier.size(120.dp), contentScale = ContentScale.Crop)
        }
    }

    // Prefetch the next 10 images into the disk cache while the user scrolls
    LaunchedEffect(gridState, products) {
        snapshotFlow { gridState.layoutInfo.visibleItemsInfo.lastOrNull()?.index ?: 0 }
            .distinctUntilChanged()
            .collect { last ->
                products.drop(last + 1).take(10).forEach { p ->
                    context.imageLoader.enqueue(ImageRequest.Builder(context).data(p.thumbnailUrl)
                        .memoryCachePolicy(CachePolicy.DISABLED)   // disk only: don't push visible items out
                        .build())
                }
            }
    }
}

// React: ignore results for an old url when the component has moved on
function useImage(url: string) {
  const [src, setSrc] = useState<string | null>(null);
  useEffect(() => {
    const controller = new AbortController();
    setSrc(null);
    fetch(url, { signal: controller.signal })
      .then((r) => r.blob())
      .then((blob) => setSrc(URL.createObjectURL(blob)))
      .catch(() => {});                                   // aborted or failed
    return () => controller.abort();                      // cancel when url changes or on unmount
  }, [url]);
  return src;
}