Outsystems Mobile - List Slows down as user scrolls down with Scroll Ending

Outsystems Mobile - List Slows down as user scrolls down with Scroll Ending

  

In our Mobile Application, we use a List that displays users with a ListItem. The list works fine, but I've received feedback that the list slows down when it has a large number of users. The List starts with 10 users, showing a very small image ( 5576 bytes is the largest I found ) and a name. Everytime the user triggers the OnScrollEnding, the app asks the server for 10 more. So far, so good. 

But after 10 ScrollEndings (100 elements), the list slows down to a crawl. You cannot even see dragging anymore. You scroll up, the screen freezes, then draws again after a while. I thought, 'It's because it has too much data'. However, I found that regardless of how many items you have, the list only slows down when you scroll down enough. 

If the list is slow with 100 elements, it only happens near the 80th element. Even with 100 elements, the list works fine for the first 30 elements or so. It doesn't seem to be related to the size of the list, but instead it seems related to how low the scroll is.

In the back of my head I seem to recall reading that the Android/iOS is optimized to only regard data within lists if said data is seen by the user, so a list of 100 where only 10 elements are visible behaves as a list of 10. I cannot confirm this! But is it possible that this is happening with Outsystems for elements that are below the visible elements (they are ignored) but not with the elements that are above ( they are drawn but hidden? )

I've run a test and start with 100 elements on the list, to rule out the chance that multiple server calls could be slowing the system down, but the results is the same. 

Also, Scroll ending is not being called multiple times and cloughing the system, I've run this on debug. It is called only when it should.

The list actually displays a block that displays the information in a 'pretty way', and said bock has some if statements, because it's reused elsewhere, can that cause such a decrease in performance?

I'm still working on this, but I'd appreciate any feedback or words of wisdom related to this issue.

Much Obliged in advance

Solution

Hi Christian,

My understanding is that when you scroll down, new elements are added to the existing list, but older elements are not removed from it. So your list gets longer and longer, I can imagine this would cause some problems, though I don't think it's for the exact reasons you speculate about. In fact, 100 elements doesn't seem right for a slow-down, I could image something happening with > 1000, not with 100. Without having the code of your app however, it's difficult to tell what's going wrong.

Solution

Kilian Hekhuis wrote:

Hi Christian,

My understanding is that when you scroll down, new elements are added to the existing list, but older elements are not removed from it. So your list gets longer and longer, I can imagine this would cause some problems, though I don't think it's for the exact reasons you speculate about. In fact, 100 elements doesn't seem right for a slow-down, I could image something happening with > 1000, not with 100. Without having the code of your app however, it's difficult to tell what's going wrong.

Hi Killian, I think it isn't directly connected to the length of the list because when I scroll down to the 80th element, for example, of the list with 100 elements ( my Android is old, other team members have the same problem but with greater lists ), the phone slows down. However, once I scroll up, the list doesn't lose any elements ( still as 100 ) but the app reacts faster. When I'm on the 30th element, it seems like the list as 30 elements, when I'm on the 80th element, it feels like it has 80 elements, even if it always had 100. 

However, I've investigated this, and I've found lists much greater than mine, that work just fine. I've tried to create a sample app with this issue, but to no avail. It doesn't happen. Now I'm thinking it might be CSS actually, but it is a bit too soon. Code-wise, I've found nothing wrong (forgive me, I work for a company and cannot post the code here).

Regardless, the behavior seems to be, the lower I go in the list, the slower it gets. Even with a big list, the first elements are fine. The list has a Block that display the information received by an Input Parameter, which is a structure, with a small image and some text, and the block has no server calls.

I should say that I've thought about limiting the list's size, but the list only offers an onScrollEnding, and not an onScrollTop. Granted, I'm capable of coding that, but I wanted to limit the use of Javascript. 

I'll keep writing my findings here, in hope that at the very least someone with the same problem in the future can find help. Should you have any suggestions or ideas, please let me know.

Thank you.


TL;DR

Doesn't seem to be a platform bug, didn't find out why it happened, solved it by limiting the size of the list.

Full Version

I regret to say that I have not found the cause for the slow down. I confirm that it was due to the scroll, however, it only happened in that specific application. Any try to replicate the problem was in vain, and so, it doesn't seem to be an Outsystems bug. 

I've instead limited the amount of users the list has at any given time. Once the list exceeds a specific limit, it starts to remove elements from it's own top and inserting them in a side list. Once the user scrolls back to the top, the app returns a specific number of them to the top of the list through ListInsert(Position: 0).

I had to use Javascript to catch a 'ScrollTop' kind of event, and to maintain the list focused on the right element.

Thank you.

Hi Christian,

Thanks for the feedback. Really weird what's going on. You could try to contact OutSystems Support about it, not for a quick solution, but perhaps there's some edge case they didn't think about and it is a Platform (or SilkUI) bug. Anyway, glad you got it solved, albeit with some nasty workarounds. Happy coding!