How to make this UI performant? Naively ofcourse ...

# compose

[ursus]

How to make this UI performant?

Naively ofcourse its trivial, its a Column of N Cards, where each Card is a Column of M Items
Making it LazyColumn of N Cards helps, however, each Card can be unboundedly big (i.e. number of Items is not fixed)

Is there a way to make the each item within Card recycleable?

Or try to fake it via flattening it into List<ListItem> and adding horizontal ui to each item to make it appear its nested in a parent, when its not?

[Chris Sinco [G]]

Have you tried to build this already and have seen the performance issues?

[ursus]

No, just asking whats the go to thing, as I understand scrollable column as equivalent to ScrollView, where all ui elements are in memory, which doesnt scale since I can have N items, and making it recycleable is my instinct

wrong assumptions?

[Chris Sinco [G]]

I’m not sure, but I would try it out first? Deep hierarchies are handled better in Compose I think, so it might not be as slow as you anticipate. But I’d try it first.

[ursus]

I dont follow. Is it okay to have Column of 1000 items? I thought its what LazyColumn is for

[Chris Sinco [G]]

Oh I don’t think so - I was thinking you’d work with all LazyColumns

[Chris Sinco [G]]

I would also consider, from a design POV, that maybe to break up the UI into separate screens?

[ursus]

yea but how, is it a LazyColumn of CardGroups, or is whole screen on big LazyCoulumn

I dont see how to do the latter, while each item looking like its nested inside a card group

[Chris Sinco [G]]

I would start with making the lists that benefit from recycling / virtualizing behavior to be LazyColumn/Row. Sounds like those are the columns in the Cards and the cards themselves. Then for the top-level column and row of cards, use just Row/Column.

[Chris Sinco [G]]

I don’t know the full extent of the design you are trying to implement so my advice is to try it first with the layouts that are there and see where things break down

[ursus]

Are you sure about that? That UI can be N cards tall and each card can as well be N items tall, i.e. in theory you could get just 1 card, with 100 items in it

And me being a Compose noob, this worries me, as I now imagine 100 Views in memory at once (compose equivalent of it)

Which I believe would lag a lot to layout

[Chris Sinco [G]]

It could but I wouldn’t be sure unless I tried since deep hierarchies are handled differently in Compose compared to Views. Also, from a UX POV it seems the user would have issues navigating through this many items on a single screen? That is why I advised to step back and even rethink the design, which can in turn simplify the implementation.

[Chris Sinco [G]]

Have you tried to implement this in Compose yet?

[ursus]

Not yet, I just seen the Bots app ad where the screenshot is from and I remembered I had to work on such UI in the past and it was a royal pain in the ass to do the grouping performant. Twitter threads ui is also a similar issue

But is this really about depth? Its just a list of cards where each card is list of items, so 2 levels. I was worried about the total item uis in memory, but yea I dont see how Compose does stuff yet

thanks