From 395069f8cecd2deab2dfe1a2d7b97f379413e009 Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Sun, 16 Jan 2022 14:18:54 +0100 Subject: chore: add a spinner when content is loading --- src/pages/blog/index.tsx | 13 +++++++++---- 1 file changed, 9 insertions(+), 4 deletions(-) (limited to 'src/pages/blog') 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 = ({ fallback }) => { const lastPostRef = useRef(null); @@ -42,9 +43,6 @@ const Blog: NextPageWithLayout = ({ fallback }) => { isLoadingInitialData || (size > 0 && data !== undefined && typeof data[size - 1] === 'undefined'); - if (error) return
{t`Failed to load.`}
; - if (!data) return
{t`Loading...`}
; - const hasNextPage = data && data[data.length - 1].pageInfo.hasNextPage; const loadMorePosts = () => { @@ -54,6 +52,13 @@ const Blog: NextPageWithLayout = ({ fallback }) => { setSize(size + 1); }; + const getPostsList = () => { + if (error) return t`Failed to load.`; + if (!data) return ; + + return ; + }; + return ( <> @@ -65,7 +70,7 @@ const Blog: NextPageWithLayout = ({ fallback }) => { >
- + {getPostsList()} {hasNextPage && (