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 | |
| parent | e63d74d4147e66ec79c287b7c3fda0dadc139275 (diff) | |
chore: add a spinner when content is loading
Diffstat (limited to 'src/pages')
| -rw-r--r-- | src/pages/blog/index.tsx | 13 | ||||
| -rw-r--r-- | src/pages/recherche/index.tsx | 27 |
2 files changed, 27 insertions, 13 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} 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 <div>{t`Failed to load.`}</div>; - if (!data) return <div>{t`Loading...`}</div>; - 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 <Spinner />; + + return <PostsList ref={lastPostRef} data={data} showYears={false} />; + }; + return ( <> <Head> @@ -88,7 +97,7 @@ const Search: NextPageWithLayout = () => { > <PostHeader title={title} /> <div className={styles.body}> - <PostsList ref={lastPostRef} data={data} showYears={false} /> + {getPostsList()} {hasNextPage && ( <Button isDisabled={isLoadingMore} |