From c09cd4ba296fa899dbed18229d53155d3c002707 Mon Sep 17 00:00:00 2001
From: jifwin <gpietrusza@gmail.com>
Date: Wed, 1 Mar 2017 15:02:59 +0000
Subject: [PATCH] make load on scroll configurable and use debouce

---
 public/app/features/dashboard/model.ts             |  2 ++
 .../app/features/dashboard/partials/settings.html  |  6 ++++++
 public/app/features/panel/metrics_panel_ctrl.ts    | 11 ++++++-----
 public/app/features/panel/panel_directive.ts       | 14 ++++----------
 4 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/public/app/features/dashboard/model.ts b/public/app/features/dashboard/model.ts
index e31a6c1afd0..959b5ff2116 100644
--- a/public/app/features/dashboard/model.ts
+++ b/public/app/features/dashboard/model.ts
@@ -36,6 +36,7 @@ export class DashboardModel {
   meta: any;
   events: any;
   editMode: boolean;
+  loadOnScroll: boolean;
 
   constructor(data, meta?) {
     if (!data) {
@@ -64,6 +65,7 @@ export class DashboardModel {
     this.version = data.version || 0;
     this.links = data.links || [];
     this.gnetId = data.gnetId || null;
+    this.loadOnScroll = data.loadOnScroll || false;
 
     this.rows = [];
     if (data.rows) {
diff --git a/public/app/features/dashboard/partials/settings.html b/public/app/features/dashboard/partials/settings.html
index b8d8303a51b..7475fceb2d8 100644
--- a/public/app/features/dashboard/partials/settings.html
+++ b/public/app/features/dashboard/partials/settings.html
@@ -61,6 +61,12 @@
                         checked="dashboard.hideControls"
                         label-class="width-11">
         </gf-form-switch>
+        <gf-form-switch class="gf-form"
+                        label="Load on scroll"
+                        tooltip="Load panels as they become visible"
+                        checked="dashboard.loadOnScroll"
+                        label-class="width-11">
+        </gf-form-switch>
       </div>
     </div>
 
diff --git a/public/app/features/panel/metrics_panel_ctrl.ts b/public/app/features/panel/metrics_panel_ctrl.ts
index de6e331e8a1..d9670291481 100644
--- a/public/app/features/panel/metrics_panel_ctrl.ts
+++ b/public/app/features/panel/metrics_panel_ctrl.ts
@@ -74,13 +74,14 @@ class MetricsPanelCtrl extends PanelCtrl {
     // ignore fetching data if another panel is in fullscreen
     if (this.otherPanelInFullscreenMode()) { return; }
 
-    if (!this.scope.$$childHead || (!this.scope.$$childHead.isVisible() && !this.isRenderGraph())) {
-      this.scope.$$childHead.needsRefresh = true;
-      return;
+    if (this.scope.ctrl.dashboard.loadOnScroll) {
+      if (!this.scope.$$childHead || (!this.scope.$$childHead.isVisible() && !this.isRenderGraph())) {
+        this.scope.$$childHead.needsRefresh = true;
+        return;
+      }
+      this.scope.$$childHead.needsRefresh = false;
     }
 
-    this.scope.$$childHead.needsRefresh = false;
-
     // if we have snapshot data use that
     if (this.panel.snapshotData) {
       this.updateTimeRange();
diff --git a/public/app/features/panel/panel_directive.ts b/public/app/features/panel/panel_directive.ts
index 637facb50c1..3aa195e706c 100644
--- a/public/app/features/panel/panel_directive.ts
+++ b/public/app/features/panel/panel_directive.ts
@@ -184,7 +184,6 @@ module.directive('grafanaPanel', function($rootScope, $document, $timeout) {
         }
       });
 
-      var getDataPromise = null;
       scope.needsRefresh = false;
 
       scope.isVisible = function () {
@@ -192,16 +191,11 @@ module.directive('grafanaPanel', function($rootScope, $document, $timeout) {
         return (0 < position.top) && (position.top < window.innerHeight);
       };
 
-      $document.bind('scroll', function () {
-        if (getDataPromise) {
-          $timeout.cancel(getDataPromise);
+      $document.bind('scroll', _.debounce(function () {
+        if (scope.ctrl.dashboard.loadOnScroll && scope.needsRefresh) {
+          scope.ctrl.refresh();
         }
-        if (scope.needsRefresh) {
-          getDataPromise = $timeout(function () {
-            scope.ctrl.refresh();
-          }, 250);
-        }
-      });
+      }, 250));
     }
   };
 });