From f811ad6fc331f6caac9d8d0c218481a47599330b Mon Sep 17 00:00:00 2001
From: Satyanarayana Ruppa <76739349+satya-imaginea@users.noreply.github.com>
Date: Thu, 8 Jul 2021 09:24:51 +0530
Subject: [PATCH 1/2] Control infinite scrolling

cases covered:
1. when we change zoom levels, if the scroll is already at the end of the lane, the loading animation is appearing infinitely.
2. if we want to stop the loading animation once the total number of records
3. new set of records are not getting loaded, because the scroll end logic is not working in all browsers of all screen sizes.

Fixes:
load the new set of records when the scroll is 10px above the scroll end until it reaches the total number of records in each lane
Conditionally & optionally stop the infinite scroll
fix pagination not working issue
---
 src/controllers/Lane.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/controllers/Lane.js b/src/controllers/Lane.js
index 3a8303a8..27150229 100644
--- a/src/controllers/Lane.js
+++ b/src/controllers/Lane.js
@@ -25,9 +25,9 @@ class Lane extends Component {
   handleScroll = evt => {
     const node = evt.target
     const elemScrollPosition = node.scrollHeight - node.scrollTop - node.clientHeight
-    const {onLaneScroll} = this.props
+    const {onLaneScroll, cards, totalCardsCount} = this.props
     // In some browsers and/or screen sizes a decimal rest value between 0 and 1 exists, so it should be checked on < 1 instead of < 0
-    if (elemScrollPosition < 1 && onLaneScroll && !this.state.loading) {
+    if (elemScrollPosition < 1 && onLaneScroll && !this.state.loading && (!totalCardsCount || (totalCardsCount && totalCardsCount > cards.length))) {
       const {currentPage} = this.state
       this.setState({loading: true})
       const nextPage = currentPage + 1

From 5fd2b41aadb03bb71c768dec7d93dbe0c701bff5 Mon Sep 17 00:00:00 2001
From: Satyanarayana Ruppa <76739349+satya-imaginea@users.noreply.github.com>
Date: Thu, 8 Jul 2021 09:27:08 +0530
Subject: [PATCH 2/2] Update Lane.js

---
 src/controllers/Lane.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/controllers/Lane.js b/src/controllers/Lane.js
index 27150229..73a85616 100644
--- a/src/controllers/Lane.js
+++ b/src/controllers/Lane.js
@@ -27,7 +27,7 @@ class Lane extends Component {
     const elemScrollPosition = node.scrollHeight - node.scrollTop - node.clientHeight
     const {onLaneScroll, cards, totalCardsCount} = this.props
     // In some browsers and/or screen sizes a decimal rest value between 0 and 1 exists, so it should be checked on < 1 instead of < 0
-    if (elemScrollPosition < 1 && onLaneScroll && !this.state.loading && (!totalCardsCount || (totalCardsCount && totalCardsCount > cards.length))) {
+    if (elemScrollPosition < 10 && onLaneScroll && !this.state.loading && (!totalCardsCount || (totalCardsCount && totalCardsCount > cards.length))) {
       const {currentPage} = this.state
       this.setState({loading: true})
       const nextPage = currentPage + 1