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/components/Spinner/Spinner.module.scss         | 47 ++++++++++++++++++++++
 src/components/Spinner/Spinner.tsx                 | 15 +++++++
 src/components/Widgets/RecentPosts/RecentPosts.tsx | 13 +++---
 src/components/Widgets/Sharing/Sharing.tsx         |  2 +-
 .../Widgets/ThematicsList/ThematicsList.tsx        | 38 ++++++++++-------
 src/components/Widgets/TopicsList/TopicsList.tsx   | 38 ++++++++++-------
 src/pages/blog/index.tsx                           | 13 ++++--
 src/pages/recherche/index.tsx                      | 27 ++++++++-----
 8 files changed, 146 insertions(+), 47 deletions(-)
 create mode 100644 src/components/Spinner/Spinner.module.scss
 create mode 100644 src/components/Spinner/Spinner.tsx

(limited to 'src')

diff --git a/src/components/Spinner/Spinner.module.scss b/src/components/Spinner/Spinner.module.scss
new file mode 100644
index 0000000..044b333
--- /dev/null
+++ b/src/components/Spinner/Spinner.module.scss
@@ -0,0 +1,47 @@
+@use "@styles/abstracts/functions" as fun;
+
+.wrapper {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2xs);
+  margin-bottom: var(--spacing-md);
+}
+
+.ball {
+  width: fun.convert-px(8);
+  height: fun.convert-px(8);
+  background: linear-gradient(
+    to right,
+    var(--color-primary-light) 0%,
+    var(--color-primary-lighter) 100%
+  );
+  border-radius: 50%;
+  animation: spinner 1.4s infinite ease-in-out both;
+
+  &:first-child {
+    animation-delay: -0.32s;
+  }
+
+  &:nth-child(2) {
+    animation-delay: -0.16s;
+  }
+}
+
+.text {
+  margin-left: var(--spacing-xs);
+  text-align: center;
+}
+
+@keyframes spinner {
+  0%,
+  80%,
+  100% {
+    transform: scale(0);
+  }
+
+  40% {
+    transform: scale(1);
+  }
+}
diff --git a/src/components/Spinner/Spinner.tsx b/src/components/Spinner/Spinner.tsx
new file mode 100644
index 0000000..cfa5717
--- /dev/null
+++ b/src/components/Spinner/Spinner.tsx
@@ -0,0 +1,15 @@
+import { t } from '@lingui/macro';
+import styles from './Spinner.module.scss';
+
+const Spinner = () => {
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.ball}></div>
+      <div className={styles.ball}></div>
+      <div className={styles.ball}></div>
+      <div className={styles.text}>{t`Loading...`}</div>
+    </div>
+  );
+};
+
+export default Spinner;
diff --git a/src/components/Widgets/RecentPosts/RecentPosts.tsx b/src/components/Widgets/RecentPosts/RecentPosts.tsx
index 1569284..9c13aa2 100644
--- a/src/components/Widgets/RecentPosts/RecentPosts.tsx
+++ b/src/components/Widgets/RecentPosts/RecentPosts.tsx
@@ -1,3 +1,4 @@
+import Spinner from '@components/Spinner/Spinner';
 import { t } from '@lingui/macro';
 import { getPublishedPosts } from '@services/graphql/queries';
 import { ArticlePreview } from '@ts/types/articles';
@@ -52,12 +53,14 @@ const RecentPosts = () => {
     );
   };
 
-  if (error) return <div>{t`Failed to load.`}</div>;
-  if (!data) return <div>{t`Loading...`}</div>;
+  const getPostsItems = () => {
+    if (error) return t`Failed to load.`;
+    if (!data) return <Spinner />;
 
-  return (
-    <ul className={styles.list}>{data.posts.map((post) => getPost(post))}</ul>
-  );
+    return data.posts.map((post) => getPost(post));
+  };
+
+  return <ul className={styles.list}>{getPostsItems()}</ul>;
 };
 
 export default RecentPosts;
diff --git a/src/components/Widgets/Sharing/Sharing.tsx b/src/components/Widgets/Sharing/Sharing.tsx
index bc52f9b..89b48ca 100644
--- a/src/components/Widgets/Sharing/Sharing.tsx
+++ b/src/components/Widgets/Sharing/Sharing.tsx
@@ -94,7 +94,7 @@ const Sharing = ({ excerpt, title }: { excerpt: string; title: string }) => {
             title={name}
             className={`${styles.link} ${styles[linkModifier]}`}
           >
-            <span className="screen-reader-text">{name}</span>
+            <span className="screen-reader-text">{t`Share on ${name}`}</span>
           </a>
         </li>
       );
