From 395069f8cecd2deab2dfe1a2d7b97f379413e009 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
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 <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}
-- 
cgit v1.2.3

