From a33d9db6dc96f675b9a74fc8efdd50470dfd37ec Mon Sep 17 00:00:00 2001
From: nklhrstv <me@nikolahristov.com>
Date: Wed, 1 Jun 2022 14:44:59 +0300
Subject: [PATCH] change the board threshhold to be items count instead of px

---
 src/common/getVisibleChildrenRange.js | 10 +++++-----
 src/routes/Board/Board.js             |  8 ++++----
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/common/getVisibleChildrenRange.js b/src/common/getVisibleChildrenRange.js
index f389349e6..91d9f09a3 100644
--- a/src/common/getVisibleChildrenRange.js
+++ b/src/common/getVisibleChildrenRange.js
@@ -1,18 +1,18 @@
 // Copyright (C) 2017-2022 Smart code 203358507
 
-const isChildVisible = (container, element, threshold) => {
+const isChildVisible = (container, element) => {
     const elementTop = element.offsetTop;
     const elementBottom = element.offsetTop + element.clientHeight;
-    const containerTop = container.scrollTop - threshold;
-    const containerBottom = container.scrollTop + container.clientHeight + threshold;
+    const containerTop = container.scrollTop;
+    const containerBottom = container.scrollTop + container.clientHeight;
     return (elementTop >= containerTop && elementBottom <= containerBottom) ||
         (elementTop < containerTop && containerTop < elementBottom) ||
         (elementTop < containerBottom && containerBottom < elementBottom);
 };
 
-const getVisibleChildrenRange = (container, threshold) => {
+const getVisibleChildrenRange = (container) => {
     return Array.from(container.children).reduce((result, child, index) => {
-        if (isChildVisible(container, child, threshold)) {
+        if (isChildVisible(container, child)) {
             if (result === null) {
                 result = {
                     start: index,
diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js
index 2cbe193c9..0aca6964b 100644
--- a/src/routes/Board/Board.js
+++ b/src/routes/Board/Board.js
@@ -8,7 +8,7 @@ const useBoard = require('./useBoard');
 const useContinueWatchingPreview = require('./useContinueWatchingPreview');
 const styles = require('./styles');
 
-const THRESHOLD = 300;
+const THRESHOLD = 5;
 
 const Board = () => {
     const profile = useProfile();
@@ -18,13 +18,13 @@ const Board = () => {
     const boardCatalogsOffset = continueWatchingPreview.libraryItems.length > 0 ? 1 : 0;
     const scrollContainerRef = React.useRef();
     const onVisibleRangeChange = React.useCallback(() => {
-        const range = getVisibleChildrenRange(scrollContainerRef.current, THRESHOLD);
+        const range = getVisibleChildrenRange(scrollContainerRef.current);
         if (range === null) {
             return;
         }
 
-        const start = Math.max(0, range.start - boardCatalogsOffset);
-        const end = range.end - boardCatalogsOffset;
+        const start = Math.max(0, range.start - boardCatalogsOffset - THRESHOLD);
+        const end = range.end - boardCatalogsOffset + THRESHOLD;
         if (end < start) {
             return;
         }