Meteor-Community-Packages / Meteor-Community-Packages/meteor-tabular
Page change takes 7-8 seconds to load new data
- Dominant language
- JavaScript
- Stars
- 360
- Forks
- 132
- PR merge metrics
- No merged PRs in 30d
Description
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?
Contributor guide
Research direction
Start with the provided Tabular.Table configuration and reproduce pagination with roughly 27k records and a page size of 100. Profile the page change and count the repeated template-helper calls before and after new data arrives. Done means the pagination delay and duplicate rendering are understood and a verified improvement is demonstrated.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript
- Domain
- frontend, performance
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100