I am working on a web app that has to show a list of products in a mobile browser.
The list is between 50-150 items.
My first approach was a listbox, but a listbox has many styling limitations in web apps, as you can’t (for example use different fonts in one cell) and mainly in mobile browser the vertical scrolling has no inertia effect. Meaning is pretty slow to browse and kills the overall user experience, so I ditched the listbox aproach in favor of a list of containers. The containers are way more customizable and I made them look good. Also, the scrolling speed is fast, and hast this inertial feeling that users are so used to…
so now, I am stuck loading 150 containers which only have 2 labels and a small imagewell for the 2-3 kb thumbnail. The issue with this is that it takes a couple fo seconds to load. I DID put a spinning progress bar/wheel etc… but I still don’t like how it feels as most of the users who tried it felt… “oh… it’s slow… did it get stuck?” and start to tap (click) repeatedly waiting for something to happen.
Anyway, I checked in chrome why it takes so long to load and seems the framework is sending (at least) one ‘shown’ event per container. Now, I triple checked I was not using that event, but it still sending them… and obviosuly that makes the app lag when loading the list of items.
I also thought about using web sdk to develop my own table/listobx… ¿Could that be a solution? but it’s a bit beyond my capabilities now… specially for I wouldn’t know how to return the clicked row to the server…
Anyway… How do experienced xojo web app developers deal with such average-long lists that have to scroll smoothly on mobile browsers ?