Page change takes 7-8 seconds to load new data

[ravisojitra-apex]

I have around 27k records in remote hosted DB. I have integrated this package to display all data and it works fine but when changing page with default per page to 100, it takes too much time and increases when page changes. Below is my setup for tabular:

new Tabular.Table({
  dom:'lrtip',
  stateSave:true,
  bStateSave:true,
  deferRender:true,
  name: 'Patients',
  collection: Meteor.users,
  autoWidth: false,
  stateDuration:60*60*24,
  extraFields: ['isInformed', 'roles'],
  order: [[5, 'desc']],
  paging:true,  
  throttleRefresh:5000,
  limit:10,
  stateLoadCallback: function (settings, callback) {  
    var state = Session.get('state');
    if( !state ){
      state = {
        length:10,
        start:0,
        time:new Date(),
        columns:settings.aoColumns
      }      
    }
    return state;
  },
  infoCallback: (settings, start, end, max, total) => {
    Core.DataTables.Translate();
    return TAPi18n.__('showing_x_x_of_x_entries', `${start} - ${end}` + ' '+TAPi18n.__('of')+' '+`${total}`);
  },
  selector(userId) {
        return { 'profile.userType': 'patient' };
  },
  allow(userId) {
    const user = Meteor.users.findOne(userId);
    if (! user) {
      return false;
    }
    const userType = user.profile.userType;
    if (userType === 'user' || userType === 'superadmin') {
      return !! Meteor.call('currentUserHasPermissions', userId, ['view-patients']);
    }
    return !! Meteor.call('currentUserHasPermissions', userId, ['update-profile']);
  },
  columns: [
    {
      data: 'profile.idNumber',
      titleFn: function() {
        return TAPi18n.__('patient_number');
      },
      render: function (prop, type, doc) {
        if (! prop)  {
    			return TAPi18n.__('unknown');
    		}
    		return doc.profile && doc.profile.countryInsurance ? doc.profile.countryInsurance + prop : prop;
      }
    },
    {
      data: 'profile',
      titleFn: function() {
        return TAPi18n.__('name');
      },
      render: function (prop, type, doc) {
        if (! prop) {
    			return '';
    		}
        return prop.firstname ? `${prop.firstname} ${prop.lastname}` : prop.lastname;
      }
    },
    {
      data: 'profile.gender',
      titleFn: function() {
        return TAPi18n.__('gender');
      },
      render: function (prop, type, doc) {
        const male = TAPi18n.__('male'),
              female = TAPi18n.__('female'),
              unknown = TAPi18n.__('unknown'),
              other = TAPi18n.__('other');

        if (! prop) {
          return '';
        }

        switch (prop) {
          case 'm' :
            return male;
            break;
          case 'f' :
            return female;
            break;
          case 'u' :
            return unknown;
            break;
          case 'o' :
            return other;
            break;
        }
      }
    },
    {
      data: 'profile.birthdate',
      titleFn: function() {
        return TAPi18n.__('birthdate');
      },
      render: function (prop, type, doc) {
        let result = "";
        if( prop ) {
          result = moment(prop, "DD/MM/YYYY").format("L"); 
        }
        return result;
      }
    },
    {
      data: 'account.cardNumber',
      titleFn: function() {
        return TAPi18n.__('card_id');
      },
      render: function (prop, type, doc) {
        return prop || '';
      }
    },
    {
      data: 'account.activatedAt',
      titleFn: function() {
        return TAPi18n.__('activated_at');
      },
      render: function (prop, type, doc) {
        if (! prop) {
          return '';
        }
        return moment(prop).format('L');
      }
    },
    {
      data: '_id',
      titleFn: function() {
        return TAPi18n.__('questionnaire_progress');
      },
      tmpl: Meteor.isClient && Template.questionnaireProgress
    },
    {
      data: 'customer',
      visible:false,
      title:'',
      tmpl: Meteor.isClient && Template.patientCustomer
    },
    {
      title:'',
      tmpl: Meteor.isClient && Template.patientActions
    },
    //hidden search fields (because its server side search => not possible yet to concat fields)
    {
      data: 'profile.firstname',
      visible: false
    },
    {
      data: 'profile.lastname',
      visible: false
    },
    {
      data: 'profile.birthdate',
      visible: false
    },
    {
      data: 'account.lynxcareCardNumber',
      visible: false
    },
    {
      data: 'account.toDate',
      visible: false
    },
    {
      data: 'contact.mobile',
      visible: false
    },
    {
      data: 'emails[0].address',
      visible: false
    },
  ]
});

While inspecting, i found that template helpers are called too many time. when there are 100 data displayed, and click on next page, first helpers are called 100 times, then new data arrives and again helpers are called 100 times.

Any solution?

[evolross]

With 100 helpers I'd say you might be "tying on" too much reactivity. Perhaps an overall optimization by pairing down how many columns/how much data you're showing.