Major performance issues using listview in web app

I'm running into an very annoying performance issue again and again.

Always when I add a listview with lets say 8 components (text, tags, buttons) within a list item container the app slows down significantly.

I have reduced the data source to just one single entry but it doesnt improve anymore. I cant barely edit my app anymore with fun - its a huge pain in the a**.

Please help me out - there must be 1. a way to solve it and 2. also others who experience the same issue??!

Hi Tom, just so we're all on the same page can you please attach an app export that demonstrates the problem?

In general. I also find the list view quite a resource hog. I love it and want to use it more than I do but I have to suffice with a table just to keep the speed up.

When it comes to diagnosing performance issues, the most useful things you can share with us are an export of the app JSON, network HAR data, and a performance profile.

In the meantime, you may be able to alleviate some of these performance issues by disabling the "WidgetGrid" feature.
image

Out of curiosity, which version of the "List View" component are you using?

Hi guys, attached you can find the JSON export you asked for.

I dont know how to find out which component version I'm using right now.

Jungpflanzen20mobil.json (420.1 KB)

When opening the app in editor mode, everything works just fine - because the listview isnt loaded from the beginning.

Just when you choose "Abholung, Zustellung or Versand" and pick a date - the listview get loaded, and editing slows down immediately.

Thanks for any help!

PS: I have to other apps where I would love to use the listview but still using the table component only to avoid that performance issues.

Thanks for sharing, @TomJaud! It looks like you're using the most recent version of the component and not the legacy one, which is good. Do you notice the same performance hit when interacting with the app as a user? Or is it largely limited to the editor experience?

Looking at your app, it's a little difficult to replicate the issue without connecting it to a data source. Which component is the primary culprit? Is it listView_plantListMobile? I almost wonder if the extensive filtering that you're doing in the "Data source" input is causing a bottleneck. Can you try breaking it out into a separate JS query or transformer? Or hard-coding a set of data just to see if the performance degradation persists?

yes that one!

About the js filter I've set - it was never a problem and I coulndt ever see a performance relevance with this.

But I have tried removing it and even changing the query so that the outcome would be just one line - didnt change anything.

I can see performance issues while editing AND when using the app from another user.

Could you please explain that?

Instead of writing out all of the JS code in the data source itself, I'd recommend writing out that logic in a JS query or transformer and then referencing it via the data source input.

image

Yeah got this but where is the exact difference talking about performance. I mean it's cleaner, but is it also faster?

Ah got it. :+1: I'm not sure that it would be significantly faster, but the idea is that simplifying the overall dependency graph of your app is one avenue for improving overall performance.

Thanks very much for your help so far and for the additional context @TomJaud! In order to make sure we are on the same page about this problem can you please provide an app export that includes placeholder data, or even better, a minimal repro for your issue?
Since the app you provided relies on queries against your database to exhibit the problematic behavior it's hard to be confident in our shared understanding of the problem.