Reverse scroll + Lazy Loading: how to make it work?

in a chat screen, I’m having trouble implementing lazy loading (loading as user scrolls) because it doesn’t show me the latest messages at the beginning and sometimes doesn’t let me see them.

I’m sure this has come up to people before, so I’m wondering how can it be done?
As conversations get bigger, not having lazy loading will affect the chat’s performance and experience.

I haven’t found a solution for this issue in the forum.
Lazy loading + reverse-scroll makes the chat present the first 20 messages before loading, and not the 20 most recent as it should.
Is the only solution to have a chat that is not reverse-scroll? That’d be a weird UX.

Just seeing your post.
Got the exact same issue.
Did you find a way in the end?

I haven’t found one I truly trust to perform well, so I just left the chat with the newest messages on top.
I’ve gotten used to it by now tbh.

1 Like

Hi @afonso @StevenU,

I experimented with this for some time and didn’t find the proper way for the lazy loading to work, together with the reverse-scroll screen.

Possible workaround could be limiting the number of messages in the “main” chat screen, and then have “view history” button on the top, which in turn leads to chat history screen. There were couple of threads about this on the forum.

Best regards, Victor.

Hi @Victor,
Thanks for letting us know.
I’ll just leave it as is for the moment :slight_smile:
I’ve added a feature request just to keep it on the radar: Auto-loading lists for reverse scroll screen (chat) | Voters | Adalo

1 Like

Thanks for the advice @Victor .

For now I have the newest ones on top, like a normal list, and I’ve been wondering if there would be any difference in performance between having lazy loading and having a maximum number of items shown with a “view history” button.
Do you have any idea? Would one be more demanding than the other?

I’ve been seeing that every little detail in my chat screen matters, in terms of performance.

1 Like

Hi Afonso,

I’m optimising my chat screens at the moment so would be very interested in hearing what works for you!
Especially for old android phones it is hard to get it to an acceptable level. I’m even removing shadows right now haha.

The ‘worst’ part left is the keyboard popup. Takes almost three seconds on 4 year old basic android phone.

1 Like

Hi @afonso,

Well, I don’t have an exact answer, but thinking logically (all assumptions below are based on my understanding):

  • lazy loading works like “load ~50 items, if user scrolls down to the bottom - load ~30 items more” and so on. So, it will work fine… until you have a long list of loaded items; there as I think the app itself will start working slowly (imagine 5000 items loaded and how much memory they consume).
  • maximum number of items, if you set “Maximum” in the list, has also some downsides - I’ve noticed some glitches when the data is updated dynamically.

So as for me I’d implement a list with IDs for each message, then limit the number of items in the list by last ID - 30 (for instance). And all older messages show via history.

Don’t have the real app at hand to test - this is theory :slight_smile:

Best regards, Victor.

1 Like

Hi @Victor ,
Yes, that seems logical.
(I think lazy loading in Adalo is 20 items at a time)

My only issue with the ID strategy is that it requires the system to check the ID for each message of that conversation and I imagine it will slow things down (also, just theory; haven’t tried it), don’t you think?

I currently have lazy loading and I’m trying every other possible detail and workaround to improve my chat’s performance.

  • I implemented workarounds to no longer have auto refresh in the chat
  • I’ve removed the differentiation between the chat balloon design of a Sent and a Received message

Thanks!
Afonso

2 Likes

Hi @afonso,

It could be a good question to someone from Adalo Development team - which queries perform faster than others. And also how the queries are performed in general.

I have an experimental app with 9560 records (Name+Address+Phone) and decided to make some tests in PWA. At a glance: Lazy Loading works (though quite laggy), filter by ID doesn’t work at a first time but works after (seems that list filtering takes long time). All PWA is quite slow.
It’s all like a blackbox - some insights from someone more knowledgeable could be very useful :slight_smile:

Best regards, Victor.

Hi @Victor , @afonso , @StevenU

Thank you for bringing this up, so it triggers me to implement paging in message list.


You can test them, if you like.

To change the number of messages in list, it is in Edit Profile

By default, when new user sign up, this property is filled with 20.

Please let me know if there is something you are not hoping.

1 Like

Hi @Yongki,

Great job! :clap:

Unfortunately, the problem here is that all this paging & filtering stops working properly when you have several thousands records. It seems that Adalo filters the records on the frontend, which (at least in case of PWA), is becoming quite slow in case of large number of records. I did similar paging experiment on 9K+ records, and the results were not acceptable even for the MVP app :frowning:
I’d be happy to discover that I’m wrong… but so far my personal opinion is that lazy loading is the most feasible option.

Best regards, Victor.

1 Like

Yes, there is something needs to be done for the list to not load unnecessary things, it could be called lazy loading or slim loading.

I have tried to almost 4k records with paging like this and it took almost 7 seconds to move to another page, but for 500 records, it takes less than 3 seconds.

Well, I hope that creating messages will be gradual, people start chatting with hundreds messages first, not going to thousands.

Anyway, happy to share what I have done.

2 Likes