containers list - slow. Ideas for mobile ?

Targets Web
1

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 ?

2

I created my WebContainers off-screen (Top and Left = -300), embedded them on the Canvas then, once they were all embedded, moved them into view. I also placed a Timer in each WebContainer (RunMode.Single) that was responsible for resizing the thumbnail and text. That way it works like some old PCs that show a list of generic icons in a folder list, then populates them over time. I tested it with 160 icons and it was OK. It will never be as fast as a desktop app.

3

Thanks David.
I just checked eBay mobile site and they only load about 30 rows each time. (The only thing I’m not quite sure how to do would be to proceed with the follow container load once the scroll has reached the bottom (the last row). That’s how they make it work. Loading in batches of hundereds may be too much…

Will keep on trying tomorrow.
Thnx

5

Is it not possible to completely override the shown events ? I don’t need vtgem! No matter when I load the containers it always causes a bottleneck…

6

if possible you should wait for web 2.0 ? the weblistbox has been completely rewritten.

7

Yeah, I know. But wep 2.0 is always coming “soon”… And also i have no way to know if the new listbox would be a solution for me.

8

Well, seems a “lazy loading” model is working in this case. I decided to load only 10 rows each time. That made it smoother to the user…