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/Widgets/RecentPosts/RecentPosts.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

(limited to 'src/components/Widgets/RecentPosts/RecentPosts.tsx')

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;
-- 
cgit v1.2.3