From f315a2b9aa46c5dc3036e24e8fffc6a28c0460ed Mon Sep 17 00:00:00 2001
From: Guillaume Roux <guillaumeroux123@gmail.com>
Date: Fri, 15 Sep 2023 09:33:59 +0200
Subject: [PATCH] Update `useScrollRequired` logic (#20889)

* Update `useScrollRequired` to only require to scroll to bottom one time

* remove console.log

* simplify logic

* add comment about magic number
---
 ui/hooks/useScrollRequired.js                 | 23 +++++++++++++++----
 .../snaps/snap-install/snap-install.js        |  2 +-
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/ui/hooks/useScrollRequired.js b/ui/hooks/useScrollRequired.js
index a78b8d0c5a73..5bfba403d416 100644
--- a/ui/hooks/useScrollRequired.js
+++ b/ui/hooks/useScrollRequired.js
@@ -16,19 +16,32 @@ export const useScrollRequired = (dependencies = []) => {
   const [isScrolledToBottomState, setIsScrolledToBottom] = useState(false);
 
   const update = () => {
+    if (!ref.current) {
+      return;
+    }
+
     const isScrollable =
       ref.current && ref.current.scrollHeight > ref.current.clientHeight;
-    const isScrolledToBottom = isScrollable
-      ? Math.round(ref.current.scrollTop) + ref.current.offsetHeight >=
-        ref.current.scrollHeight
-      : true;
+
+    const isScrolledToBottom =
+      isScrollable &&
+      // Add 16px to the actual scroll position to trigger setIsScrolledToBottom sooner.
+      // This avoids the problem where a user has scrolled down to the bottom and it's not detected.
+      Math.round(ref.current.scrollTop) + ref.current.offsetHeight + 16 >=
+        ref.current.scrollHeight;
+
     setIsScrollable(isScrollable);
-    setIsScrolledToBottom(isScrolledToBottom);
+
+    if (!isScrollable || isScrolledToBottom) {
+      setIsScrolledToBottom(true);
+    }
   };
 
   useEffect(update, [ref, ...dependencies]);
 
   const scrollToBottom = () => {
+    setIsScrolledToBottom(true);
+
     if (ref.current) {
       ref.current.scrollTo(0, ref.current.scrollHeight);
     }
diff --git a/ui/pages/permissions-connect/snaps/snap-install/snap-install.js b/ui/pages/permissions-connect/snaps/snap-install/snap-install.js
index 435cace34262..8ed4dc77dcf9 100644
--- a/ui/pages/permissions-connect/snaps/snap-install/snap-install.js
+++ b/ui/pages/permissions-connect/snaps/snap-install/snap-install.js
@@ -120,7 +120,7 @@ export default function SnapInstall({
         <SnapAuthorshipHeader snapId={targetSubjectMetadata.origin} />
       )}
       <Box
-        ref={ref}
+        ref={!isLoading && !hasError ? ref : undefined}
         onScroll={onScroll}
         className="snap-install__content"
         style={{