From 763881b99cdc4728d7de4077e82a729fee79d30f Mon Sep 17 00:00:00 2001
From: Jen Jones Arnesen <jennifer@dhis2.org>
Date: Tue, 22 Sep 2020 16:06:03 +0200
Subject: [PATCH] fix: set passive to true for scroll event listener in
 ProgressiveLoadingContainer [DHIS2-9508] (#1084)

A minor optimization that probably won't have much impact on the performance, but nevertheless doesn't have a negative impact.

Changes include:

* do not add eventListener on the window
* set passive: true on the event listener (see explanation here: https://web.dev/uses-passive-event-listeners/?utm_source=lighthouse&utm_medium=devtools)
---
 .../Item/ProgressiveLoadingContainer.js       | 33 ++++++++++---------
 1 file changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/components/Item/ProgressiveLoadingContainer.js b/src/components/Item/ProgressiveLoadingContainer.js
index 60968d490..c018b48e2 100644
--- a/src/components/Item/ProgressiveLoadingContainer.js
+++ b/src/components/Item/ProgressiveLoadingContainer.js
@@ -24,14 +24,14 @@ class ProgressiveLoadingContainer extends Component {
     }
     containerRef = null
     shouldLoadHandler = null
+    handlerOptions = { passive: true }
 
     checkShouldLoad() {
-        const bufferPx = this.props.bufferFactor * window.innerHeight
-
         if (!this.containerRef) {
             return
         }
 
+        const bufferPx = this.props.bufferFactor * window.innerHeight
         const rect = this.containerRef.getBoundingClientRect()
         if (
             rect.bottom > -bufferPx &&
@@ -51,22 +51,23 @@ class ProgressiveLoadingContainer extends Component {
             this.props.debounceMs
         )
 
-        const containers = [
-            window, // this is probably unnecessary
-            ...document.getElementsByClassName('dashboard-wrapper'),
-        ]
-        containers.forEach(container => {
-            container.addEventListener('scroll', this.shouldLoadHandler)
-        })
+        document
+            .getElementsByClassName('dashboard-wrapper')[0]
+            ?.addEventListener(
+                'scroll',
+                this.shouldLoadHandler,
+                this.handlerOptions
+            )
     }
+
     removeHandler() {
-        const containers = [
-            window, // this is probably unnecessary
-            ...document.getElementsByClassName('dashboard-wrapper'),
-        ]
-        containers.forEach(container => {
-            container.removeEventListener('scroll', this.shouldLoadHandler)
-        })
+        document
+            .getElementsByClassName('dashboard-wrapper')[0]
+            ?.removeEventListener(
+                'scroll',
+                this.shouldLoadHandler,
+                this.handlerOptions
+            )
     }
 
     componentDidMount() {