2 files changed, 24 insertions, 5 deletions
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx
index faadd6f..e0d35cd 100644
--- a/src/pages/blog/index.tsx
+++ b/src/pages/blog/index.tsx
@@ -15,8 +15,11 @@ import PostHeader from '@components/PostHeader/PostHeader';
 import { ThematicsList, TopicsList } from '@components/Widget';
 import Sidebar from '@components/Sidebar/Sidebar';
 import styles from '@styles/pages/Page.module.scss';
+import { useRef } from 'react';
 
 const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
+  const lastPostRef = useRef<HTMLSpanElement>(null);
+
   const getKey = (pageIndex: number, previousData: PostsListData) => {
     if (previousData && !previousData.posts) return null;
 
@@ -44,6 +47,13 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
 
   const hasNextPage = data && data[data.length - 1].pageInfo.hasNextPage;
 
+  const loadMorePosts = () => {
+    if (lastPostRef.current) {
+      lastPostRef.current.focus();
+    }
+    setSize(size + 1);
+  };
+
   return (
     <>
       <Head>
@@ -55,11 +65,11 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => {
       >
         <PostHeader title={t`Blog`} />
         <div className={styles.body}>
-          <PostsList data={data} showYears={true} />
+          <PostsList ref={lastPostRef} data={data} showYears={true} />
           {hasNextPage && (
             <Button
               isDisabled={isLoadingMore}
-              clickHandler={() => setSize(size + 1)}
+              clickHandler={loadMorePosts}
               position="center"
             >{t`Load more?`}</Button>
           )}
diff --git a/src/pages/recherche/index.tsx b/src/pages/recherche/index.tsx
index c8a7b9b..57f40e2 100644
--- a/src/pages/recherche/index.tsx
+++ b/src/pages/recherche/index.tsx
@@ -11,7 +11,7 @@ import { loadTranslation } from '@utils/helpers/i18n';
 import { GetStaticProps } from 'next';
 import Head from 'next/head';
 import { useRouter } from 'next/router';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import useSWRInfinite from 'swr/infinite';
 import Sidebar from '@components/Sidebar/Sidebar';
 import { ThematicsList, TopicsList } from '@components/Widget';
@@ -20,6 +20,7 @@ import styles from '@styles/pages/Page.module.scss';
 const Search: NextPageWithLayout = () => {
   const [query, setQuery] = useState('');
   const router = useRouter();
+  const lastPostRef = useRef<HTMLSpanElement>(null);
 
   useEffect(() => {
     if (!router.isReady) return;
@@ -69,6 +70,13 @@ const Search: NextPageWithLayout = () => {
         message: 'Search',
       });
 
+  const loadMorePosts = () => {
+    if (lastPostRef.current) {
+      lastPostRef.current.focus();
+    }
+    setSize(size + 1);
+  };
+
   return (
     <>
       <Head>
@@ -80,11 +88,12 @@ const Search: NextPageWithLayout = () => {
       >
         <PostHeader title={title} />
         <div className={styles.body}>
-          <PostsList data={data} showYears={false} />
+          <PostsList ref={lastPostRef} data={data} showYears={false} />
           {hasNextPage && (
             <Button
               isDisabled={isLoadingMore}
-              clickHandler={() => setSize(size + 1)}
+              clickHandler={loadMorePosts}
+              position="center"
             >{t`Load more?`}</Button>
           )}
         </div>