Move the progress bar to its component + CSS module

Author: severo

src/components/Layout.tsx

@@ -1,6 +1,7 @@
 import { ReactNode, useEffect, useState } from 'react'
 import { cn } from '../lib/utils.js'
 import ErrorBar from './ErrorBar.js'
+import ProgressBar from './ProgressBar.js'
 import SideBar from './SideBar.js'
 import Welcome from './Welcome.js'
 
@@ -51,11 +52,7 @@ export default function Layout({ children, className, progress, error, title }:
       </div>
       <ErrorBar error={error}></ErrorBar>
     </div>
-    {progress !== undefined && progress < 1 &&
-      <div className={'progress-bar'} role='progressbar'>
-        <div style={{ width: `${100 * progress}%` }} />
-      </div>
-    }
+    {progress !== undefined && progress < 1 && <ProgressBar value={progress} />}
     {showWelcome && <Welcome onClose={handleCloseWelcome} />}
   </main>
 }

src/components/ProgressBar.tsx

@@ -0,0 +1,25 @@
+import { useConfig } from '../hooks/useConfig'
+import { cn } from '../lib/utils.js'
+import styles from '../styles/ProgressBar.module.css'
+import VisuallyHidden from './VisuallyHidden.js'
+
+export default function ProgressBar({ value }: {value: number}) {
+  const { customClass } = useConfig()
+  if (value < 0 || value > 1) {
+    throw new Error('ProgressBar value must be between 0 and 1')
+  }
+  const roundedValue = Math.round(value * 100) / 100
+  const percentage = roundedValue.toLocaleString('en-US', { style: 'percent' })
+  return (
+    <div
+      className={cn(styles.progressBar, customClass?.progressBar)}
+      role='progressbar'
+      aria-valuenow={roundedValue}
+      aria-valuemin={0}
+      aria-valuemax={1}
+    >
+      <VisuallyHidden>{percentage}</VisuallyHidden>
+      <div style={{ width: percentage }} role="presentation" />
+    </div>
+  )
+}

src/hooks/useConfig.ts

@@ -15,6 +15,7 @@ export interface Config {
     highTable?: string
     imageView?: string
     markdownView?: string
+    progressBar?: string
     sideBar?: string
     slideCloseButton?: string
     slidePanel?: string

src/styles/ProgressBar.module.css

@@ -0,0 +1,29 @@
+/* progress bar */
+.progressBar {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 2px;
+  z-index: 1000;
+  transition: width 0.3s;
+
+  /* Shimmer effect overlay */
+  background-image: linear-gradient(to right, #ddd 0%, #cbb 50%, #ddd 100%);
+  background-size: 1000px;
+  animation: shimmer 4s infinite linear;
+
+  @keyframes shimmer {
+    0% {
+      background-position: -1000px;
+    }
+    100% {
+      background-position: 1000px;
+    }
+  }
+
+  & > [role="presentation"] {
+    height: 100%;
+    background-color: #3a4;
+  }
+}

src/styles/app.css

@@ -172,39 +172,6 @@ input.search:focus {
   }
 }
 
-/* progress bar */
-.progress-bar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 2px;
-  z-index: 1000;
-  transition: width 0.3s;
-
-  /* Shimmer effect overlay */
-  background-image: linear-gradient(
-    to right,
-    #ddd 0%,
-    #cbb 50%,
-    #ddd 100%
-  );
-  background-size: 1000px;
-  animation: shimmer 4s infinite linear;
-}
-@keyframes shimmer {
-  0% {
-    background-position: -1000px;
-  }
-  100% {
-    background-position: 1000px;
-  }
-}
-.progress-bar > div {
-  height: 100%;
-  background-color: #3a4;
-}
-
 /* file list */
 .file-list {
   flex: 1;