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

@@ -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);
     }

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={{