[SOLVED] Virtual List takes approx. 1 Minute to be created

1

Hi everyone,
i am creating an Android app with more than 700 entries inside a WebSQL.
These entries are created on the INIT of the app and checking the Chrome Developer Console,
i can see that these entries are inside my app within a second or two.

From the side panel of my app, users can go to a sub-page where all the 753 entries are shown
as a Fraework7 Virtual List.
The problem is: the creation of this list takes everytime between 40 seconds and a minute.
Once they are there, i can click on each entry and everything works as it should be.
I am just wondering why the creation takes this long.

This is my code (insid the router of the page in an “on” event:
pageInit: function (e, page) {

      var virtualList = app.virtualList.create({
        el: '.virtual-list-charts',
        items: [],
        searchAll: function (query, virItems) {
          var found = [];
          for (var k = 0; k < virItems.length; k++) {
            if (virItems[k].virTIT.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(k);
          }
          return found;
        },
        height: 73,
        itemTemplate:
          '<li class="historyRow">' +
            '<a href="#" class="item-link item-content no-chevron listItem" data-chartid="{{virID}}" data-popup=".popupChart">' +
              '<div class="item-inner">' +
                '<div class="item-title-row">' +
                  '<div class="item-title"><div class="item-header">{{virCAT}} {{virTYP}}dd</div>{{virTIT}}</div>' +
                '</div>' +
              '</div>' +
            '</a>' +
          '</li>',
      });

      db.transaction(function (tx) {
        tx.executeSql("SELECT * FROM charts", [], function(tx, results) {

          for(var i = 0; i < results.rows.length; i++) {
            virtualList.appendItem({virID: results.rows.item(i).id, virTIT: results.rows.item(i).tit, virTYP: results.rows.item(i).typ, virCAT: results.rows.item(i).cat});
          };

        });
      });

    },
2

Have you tried putting console.log messages in the callbacks, to determine if maybe the transaction or the query itself takes very long time for some reason?

For example:

console.log('Opening transaction');
db.transaction(function (tx) {
    console.log(Transaction ok');
    tx.executeSql("SELECT * FROM charts", [], function(tx, results) {
        console.log('Query done');
2 Likes
3

Ok, this is strange!
All three logs appear within one second but the list is not created. It took approx. 40 seconds until all items popped up.

4

And how about the delay when just pushing like 15 or 50 items? Does it still take 40 seconds to create the list?

for(var i = 0; i < results.rows.length && i < 15; i++) {
2 Likes
5

Super fast!
I just added your line to load only the first 15 and they appear within a second. So does this mean, that i can not add those many to the virtual list?

6

Well, that’s where virtual lists are ment for :slight_smile: I don’t know if the itemTemplate is recompiled for each record. You could try to create a Template7 compiled function and passing that into itemTemplate, instead of the html.

Put like this above 'var virtualList = …"

var liTemplate = Template7.compile(' put your li html here ')

And then:

...
height: 73,
itemTemplate: liTemplate,
....
2 Likes
7

Your solution had the same result. So what i did now, was to create just one list-item outside of the transaction loop and voila: that ONE tiem appears imediately. So it looks like something is wrong with the loop. This is what i did now:

          db.transaction(function (tx) {
        tx.executeSql("SELECT * FROM charts", [], function(tx, results) {
          hoho = [];
          for(var i = 0; i < results.rows.length; i++) {
            //virtualList.appendItem({virID: results.rows.item(i).id, virTIT: results.rows.item(i).tit, virTYP: results.rows.item(i).typ, virCAT: results.rows.item(i).cat});
          };
          virtualList.appendItem({virID: '3', virTIT: 'hey there!', virTYP: 'line', virCAT: 'cinema'});

        });
      });
8

[SOLUTION]
So it looks like as Tim said, that the re-rendering affects the virtual-list. What i did now was this:

  1. Created a new array called hoho - yeah, i know - sorry :wink:
  2. Then i push the results of my executeSQL into that array
  3. after the hoho array is filled with the info i add this to the list via the appendItems method

Thanks a lot Tim for your support and time!

1 Like
9

Yes, no need to use appendItem to append single item to vl, as every operation triggers recalculation of VL. So right, just collect all items and insert them all at once