Merge pull request #16055 from rmehta/fix-list-throttling

fix(minor): throttle listview refresh on same args for 3 seconds

cypress/integration/list_view.js

@@ -12,6 +12,7 @@ context('List View', () => {
 		cy.get('.list-row-container .list-row-checkbox').click({ multiple: true, force: true });
 		cy.get('.actions-btn-group button').contains('Actions').should('be.visible');
 		cy.intercept('/api/method/frappe.desk.reportview.get').as('list-refresh');
+		cy.wait(3000); // wait before you hit another refresh
 		cy.get('button[data-original-title="Refresh"]').click();
 		cy.wait('@list-refresh');
 		cy.get('.list-row-container .list-row-checkbox:checked').should('be.visible');

cypress/integration/report_view.js

@@ -29,6 +29,7 @@ context('Report View', () => {
 		// select the cell
 		cell.dblclick();
 		cell.get('.dt-cell__edit--col-4').findByRole('checkbox').check({ force: true });
+		cy.get('.dt-row-0 > .dt-cell--col-3').click(); // click outside
 
 		cy.wait('@value-update');
 
@@ -70,4 +71,4 @@ context('Report View', () => {
 		cy.get('.list-paging-area .btn-more').click();
 		cy.get('.list-paging-area .list-count').should('contain.text', '1000 of');
 	});
-});
+});

frappe/public/js/frappe/form/grid_row.js

@@ -340,7 +340,7 @@ export default class GridRow {
 				</div>
 				<div class='control-input-wrapper selected-fields'>
 				</div>
-				<p class='help-box small text-muted hidden-xs'>
+				<p class='help-box small text-muted'>
 					<a class='add-new-fields text-muted'>
 						+ ${__('Add / Remove Columns')}
 					</a>
@@ -420,10 +420,10 @@ export default class GridRow {
 						data-label='${docfield.label}' data-type='${docfield.fieldtype}'>
 
 						<div class='row'>
-							<div class='col-md-1'>
+							<div class='col-md-1' style='padding-top: 2px'>
 								<a style='cursor: grabbing;'>${frappe.utils.icon('drag', 'xs')}</a>
 							</div>
-							<div class='col-md-7' style='padding-left:0px;'>
+							<div class='col-md-7' style='padding-left:0px; padding-top:3px'>
 								${__(docfield.label)}
 							</div>
 							<div class='col-md-3' style='padding-left:0px;margin-top:-2px;' title='${__('Columns')}'>
@@ -431,7 +431,7 @@ export default class GridRow {
 									value='${docfield.columns || cint(d.columns)}'
 									data-fieldname='${docfield.fieldname}' style='background-color: #ffff; display: inline'>
 							</div>
-							<div class='col-md-1'>
+							<div class='col-md-1' style='padding-top: 3px'>
 								<a class='text-muted remove-field' data-fieldname='${docfield.fieldname}'>
 									<i class='fa fa-trash-o' aria-hidden='true'></i>
 								</a>

frappe/public/js/frappe/list/base_list.js

@@ -465,9 +465,14 @@ frappe.views.BaseList = class BaseList {
 	}
 
 	refresh() {
+		let args = this.get_call_args();
+		if (this.no_change(args)) {
+			// console.log('throttled');
+			return Promise.resolve();
+		}
 		this.freeze(true);
 		// fetch data from server
-		return frappe.call(this.get_call_args()).then((r) => {
+		return frappe.call(args).then((r) => {
 			// render
 			this.prepare_data(r);
 			this.toggle_result_area();
@@ -482,6 +487,19 @@ frappe.views.BaseList = class BaseList {
 		});
 	}
 
+	no_change(args) {
+		// returns true if arguments are same for the last 3 seconds
+		// this helps in throttling if called from various sources
+		if (this.last_args && JSON.stringify(args) === this.last_args) {
+			return true;
+		}
+		this.last_args = JSON.stringify(args);
+		setTimeout(() => {
+			this.last_args = null;
+		}, 3000);
+		return false;
+	}
+
 	prepare_data(r) {
 		let data = r.message || {};
 

frappe/public/js/frappe/ui/filters/filter_list.js

@@ -293,7 +293,7 @@ frappe.ui.FilterGroup = class {
 					</div>
 				</div>
 				<hr class="divider"></hr>
-				<div class="filter-action-buttons">
+				<div class="filter-action-buttons mt-2">
 					<button class="text-muted add-filter btn btn-xs">
 						+ ${__('Add a Filter')}
 					</button>

frappe/public/scss/common/grid.scss

@@ -192,7 +192,7 @@
 		margin-left: var(--margin-xs);
 
 		button {
-			height: 27px;
+			height: 24px;
 		}
 	}
 

frappe/public/scss/common/modal.scss

@@ -225,6 +225,11 @@ body.modal-open[style^="padding-right"] {
 	}
 }
 
+// modal is xs (for grids)
+.modal .hidden-xs {
+	display: none !important;
+}
+
 .dialog-assignment-row {
 	display: flex;
 	align-items: center;

frappe/public/scss/desk/frappe_datatable.scss

@@ -58,7 +58,7 @@
 	}
 
 	.link-btn {
-		top: 6px;
+		top: 0px;
 	}
 
 	select {
@@ -77,7 +77,7 @@
 		padding: 0;
 		border: var(--dt-focus-border-width) solid #9bccf8;
 
-		input {
+		input[type="text"] {
 			font-size: inherit;
 			height: 27px;