diff --git a/src/pages/home.jsx b/src/pages/home.jsx
index bee401fb..ff264e26 100644
--- a/src/pages/home.jsx
+++ b/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 } =
- useScroll({
- scrollableElement: scrollableRef.current,
- distanceFromStart: 0.1,
- distanceFromEnd: 0.15,
- scrollThresholdStart: 44,
- });
+ const {
+ scrollDirection,
+ reachStart,
+ nearReachStart,
+ nearReachEnd,
+ 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 (
{
- const uniqueHomeNew = snapStates.homeNew.filter(
- (status) => !states.home.some((s) => s.id === status.id),
- );
- states.home.unshift(...uniqueHomeNew);
+ if (!snapStates.settings.boostsCarousel) {
+ const uniqueHomeNew = snapStates.homeNew.filter(
+ (status) => !states.home.some((s) => s.id === status.id),
+ );
+ states.home.unshift(...uniqueHomeNew);
+ }
loadStatuses(true);
states.homeNew = [];
@@ -338,10 +344,10 @@ function Home({ hidden }) {
New posts
)}
- {snapHome.length ? (
+ {snapStates.home.length ? (
<>
- {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 (
diff --git a/src/pages/status.jsx b/src/pages/status.jsx
index 9252c8f7..9459cfcf 100644
--- a/src/pages/status.jsx
+++ b/src/pages/status.jsx
@@ -297,7 +297,7 @@ function StatusPage({ id }) {
const { nearReachStart } = useScroll({
scrollableElement: scrollableRef.current,
- distanceFromStart: 0.1,
+ distanceFromStart: 0.5,
});
return (
diff --git a/src/utils/states.js b/src/utils/states.js
index a63e75be..5c2d1e9e 100644
--- a/src/utils/states.js
+++ b/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;
diff --git a/src/utils/useScroll.js b/src/utils/useScroll.js
index 96a95126..4c82a852 100644
--- a/src/utils/useScroll.js
+++ b/src/utils/useScroll.js
@@ -2,8 +2,8 @@ import { useEffect, useState } from 'preact/hooks';
export default function useScroll({
scrollableElement,
- distanceFromStart = 0,
- distanceFromEnd = 0,
+ distanceFromStart = 1, // ratio of clientHeight/clientWidth
+ 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');
- scrollableElement = window;
+ // Better be explicit instead of auto-assign to 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 =
- scrollDimension * Math.min(1, Math.max(0, distanceFromStart));
- const distanceFromEndPx =
- scrollDimension * Math.min(1, Math.max(0, distanceFromEnd));
+ const distanceFromStartPx = clientDimension * distanceFromStart;
+ const distanceFromEndPx = clientDimension * 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'));
+ }
+ },
};
}