Meteor-Community-Packages / Meteor-Community-Packages/meteor-tabular

Page change takes 7-8 seconds to load new data

Open
#435 1 comment 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.