https://kotlinlang.org logo
Channels
Powered by
#compose
Title
# compose
s

Se7eN

09/15/2020, 1:21 PM
I have a 
LazyColumnFor
that displays 20 items. The items consist of an image and some text. When displaying 20 items with each image of size 128kb, it lags like hell. Is this a bug or am I missing something? Also, it works totally fine when displaying only text.
m

manueldidonna

09/15/2020, 1:22 PM
Maybe you're using 
imageResource
that is a synchronous method to retrieve the image. Try again using an image loading library like coil (search for Accompanist on Github)
s

Se7eN

09/15/2020, 1:25 PM
Works fine for smaller images now but the 128kb ones are still lagging a bit. Although not that much compared to the 
Image
composable
m

manueldidonna

09/15/2020, 1:26 PM
Can you share your code?
s

Se7eN

09/15/2020, 1:28 PM
Copy code
CoilImageWithCrossfade(
    data = R.drawable.kakashi,
    modifier = Modifier
        .width(60.dp)
        .aspectRatio(1f)
        .clip(CircleShape),
    contentScale = ContentScale.Crop
)
Yeah I guess the 
Image
is lagging because I was using 
imageResource
. The image I'm using:

https://i.pinimg.com/originals/2a/1c/5b/2a1c5bbb55d56e983ff7ba2b09caa556.jpg▾

Do I have to manually resize the image? I use Glide and it takes care of everything but maybe Coil is different?
c

Colton Idle

09/15/2020, 1:39 PM
I feel like I've had just 20 items of text and it has lagged for me. Not crazy bad, but lags worse than a RecyclerView. I know they said there are still optimizations coming for it.
s

Se7eN

09/15/2020, 1:43 PM
For me, it all works smooth until I add images
m

manueldidonna

09/15/2020, 1:45 PM
Yeah, the performances of the lazycolumn are significantly lower than the recyclerview. Check the hwui bars on the bottom of my sample app in debug mode after a scroll.
s

Se7eN

09/15/2020, 1:55 PM
Well I gotta learn to read those bars
m

manueldidonna

09/15/2020, 1:56 PM
t

tylerwilson

09/15/2020, 3:18 PM
I too just started using a LazyColumnFor, where each item is a ‘card’ with column, text, icon. And it is super chunky and slow. From setting a breakpoint, it seems to me that everything is getting drawn again on a scroll, which is not yet optimal…
j

Joost Klitsie

09/15/2020, 4:50 PM
are you guys loading the image asynchronously?
h

Halil Ozercan

09/15/2020, 5:01 PM
What I found about 
LazyFor
is that it doesn't really work well with dynamic height rows. This is also mentioned in the docs somewhere but I can't remember the exact place right now. So, be careful about changing height of the views according to a state change or request completion.
a

Andrey Kulikov

09/15/2020, 5:21 PM
hey. I am currently working on fixing how we handle the items size changes. so it will be fixed in one of the next releases hopefully
💯 7
regarding the performance, yes, we are going to explore it more and find ways to fix it. first thing you should do is to not load the images on ui thread. please use 
loadImageResource
instead of 
imageResource
. if after that the scroll is still laggy please file a bug with the sample app. it will help us debug! thanks
👍 2
l

louiscad

09/15/2020, 5:58 PM
Why not prevent 
imageResource
from being used at all if it can introduce UI performance issues?
👍 10
r

Rudolf Tammekivi

09/15/2020, 6:29 PM
I don't have a huge list so I fixed it by not using lazycolumnfor right now and instead fill it via items.foreach {}. I also had issues with scrolling when items are clickable when using lazycolumnfor.
😄 1
Powered by