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/recherche/index.tsx | 27 ++++++++++++++++++--------- 1 file changed, 18 insertions(+), 9 deletions(-) (limited to 'src/pages/recherche/index.tsx') diff --git a/src/pages/recherche/index.tsx b/src/pages/recherche/index.tsx index c45f9f0..647d049 100644 --- a/src/pages/recherche/index.tsx +++ b/src/pages/recherche/index.tsx @@ -16,6 +16,7 @@ import useSWRInfinite from 'swr/infinite'; import Sidebar from '@components/Sidebar/Sidebar'; import { ThematicsList, TopicsList } from '@components/Widgets'; import styles from '@styles/pages/Page.module.scss'; +import Spinner from '@components/Spinner/Spinner'; const Search: NextPageWithLayout = () => { const [query, setQuery] = useState(''); @@ -47,19 +48,11 @@ const Search: NextPageWithLayout = () => { getPublishedPosts ); - const head = { - title: t`Search results for ${query}] | Armand Philippot`, - description: t`Discover search results for ${query}].`, - }; - const isLoadingInitialData = !data && !error; const isLoadingMore: boolean = 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 title = query @@ -70,6 +63,15 @@ const Search: NextPageWithLayout = () => { message: 'Search', }); + const description = query + ? t`Discover search results for: ${query}` + : t`Search for a post on ${config.name}.`; + + const head = { + title: `${title} | ${config.name}`, + description, + }; + const loadMorePosts = () => { if (lastPostRef.current) { lastPostRef.current.focus(); @@ -77,6 +79,13 @@ const Search: NextPageWithLayout = () => { setSize(size + 1); }; + const getPostsList = () => { + if (error) return t`Failed to load.`; + if (!data) return ; + + return ; + }; + return ( <> @@ -88,7 +97,7 @@ const Search: NextPageWithLayout = () => { >
- + {getPostsList()} {hasNextPage && (