diff --git a/src/js/components/feed/Feed.tsx b/src/js/components/feed/Feed.tsx index 820d148b..73ce10d7 100644 --- a/src/js/components/feed/Feed.tsx +++ b/src/js/components/feed/Feed.tsx @@ -57,7 +57,7 @@ const Feed = (props: FeedProps) => { filter: filterOption.filter, filterFn, sinceLastOpened: false, - mergeSubscriptions: false, + mergeSubscriptions: true, }); const hiddenEvents = useMemo(() => { diff --git a/src/js/components/helpers/InfiniteScroll.tsx b/src/js/components/helpers/InfiniteScroll.tsx index 1d780e63..3f1b5cba 100644 --- a/src/js/components/helpers/InfiniteScroll.tsx +++ b/src/js/components/helpers/InfiniteScroll.tsx @@ -1,4 +1,6 @@ -import React, { useCallback, useEffect, useRef, useState } from 'react'; +import React, { useCallback, useEffect, useRef } from 'react'; + +import useHistoryState from '@/state/useHistoryState.ts'; type Props = { children: any; @@ -6,8 +8,13 @@ type Props = { loadMore?: () => void; }; +const DEFAULT_INITIAL_DISPLAY_COUNT = 10; + const InfiniteScroll: React.FC = ({ children, margin = 2000, loadMore }) => { - const [displayCount, setDisplayCount] = useState(10); + const [displayCount, setDisplayCount] = useHistoryState( + DEFAULT_INITIAL_DISPLAY_COUNT, + 'scroller', // TODO use mandatory key prop, in case multiple infinite scrollers are used on the same page + ); const sentinelRef = useRef(null); const lastLoadMoreCall = useRef(0); diff --git a/src/js/state/useHistoryState.ts b/src/js/state/useHistoryState.ts index 2e431bdc..b9b63d80 100644 --- a/src/js/state/useHistoryState.ts +++ b/src/js/state/useHistoryState.ts @@ -13,7 +13,7 @@ function useHistoryState(initialValue, key) { const newHistoryState = { ...history.state, [key]: value }; history.replaceState(newHistoryState, ''); latestValue.current = value; - }, 500), + }, 1000), ); useEffect(() => {