diff --git a/src/components/Feed/Beside.tsx b/src/components/Feed/Beside.tsx index bfa3a8c3..e4f894f8 100644 --- a/src/components/Feed/Beside.tsx +++ b/src/components/Feed/Beside.tsx @@ -10,7 +10,7 @@ import { Icon } from '../Nav/Icon' import { t } from '../../utils/intl' interface BesideProps { - title: string + title?: string values: any[] beside: Shout wrapper: 'topic' | 'author' | 'article' | 'top-article' diff --git a/src/components/Views/Home.tsx b/src/components/Views/Home.tsx index fff7d4a9..edeaccf1 100644 --- a/src/components/Views/Home.tsx +++ b/src/components/Views/Home.tsx @@ -23,6 +23,7 @@ import { } from '../../stores/zine/articles' import { useTopAuthorsStore } from '../../stores/zine/topAuthors' import { locale } from '../../stores/ui' +import { restoreScrollPosition, saveScrollPosition } from '../../utils/scroll' const log = getLogger('home view') @@ -30,9 +31,9 @@ type HomeProps = { randomTopics: Topic[] recentPublishedArticles: Shout[] } - -const CLIENT_LOAD_ARTICLES_COUNT = 30 -const LOAD_MORE_ARTICLES_COUNT = 30 +const PRERENDERED_ARTICLES_COUNT = 5 +const CLIENT_LOAD_ARTICLES_COUNT = 29 +const LOAD_MORE_PAGE_SIZE = 16 // Row1 + Row3 + Row2 + Beside (3 + 1) + Row1 + Row 2 + Row3 export const HomeView = (props: HomeProps) => { const { @@ -54,7 +55,9 @@ export const HomeView = (props: HomeProps) => { onMount(() => { loadTopArticles() loadTopMonthArticles() - loadPublishedArticles({ limit: CLIENT_LOAD_ARTICLES_COUNT, offset: sortedArticles().length }) + if (sortedArticles().length < PRERENDERED_ARTICLES_COUNT + CLIENT_LOAD_ARTICLES_COUNT) { + loadPublishedArticles({ limit: CLIENT_LOAD_ARTICLES_COUNT, offset: sortedArticles().length }) + } }) const randomLayout = createMemo(() => { @@ -80,10 +83,25 @@ export const HomeView = (props: HomeProps) => { ) }) - const loadMore = () => { - loadPublishedArticles({ limit: LOAD_MORE_ARTICLES_COUNT, offset: sortedArticles().length }) + const loadMore = async () => { + saveScrollPosition() + await loadPublishedArticles({ limit: LOAD_MORE_PAGE_SIZE, offset: sortedArticles().length }) + restoreScrollPosition() } + const pages = createMemo(() => { + return sortedArticles() + .slice(PRERENDERED_ARTICLES_COUNT + CLIENT_LOAD_ARTICLES_COUNT) + .reduce((acc, article, index) => { + if (index % LOAD_MORE_PAGE_SIZE === 0) { + acc.push([]) + } + + acc[acc.length - 1].push(article) + return acc + }, [] as Shout[][]) + }) + return ( @@ -102,15 +120,12 @@ export const HomeView = (props: HomeProps) => { - {/*FIXME: ?*/} - - - + @@ -118,9 +133,9 @@ export const HomeView = (props: HomeProps) => { - + - {t('Top commented')}} /> + {t('Top commented')}} /> {randomLayout()} @@ -144,7 +159,19 @@ export const HomeView = (props: HomeProps) => { - {(article) => } + + {(page) => ( + <> + + + + + + + + + )} +