diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-01-16 14:18:54 +0100 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-01-16 14:24:08 +0100 |
| commit | 395069f8cecd2deab2dfe1a2d7b97f379413e009 (patch) | |
| tree | 8063ff201967b321295815114442ade486527ba3 /src/pages/blog | |
| parent | e63d74d4147e66ec79c287b7c3fda0dadc139275 (diff) | |
chore: add a spinner when content is loading
Diffstat (limited to 'src/pages/blog')
| -rw-r--r-- | src/pages/blog/index.tsx | 13 |
1 files changed, 9 insertions, 4 deletions
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx index b20b647..48fab1c 100644 --- a/src/pages/blog/index.tsx +++ b/src/pages/blog/index.tsx @@ -16,6 +16,7 @@ import { ThematicsList, TopicsList } from '@components/Widgets'; import Sidebar from '@components/Sidebar/Sidebar'; import styles from '@styles/pages/Page.module.scss'; import { useRef } from 'react'; +import Spinner from '@components/Spinner/Spinner'; const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => { const lastPostRef = useRef<HTMLSpanElement>(null); @@ -42,9 +43,6 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => { isLoadingInitialData || (size > 0 && data !== undefined && typeof data[size - 1] === 'undefined'); - if (error) return <div>{t`Failed to load.`}</div>; - if (!data) return <div>{t`Loading...`}</div>; - const hasNextPage = data && data[data.length - 1].pageInfo.hasNextPage; const loadMorePosts = () => { @@ -54,6 +52,13 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => { setSize(size + 1); }; + const getPostsList = () => { + if (error) return t`Failed to load.`; + if (!data) return <Spinner />; + + return <PostsList ref={lastPostRef} data={data} showYears={true} />; + }; + return ( <> <Head> @@ -65,7 +70,7 @@ const Blog: NextPageWithLayout<BlogPageProps> = ({ fallback }) => { > <PostHeader title={t`Blog`} /> <div className={styles.body}> - <PostsList ref={lastPostRef} data={data} showYears={true} /> + {getPostsList()} {hasNextPage && ( <Button isDisabled={isLoadingMore} |