Hello Bruno,
Since I last commented here, I have found ways to make custom lists load quite fast (as fast as iOS) on Android. However, please note that app performance in general is also dependent on the phone’s capabilities.
Adalo apps on iPhone 6/7 will not perform as fast as it would on iPhone 13/14. Same thing goes for Android devices.
Generic Tip: Use Standard lists everywhere you can. Limit the use of Custom Lists as much as possible.
So lets talk about what we can control to make our Adalo apps faster.
At the end of the day, custom lists are super powerful and can be critical to your UI/UX as standard lists don’t provide what you might need.
Tip #1 Image sizes in custom lists are key to the performance of the list
If you are using Adalo DB to host images, try your best to reduce the image size (in kb) before uploading. When the app loads those images, adalo by default applies “auto=compress” to all images in the DB so it optimizes the size. Having said that, I have found that this is good but can also be improved.
What I do is I add more IMGIX parameters at the end of the image URL so it reduces the image size even further, without sacrificing quality. Snapshot below for reference.
If you are using External DB (like Xano or Airtable), then IMGIX parameters won’t work there by default. The best you can do is reduce the size of the image prior to uploading it onto those databases.
Tip #2 Reduce Visibility Conditions for components inside the Custom List
Say you have a custom list that contains a Text Field, an Image, and a button. Most likely, you are building a custom list because you want to have control over the design of the list + the conditions under which it displays the information. From experience, designing a list that consistently displays all its components WITHOUT the use of conditional visibility has served me very well.
Tip #3 Use Adalo’s standard components inside the Custom List instead of custom/private components
Adalo’s standard components perform quite well (text fields, images, icons, toggles, etc). Reduce the need to use any custom components as not all are optimized for best performance. But you can give it a shot and test using trial and error
Tip #4 Minimize collection DB items a list has to load by using filters
Another general advice for all lists is to filter what the list will fetch from the DB. In my experience, loading 20 DB items has been pretty good. You can use Lazy Scroll to load items as users get down the list. But I do not like it so much as there is no loading spinner or any indication (for the user) that the list is loading more items. Some others solve this by adding a button, others have build custom components. But I like to keep it simple, and just do my best to not load >20 DB items in a list on 1 page.
Tip #5 Do not use Shadows
Try not to set Shadows on for any rectangles or components that allow it. I have found that shadows do not perform that well on Android devices in general.
Tip #6 Design on small screens and center your list
I set the width of all my screens to 375 so it can match pretty much most small phone devices.
Responsive design is a big topic and I won’t dive into it here, but what you should do is design on small screens (i.e. width 375) and center your items in the middle of the screen as much as you can.
This way, Adalo can have an easier job doing its responsive design on bigger user devices.
This is another one of those “Trial and Error” kind of tips that would require few iterations till you find the best option for your designs.
Hope this helps! Let me know if you still have any questions.
