Load images in background

Author: zsoltk

app/src/main/java/com/github/zsoltk/pokedex/common/Image.kt

@@ -0,0 +1,17 @@
+package com.github.zsoltk.pokedex.common
+
+import androidx.compose.Composable
+import androidx.compose.unaryPlus
+import androidx.ui.foundation.DrawImage
+import androidx.ui.graphics.Color
+import androidx.ui.res.loadImageResource
+
+@Composable
+fun LoadImage(imageResId: Int, tint: Color? = null) {
+    (+loadImageResource(imageResId)).resource.resource?.let {
+        DrawImage(
+            image = it,
+            tint = tint
+        )
+    }
+}

app/src/main/java/com/github/zsoltk/pokedex/common/PokeBall.kt

@@ -1,13 +1,10 @@
 package com.github.zsoltk.pokedex.common
 
 import androidx.compose.Composable
-import androidx.compose.unaryPlus
 import androidx.ui.core.Opacity
 import androidx.ui.core.dp
-import androidx.ui.foundation.DrawImage
 import androidx.ui.graphics.Color
 import androidx.ui.layout.Container
-import androidx.ui.res.imageResource
 import androidx.ui.tooling.preview.Preview
 import com.github.zsoltk.pokedex.R
 
@@ -24,10 +21,7 @@ fun PokeBallSmall(tint: Color, opacity: Float = 1f) {
 @Composable
 private fun PokeBall(tint: Color, opacity: Float, imageResId: Int) {
     Opacity(opacity = opacity) {
-        DrawImage(
-            image = +imageResource(imageResId),
-            tint = tint
-        )
+        LoadImage(imageResId, tint)
     }
 }
 

app/src/main/java/com/github/zsoltk/pokedex/home/news/NewsCard.kt

@@ -4,7 +4,6 @@ import androidx.compose.Composable
 import androidx.compose.unaryPlus
 import androidx.ui.core.Text
 import androidx.ui.core.dp
-import androidx.ui.foundation.DrawImage
 import androidx.ui.foundation.shape.corner.RoundedCornerShape
 import androidx.ui.layout.Column
 import androidx.ui.layout.Container
@@ -15,10 +14,10 @@ import androidx.ui.layout.Spacing
 import androidx.ui.material.MaterialTheme
 import androidx.ui.material.surface.Surface
 import androidx.ui.res.colorResource
-import androidx.ui.res.imageResource
 import androidx.ui.text.font.FontWeight
 import com.github.zsoltk.pokedex.R
 import com.github.zsoltk.pokedex.common.HorizontalRuler
+import com.github.zsoltk.pokedex.common.LoadImage
 import com.github.zsoltk.pokedex.entity.NewsItem
 
 @Composable
@@ -55,7 +54,7 @@ private fun NewsImage() {
     Padding(left = 48.dp) {
         Surface(shape = RoundedCornerShape(8.dp)) {
             Container(width = 112.dp, height = 64.dp) {
-                DrawImage(image = +imageResource(R.drawable.news1))
+                LoadImage(R.drawable.news1)
             }
         }
     }

app/src/main/java/com/github/zsoltk/pokedex/pokedex/PokemonDetails.kt

@@ -23,12 +23,12 @@ import androidx.ui.material.Tab
 import androidx.ui.material.TabRow
 import androidx.ui.material.surface.Surface
 import androidx.ui.res.colorResource
-import androidx.ui.res.imageResource
 import androidx.ui.text.TextStyle
 import androidx.ui.text.font.FontFamily
 import androidx.ui.text.font.FontWeight
 import androidx.ui.tooling.preview.Preview
 import com.github.zsoltk.pokedex.R
+import com.github.zsoltk.pokedex.common.LoadImage
 import com.github.zsoltk.pokedex.common.PokeBallLarge
 import com.github.zsoltk.pokedex.common.PokemonTypeLabels
 import com.github.zsoltk.pokedex.common.Rotate
@@ -160,7 +160,7 @@ private fun StackChildren.Image(pokemon: Pokemon) {
     pokemon.image?.let { image ->
         positioned(topInset = 140.dp) {
             Container(width = 200.dp, height = 200.dp) {
-                DrawImage(+imageResource(image))
+                LoadImage(image)
             }
         }
     }