From 9128c224c65f8f2a172b22a443ccb4573c7acd90 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 29 Sep 2023 15:49:14 +0200
Subject: refactor(components): rewrite ProgressBar component

* Avoid browser vendors by adding an extra div
* Add a loading state
* Add an option to center the progress bar (no longer the default)
* Remove min since it is always 0
---
 src/components/organisms/layout/posts-list.tsx | 17 ++++++++++++-----
 1 file changed, 12 insertions(+), 5 deletions(-)

(limited to 'src/components/organisms/layout/posts-list.tsx')

diff --git a/src/components/organisms/layout/posts-list.tsx b/src/components/organisms/layout/posts-list.tsx
index 5401ed1..86c3d12 100644
--- a/src/components/organisms/layout/posts-list.tsx
+++ b/src/components/organisms/layout/posts-list.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable max-statements */
-import { type FC, Fragment, useRef, useCallback } from 'react';
+import { type FC, Fragment, useRef, useCallback, useId } from 'react';
 import { useIntl } from 'react-intl';
 import { useIsMounted, useSettings } from '../../../utils/hooks';
 import {
@@ -102,6 +102,7 @@ export const PostsList: FC<PostsListProps> = ({
   const isMounted = useIsMounted(listRef);
   const { blog } = useSettings();
   const lastPostId = posts.length ? posts[posts.length - 1].id : 0;
+  const progressBarId = useId();
 
   /**
    * Retrieve the list of posts.
@@ -114,7 +115,12 @@ export const PostsList: FC<PostsListProps> = ({
     allPosts: Post[],
     headingLevel: HeadingLevel = 2
   ): JSX.Element => (
-    <ol className={styles.list} ref={listRef}>
+    <ol
+      aria-busy={isLoading}
+      aria-describedby={progressBarId}
+      className={styles.list}
+      ref={listRef}
+    >
       {allPosts.map(({ id, ...post }) => (
         <Fragment key={id}>
           <li className={styles.item}>
@@ -190,11 +196,12 @@ export const PostsList: FC<PostsListProps> = ({
     <>
       <ProgressBar
         aria-label={progressInfo}
+        className={styles.progress}
         current={posts.length}
-        // eslint-disable-next-line react/jsx-no-literals -- Id allowed.
-        id="loaded-posts"
+        id={progressBarId}
+        isCentered
+        isLoading={isLoading}
         label={progressInfo}
-        min={1}
         max={total}
       />
       {showLoadMoreBtn ? (
-- 
cgit v1.2.3