From 81b1e0e05919eb368a66aef47adcf7738af76f29 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 29 Sep 2023 11:47:06 +0200
Subject: refactor(components): rewrite Spinner component

* Message should be set as children
* Default message is no longer available (depending on use case, the
consumer might prefer aria-label instead)
* It is now possible to define the message position
---
 src/pages/article/[slug].tsx  | 7 ++++++-
 src/pages/projets/[slug].tsx  | 8 +++++++-
 src/pages/recherche/index.tsx | 7 ++++++-
 3 files changed, 19 insertions(+), 3 deletions(-)

(limited to 'src/pages')

diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx
index 3e4c38f..523e21d 100644
--- a/src/pages/article/[slug].tsx
+++ b/src/pages/article/[slug].tsx
@@ -71,8 +71,13 @@ const ArticlePage: NextPageWithLayout<ArticlePageProps> = ({
   const { website } = useSettings();
   const prismPlugins: OptionalPrismPlugin[] = ['command-line', 'line-numbers'];
   const { attributes, className } = usePrism({ plugins: prismPlugins });
+  const loadingArticle = intl.formatMessage({
+    defaultMessage: 'Loading the requested article...',
+    description: 'ArticlePage: loading article message',
+    id: '4iYISO',
+  });
 
-  if (isFallback || !article) return <Spinner />;
+  if (isFallback || !article) return <Spinner>{loadingArticle}</Spinner>;
 
   const { content, id, intro, meta, title } = article;
   const { author, commentsCount, cover, dates, seo, thematics, topics } = meta;
diff --git a/src/pages/projets/[slug].tsx b/src/pages/projets/[slug].tsx
index afcf060..717ae13 100644
--- a/src/pages/projets/[slug].tsx
+++ b/src/pages/projets/[slug].tsx
@@ -170,6 +170,12 @@ const ProjectPage: NextPageWithLayout<ProjectPageProps> = ({ project }) => {
     return links;
   };
 
+  const loadingRepoPopularity = intl.formatMessage({
+    defaultMessage: 'Loading the repository popularity...',
+    description: 'ProjectsPage: loading repository popularity',
+    id: 'RwI3B9',
+  });
+
   const { isError, isLoading, data } = useGithubApi(
     /*
      * Repo should be defined for each project so for now it is safe for my
@@ -182,7 +188,7 @@ const ProjectPage: NextPageWithLayout<ProjectPageProps> = ({ project }) => {
   );
 
   if (isError) return 'Error';
-  if (isLoading || !data) return <Spinner />;
+  if (isLoading || !data) return <Spinner aria-label={loadingRepoPopularity} />;
 
   const getRepoPopularity = (repo: string) => {
     const stars = intl.formatMessage(
diff --git a/src/pages/recherche/index.tsx b/src/pages/recherche/index.tsx
index 971d04a..5acf352 100644
--- a/src/pages/recherche/index.tsx
+++ b/src/pages/recherche/index.tsx
@@ -151,6 +151,11 @@ const SearchPage: NextPageWithLayout<SearchPageProps> = ({
     id: 'N804XO',
   });
   const postsListBaseUrl = `${ROUTES.SEARCH}/page/`;
+  const loadingResults = intl.formatMessage({
+    defaultMessage: 'Loading the search results...',
+    description: 'SearchPage: loading search results message',
+    id: 'EeCqAE',
+  });
 
   return (
     <>
@@ -211,7 +216,7 @@ const SearchPage: NextPageWithLayout<SearchPageProps> = ({
             total={totalArticles ?? 0}
           />
         ) : (
-          <Spinner />
+          <Spinner>{loadingResults}</Spinner>
         )}
         {error ? (
           <Notice
-- 
cgit v1.2.3