Bug fixes for boosts carousel + scrolling

src/pages/home.jsx

@@ -48,8 +48,8 @@ function Home({ hidden }) {
       };
     });
 
-    {
+    // BOOSTS CAROUSEL
-      // BOOSTS CAROUSEL
+    if (snapStates.settings.boostsCarousel) {
       let specialHome = [];
       let boostStash = [];
       for (let i = 0; i < homeValues.length; i++) {
@@ -90,19 +90,22 @@ function Home({ hidden }) {
         specialHome,
       });
       if (firstLoad) {
-        states.specialHome = specialHome;
+        states.home = specialHome;
       } else {
-        states.specialHome.push(...specialHome);
+        states.home.push(...specialHome);
+      }
+    } else {
+      if (firstLoad) {
+        states.home = homeValues;
+      } else {
+        states.home.push(...homeValues);
       }
     }
 
-    if (firstLoad) {
-      states.home = homeValues;
-    } else {
-      states.home.push(...homeValues);
-    }
     states.homeLastFetchTime = Date.now();
-    return allStatuses;
+    return {
+      done: false,
+    };
   }
 
   const loadingStatuses = useRef(false);
@@ -212,19 +215,24 @@ function Home({ hidden }) {
     }
   });
 
-  const { scrollDirection, reachStart, nearReachStart, nearReachEnd } =
+  const {
-    useScroll({
+    scrollDirection,
-      scrollableElement: scrollableRef.current,
+    reachStart,
-      distanceFromStart: 0.1,
+    nearReachStart,
-      distanceFromEnd: 0.15,
+    nearReachEnd,
-      scrollThresholdStart: 44,
+    reachEnd,
-    });
+  } = useScroll({
+    scrollableElement: scrollableRef.current,
+    distanceFromStart: 1,
+    distanceFromEnd: 3,
+    scrollThresholdStart: 44,
+  });
 
   useEffect(() => {
-    if (nearReachEnd && showMore) {
+    if (nearReachEnd || (reachEnd && showMore)) {
       loadStatuses();
     }
-  }, [nearReachEnd]);
+  }, [nearReachEnd, reachEnd]);
 
   useEffect(() => {
     if (reachStart) {
@@ -245,10 +253,6 @@ function Home({ hidden }) {
     })();
   }, []);
 
-  const snapHome = snapStates.settings.boostsCarousel
-    ? snapStates.specialHome
-    : snapStates.home;
-
   return (
     <div
       id="home-page"
@@ -322,10 +326,12 @@ function Home({ hidden }) {
               class="updates-button"
               type="button"
               onClick={() => {
-                const uniqueHomeNew = snapStates.homeNew.filter(
+                if (!snapStates.settings.boostsCarousel) {
-                  (status) => !states.home.some((s) => s.id === status.id),
+                  const uniqueHomeNew = snapStates.homeNew.filter(
-                );
+                    (status) => !states.home.some((s) => s.id === status.id),
-                states.home.unshift(...uniqueHomeNew);
+                  );
+                  states.home.unshift(...uniqueHomeNew);
+                }
                 loadStatuses(true);
                 states.homeNew = [];
 
@@ -338,10 +344,10 @@ function Home({ hidden }) {
               <Icon icon="arrow-up" /> New posts
             </button>
           )}
-        {snapHome.length ? (
+        {snapStates.home.length ? (
           <>
             <ul class="timeline">
-              {snapHome.map(({ id: statusID, reblog, boosts }) => {
+              {snapStates.home.map(({ id: statusID, reblog, boosts }) => {
                 const actualStatusID = reblog || statusID;
                 if (boosts) {
                   return (
@@ -429,10 +435,14 @@ function Home({ hidden }) {
 
 function BoostsCarousel({ boosts }) {
   const carouselRef = useRef();
-  const { reachStart, reachEnd } = useScroll({
+  const { reachStart, reachEnd, init } = useScroll({
     scrollableElement: carouselRef.current,
     direction: 'horizontal',
   });
+  useEffect(() => {
+    init?.();
+  }, []);
+
   return (
     <div class="boost-carousel">
       <header>

src/pages/status.jsx

@@ -297,7 +297,7 @@ function StatusPage({ id }) {
 
   const { nearReachStart } = useScroll({
     scrollableElement: scrollableRef.current,
-    distanceFromStart: 0.1,
+    distanceFromStart: 0.5,
   });
 
   return (

src/utils/states.js

@@ -24,7 +24,7 @@ const states = proxy({
   showDrafts: false,
   composeCharacterCount: 0,
   settings: {
-    boostsCarousel: store.local.get('settings:boostsCarousel') === '1' || true,
+    boostsCarousel: store.local.get('settings:boostsCarousel') === '1' ?? true,
   },
 });
 export default states;

src/utils/useScroll.js

@@ -2,8 +2,8 @@ import { useEffect, useState } from 'preact/hooks';
 
 export default function useScroll({
   scrollableElement,
-  distanceFromStart = 0,
+  distanceFromStart = 1, // ratio of clientHeight/clientWidth
-  distanceFromEnd = 0,
+  distanceFromEnd = 1, // ratio of clientHeight/clientWidth
   scrollThresholdStart = 10,
   scrollThresholdEnd = 10,
   direction = 'vertical',
@@ -16,8 +16,8 @@ export default function useScroll({
   const isVertical = direction === 'vertical';
 
   if (!scrollableElement) {
-    console.warn('Scrollable element is not defined');
+    // Better be explicit instead of auto-assign to window
-    scrollableElement = window;
+    return {};
   }
 
   useEffect(() => {
@@ -38,10 +38,8 @@ export default function useScroll({
       const scrollDimension = isVertical ? scrollHeight : scrollWidth;
       const clientDimension = isVertical ? clientHeight : clientWidth;
       const scrollDistance = Math.abs(scrollStart - previousScrollStart);
-      const distanceFromStartPx =
+      const distanceFromStartPx = clientDimension * distanceFromStart;
-        scrollDimension * Math.min(1, Math.max(0, distanceFromStart));
+      const distanceFromEndPx = clientDimension * distanceFromEnd;
-      const distanceFromEndPx =
-        scrollDimension * Math.min(1, Math.max(0, distanceFromEnd));
 
       if (
         scrollDistance >=
@@ -62,7 +60,6 @@ export default function useScroll({
     }
 
     scrollableElement.addEventListener('scroll', onScroll, { passive: true });
-    scrollableElement.dispatchEvent(new Event('scroll'));
 
     return () => scrollableElement.removeEventListener('scroll', onScroll);
   }, [
@@ -79,5 +76,10 @@ export default function useScroll({
     reachEnd,
     nearReachStart,
     nearReachEnd,
+    init: () => {
+      if (scrollableElement) {
+        scrollableElement.dispatchEvent(new Event('scroll'));
+      }
+    },
   };
 }