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

**URL:** https://forum.adalo.com/t/reverse-scroll-lazy-loading-how-to-make-it-work/15956
**Category:** Design
**Created:** [August 13, 2021, 9:23am UTC](https://forum.adalo.com/t/reverse-scroll-lazy-loading-how-to-make-it-work/15956 "2021-08-13T09:23:48Z")
**Posts on this page:** 17
**Page:** 1

<div class="post-metadata">

### Author: ![afonso](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/afonso/32/19120_2.png) [@afonso](https://forum.adalo.com/u/afonso)
#### Post date: [August 13, 2021, 9:23am UTC](https://forum.adalo.com/t/reverse-scroll-lazy-loading-how-to-make-it-work/15956/1 "2021-08-13T09:23:48Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![afonso](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/afonso/32/19120_2.png) [@afonso](https://forum.adalo.com/u/afonso)
#### Post date: [August 16, 2021, 9:30am UTC](https://forum.adalo.com/t/reverse-scroll-lazy-loading-how-to-make-it-work/15956/2 "2021-08-16T09:30:00Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![StevenU](https://avatars.discourse-cdn.com/v4/letter/s/ccd318/32.png) [@StevenU](https://forum.adalo.com/u/StevenU)
#### Post date: [September 7, 2021, 9:52pm UTC](https://forum.adalo.com/t/reverse-scroll-lazy-loading-how-to-make-it-work/15956/3 "2021-09-07T21:52:59Z")

</div>

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

---

<div class="post-metadata">

### Author: ![afonso](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/afonso/32/19120_2.png) [@afonso](https://forum.adalo.com/u/afonso)
#### Post date: [September 7, 2021, 11:14pm UTC](https://forum.adalo.com/t/reverse-scroll-lazy-loading-how-to-make-it-work/15956/4 "2021-09-07T23:14:39Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Victor](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/victor/32/2054_2.png) [@Victor](https://forum.adalo.com/u/Victor)
#### Post date: [September 8, 2021, 8:52am UTC](https://forum.adalo.com/t/reverse-scroll-lazy-loading-how-to-make-it-work/15956/5 "2021-09-08T08:52:34Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![StevenU](https://avatars.discourse-cdn.com/v4/letter/s/ccd318/32.png) [@StevenU](https://forum.adalo.com/u/StevenU)
#### Post date: [September 8, 2021, 9:10am UTC](https://forum.adalo.com/t/reverse-scroll-lazy-loading-how-to-make-it-work/15956/6 "2021-09-08T09:10:13Z")

</div>

Hi @Victor,  
Thanks for letting us know.  
I’ll just leave it as is for the moment 🙂  
I’ve added a feature request just to keep it on the radar: [Auto-loading lists for reverse scroll screen (chat) | Voters | Adalo](https://adalo.canny.io/feature-requests/p/auto-loading-lists-for-reverse-scroll-screen-chat)

---

<div class="post-metadata">

### Author: ![afonso](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/afonso/32/19120_2.png) [@afonso](https://forum.adalo.com/u/afonso)
#### Post date: [September 8, 2021, 9:18am UTC](https://forum.adalo.com/t/reverse-scroll-lazy-loading-how-to-make-it-work/15956/7 "2021-09-08T09:18:29Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![StevenU](https://avatars.discourse-cdn.com/v4/letter/s/ccd318/32.png) [@StevenU](https://forum.adalo.com/u/StevenU)
#### Post date: [September 8, 2021, 9:23am UTC](https://forum.adalo.com/t/reverse-scroll-lazy-loading-how-to-make-it-work/15956/8 "2021-09-08T09:23:14Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![Victor](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/victor/32/2054_2.png) [@Victor](https://forum.adalo.com/u/Victor)
#### Post date: [September 8, 2021, 9:45am UTC](https://forum.adalo.com/t/reverse-scroll-lazy-loading-how-to-make-it-work/15956/9 "2021-09-08T09:45:47Z")

</div>

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 🙂

Best regards, Victor.

---

<div class="post-metadata">

### Author: ![afonso](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/afonso/32/19120_2.png) [@afonso](https://forum.adalo.com/u/afonso)
#### Post date: [September 8, 2021, 11:04am UTC](https://forum.adalo.com/t/reverse-scroll-lazy-loading-how-to-make-it-work/15956/10 "2021-09-08T11:04:14Z")

</div>

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

---

<div class="post-metadata">

### Author: ![Victor](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/victor/32/2054_2.png) [@Victor](https://forum.adalo.com/u/Victor)
#### Post date: [September 14, 2021, 2:38pm UTC](https://forum.adalo.com/t/reverse-scroll-lazy-loading-how-to-make-it-work/15956/11 "2021-09-14T14:38:16Z")

</div>

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 🙂

Best regards, Victor.

---

<div class="post-metadata">

### Author: ![Yongki](https://avatars.discourse-cdn.com/v4/letter/y/7c8e57/32.png) [@Yongki](https://forum.adalo.com/u/Yongki)
#### Post date: [September 15, 2021, 8:30am UTC](https://forum.adalo.com/t/reverse-scroll-lazy-loading-how-to-make-it-work/15956/12 "2021-09-15T08:30:32Z")

</div>

Hi @Victor , @afonso , @StevenU

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

> **[Group Chat Template v3.0](https://previewer.adalo.com/96fe904a-e808-4db8-97e2-61d1e8010335)**
>
> Paged Messages-Public

 ![Screen Shot 2021-09-15 at 3.27.59 PM](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/2X/8/8c5b71a0b0dd30dd249ec53b18d6eea5925fc638.png)  
 ![Screen Shot 2021-09-15 at 3.28.16 PM](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/2X/7/7b08ffd4f9b527d4ae88479febbbd207a0618802.png)

You can test them, if you like.

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

 ![Screen Shot 2021-09-15 at 3.22.12 PM](https://us1.discourse-cdn.com/flex020/uploads/adalo/original/2X/e/ebd7d3f3c13b9755237554b01f3b9777d10cd4ca.png)

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.

---

<div class="post-metadata">

### Author: ![Victor](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/victor/32/2054_2.png) [@Victor](https://forum.adalo.com/u/Victor)
#### Post date: [September 15, 2021, 8:54am UTC](https://forum.adalo.com/t/reverse-scroll-lazy-loading-how-to-make-it-work/15956/13 "2021-09-15T08:54:37Z")

</div>

Hi @Yongki,

Great job! 👏

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 ☹  
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.

---

<div class="post-metadata">

### Author: ![Yongki](https://avatars.discourse-cdn.com/v4/letter/y/7c8e57/32.png) [@Yongki](https://forum.adalo.com/u/Yongki)
#### Post date: [September 15, 2021, 2:47pm UTC](https://forum.adalo.com/t/reverse-scroll-lazy-loading-how-to-make-it-work/15956/14 "2021-09-15T14:47:27Z")

</div>

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.

---

<div class="post-metadata">

### Author: ![ufc500](https://avatars.discourse-cdn.com/v4/letter/u/b77776/32.png) [@ufc500](https://forum.adalo.com/u/ufc500)
#### Post date: [May 4, 2022, 11:20pm UTC](https://forum.adalo.com/t/reverse-scroll-lazy-loading-how-to-make-it-work/15956/15 "2022-05-04T23:20:52Z")

</div>

Is their a way I can purchase a plug in that could load lists better than I’m willing to pay good money for that feature? I’m making a group chat where users are probubly going to have messages into the thousands so I really need a solution to this problem

---

<div class="post-metadata">

### Author: ![afonso](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/afonso/32/19120_2.png) [@afonso](https://forum.adalo.com/u/afonso)
#### Post date: [November 23, 2022, 12:22pm UTC](https://forum.adalo.com/t/reverse-scroll-lazy-loading-how-to-make-it-work/15956/16 "2022-11-23T12:22:12Z")

</div>

Does anyone know if there are any news regarding this issue?

I’ve tried it again and the screen goes up and down a couple of times before settling on the latest list item.

---

<div class="post-metadata">

### Author: ![christianakslrod](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.adalo.com/christianakslrod/32/25511_2.png) [@christianakslrod](https://forum.adalo.com/u/christianakslrod)
#### Post date: [October 26, 2023, 10:32am UTC](https://forum.adalo.com/t/reverse-scroll-lazy-loading-how-to-make-it-work/15956/17 "2023-10-26T10:32:50Z")

</div>

I’m also having this problem. Is there a solution in October 2023?