diff --git a/src/components/Widgets/ThematicsList/ThematicsList.tsx b/src/components/Widgets/ThematicsList/ThematicsList.tsx
index 8523bd1..e5162b4 100644
--- a/src/components/Widgets/ThematicsList/ThematicsList.tsx
+++ b/src/components/Widgets/ThematicsList/ThematicsList.tsx
@@ -1,3 +1,4 @@
+import Spinner from '@components/Spinner/Spinner';
 import { ExpandableWidget, List } from '@components/WidgetParts';
 import { t } from '@lingui/macro';
 import { getAllThematics } from '@services/graphql/queries';
@@ -21,24 +22,33 @@ const ThematicsList = ({
 
   const { data, error } = useSWR('/api/thematics', getAllThematics);
 
-  if (error) return <div>{t`Failed to load.`}</div>;
-  if (!data) return <div>{t`Loading...`}</div>;
+  const getList = () => {
+    if (error) return <ul>{t`Failed to load.`}</ul>;
+    if (!data)
+      return (
+        <ul>
+          <Spinner />
+        </ul>
+      );
 
-  const thematics = data.map((thematic) => {
-    return currentThematicSlug !== thematic.slug ? (
-      <li key={thematic.databaseId}>
-        <Link href={`/thematique/${thematic.slug}`}>
-          <a>{thematic.title}</a>
-        </Link>
-      </li>
-    ) : (
-      ''
-    );
-  });
+    const thematics = data.map((thematic) => {
+      return currentThematicSlug !== thematic.slug ? (
+        <li key={thematic.databaseId}>
+          <Link href={`/thematique/${thematic.slug}`}>
+            <a>{thematic.title}</a>
+          </Link>
+        </li>
+      ) : (
+        ''
+      );
+    });
+
+    return <List items={thematics} />;
+  };
 
   return (
     <ExpandableWidget title={title} titleLevel={titleLevel} withBorders={true}>
-      <List items={thematics} />
+      {getList()}
     </ExpandableWidget>
   );
 };
diff --git a/src/components/Widgets/TopicsList/TopicsList.tsx b/src/components/Widgets/TopicsList/TopicsList.tsx
index 5bf12b9..c7843b7 100644
--- a/src/components/Widgets/TopicsList/TopicsList.tsx
+++ b/src/components/Widgets/TopicsList/TopicsList.tsx
@@ -1,3 +1,4 @@
+import Spinner from '@components/Spinner/Spinner';
 import { ExpandableWidget, List } from '@components/WidgetParts';
 import { t } from '@lingui/macro';
 import { getAllSubjects } from '@services/graphql/queries';
@@ -21,24 +22,33 @@ const TopicsList = ({
 
   const { data, error } = useSWR('/api/subjects', getAllSubjects);
 
-  if (error) return <div>{t`Failed to load.`}</div>;
-  if (!data) return <div>{t`Loading...`}</div>;
+  const getList = () => {
+    if (error) return <ul>{t`Failed to load.`}</ul>;
+    if (!data)
+      return (
+        <ul>
+          <Spinner />
+        </ul>
+      );
 
-  const subjects = data.map((subject) => {
-    return currentTopicSlug !== subject.slug ? (
-      <li key={subject.databaseId}>
-        <Link href={`/sujet/${subject.slug}`}>
-          <a>{subject.title}</a>
-        </Link>
-      </li>
-    ) : (
-      ''
-    );
-  });
+    const subjects = data.map((subject) => {
+      return currentTopicSlug !== subject.slug ? (
+        <li key={subject.databaseId}>
+          <Link href={`/sujet/${subject.slug}`}>
+            <a>{subject.title}</a>
+          </Link>
+        </li>
+      ) : (
+        ''
+      );
+    });
+
+    return <List items={subjects} />;
+  };
 
   return (
     <ExpandableWidget title={title} titleLevel={titleLevel} withBorders={true}>
-      <List items={subjects} />
+      {getList()}
     </ExpandableWidget>
   );
 };
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}
-- 
cgit v1.2.3