I am working on a progressive web app (PWA) project which contains a very long list of items. These items include: avatars, names, text descriptions and buttons. Ideally I want this project to work on an tablet (mainly iPad).
Requirements:
- The list has to be ordered alphabetically.
- Each item has a dynamic height.
- Scrolling must be smooth, same as in the Contacts iOS app.
- Each group of people who start with the same letter, will have a title of the letter, same as in the Contacts iOS app.
- There is an alphabetical list on the right side which should link to the relevant group letter in the list.
- The alphabetical list has to support smooth scrolling same as in the Contacts iOS app.
See attached screenshot for more information.
I am using only jQuery, Bootstrap and iScroll, no other frameworks.
I have managed to set most of it up but got into few issues:
When the list is too long, the PWA crushes, probably as a result of memory issue. I have edited some parts of iScroll Infinite, which basically removes most of the items from the DOM when they are not used but that creates some UI issues.
Any idea how can I solve these issues?
I have made some examples in order to be more clear as I think it’s quite hard to just explain the issues above without showing it:
With extra CSS:
https://shakedos.com/examples/list/pwa.php
Without CSS:
https://shakedos.com/examples/list/pwa-nocss.php
Screenshot:
