chore: add a spinner when content is loading

4 files changed, 57 insertions, 34 deletions

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>
   );
 };