App slows and UI freezes on inserts and removals

[troyberg]

I'm having an issue where, whenever I make an insert, or even a removal of a document, my UI hangs up, sometimes for several seconds or more, before the user can take any other action. It seems to be most apparent when inserting or removing documents with base64 image data, although I am resizing those images before inserting so that they are, on average, about 90-150KB.

I didn't notice this issue at first because on iOS or in desktop browsers, the hang-up only seems to last about half a second to a full second, but on Android devices we've noticed it lasting, often times, 5-8 seconds.

My collections are initialized on startup as ground collections.

Meteor.startup(function() {
   Orders = new Ground.Collection("Orders");
   Details = new Ground.Collection("Details");
   Photos = new Ground.Collection("Photos");
   Profiles = new Ground.Collection("Contacts");
   AppRegistry = new Ground.Collection("ApplicationRegistry");
   UserSettings = new Ground.Collection("UserSettings");

  Ground.Collection(Meteor.users);
}); 

Subs are made inside of a tracker once Ground is ready...

Tracker.autorun(function () {
    // Make tracker reactive to user logging in.
    // And use this object to get user's sub ID 
    var loggedUser =  Meteor.users.findOne(Meteor.userId());

    if(!loggedUser) {
    return;
    }

// Most subs made with the users's subscription ID that we add to their users collection record when they register
    if(Ground.ready) {

      var appSub = Meteor.subscribe('appregistry', {
        onReady: function() {console.log("AppReg ready");}
      });      

      var ordersSub = Meteor.subscribe('orders', loggedUser.SubscriptionID, {
        onReady: function() {console.log("Orders ready");
        Session.set('ordersStatus', true);
        }
      });
      var detailsSub = Meteor.subscribe('details', loggedUser.SubscriptionID, {
        onReady: function() {console.log("Details ready");
        Session.set('detailsStatus', true);
        }
      });
      var photosSub = Meteor.subscribe('photos', loggedUser.SubscriptionID, {
        onReady: function() {console.log("Photos ready");
        Session.set('photosStatus', true);
        }
      });
      var profilesSub = Meteor.subscribe('profiles', loggedUser.SubscriptionID, {
        onReady: function() {console.log("Profiles ready");
        Session.set('profilesStatus', true);
        }
      });
      var settingsSub = Meteor.subscribe('usersettings', loggedUser.SubscriptionID, {
        onReady: function() {console.log("Settings ready");
        }
      });      

    }

});

There is nothing special about the pubs other than using the subscriptionID from the subs to return appropriate data.

After running the Profiler in Chrome to observe what goes on during an insert, I noticed some functions coming from Ground DB, as well as some of its dependencies, taking up a considerable amount of time, so I'm assuming this is what's causing my UI hang-ups.

Has anyone seen this type of behavior, or have a solution maybe? Some sort of workaround or maybe something I've overlooked in the documentation.

I know @raix maintains quite a few packages and probably has a lot on his plate, but any advice would be greatly appreciated, as whether or not I can continue with Meteor on this project is solely based on whether or not I can get offline collections.

[raix]

I've released 2.0.0-alpha.1 Notes about the new version, migration and what it doesn't do - The issue might be resolved in that version, let me know what you think

[raix]

Let me know if this is still an issue in 2.0.0-rc.5

[troyberg]

Hi @raix! Sorry I left this open for so long! The issue here was that the image data URIs we were storing were just too big to be storing in localStorage due to its blocking nature. Seems like that should have been pretty obvious to me looking back on it :/

Anyway, we came up with a solution to our problem, where we now store our images on the device(our app is strictly mobile) in SQLite, separate from the rest of our data in order to keep them available offline. So unfortunately, I never got to test 2.0 with our images. I'd imagine you've got it fixed now with localForage though!

Btw, I am using 2.0 to keep the rest of our Meteor data offline, and loving it so far! What's new in 2.0.0-rc.5?