fontend: Loader: Fix to not freeze when main thread freezes

This avoids SVG that mui CircleProgress uses, so it doesn't freeze.

Also avoids flashing if the loading is finished before 0.25 seconds.

Fixes a11y issue to not use progressbar, because we always do not
know the progress, but instead are announcing a status.

Author: illume

frontend/src/components/common/Loader.test.tsx

@@ -28,11 +28,11 @@ describe('Loader Component', () => {
     );
 
     // Check if the container Box is present
-    const container = screen.getByRole('progressbar').parentElement;
+    const container = screen.getByRole('status').parentElement;
     expect(container).toHaveClass('MuiBox-root');
 
     // Check if CircularProgress is rendered
-    const progress = screen.getByRole('progressbar');
+    const progress = screen.getByRole('status');
     expect(progress).toHaveClass('MuiCircularProgress-root');
     expect(progress).toHaveAttribute('title', 'Loading...');
   });
@@ -45,7 +45,7 @@ describe('Loader Component', () => {
     );
 
     // Check if CircularProgress is rendered directly without container
-    const progress = screen.getByRole('progressbar');
+    const progress = screen.getByRole('status');
     expect(progress).toHaveClass('MuiCircularProgress-root');
     expect(progress.parentElement).not.toHaveClass('MuiBox-root');
   });
@@ -58,7 +58,7 @@ describe('Loader Component', () => {
       </TestContext>
     );
 
-    const progress = screen.getByRole('progressbar');
+    const progress = screen.getByRole('status');
     expect(progress).toHaveStyle({ width: `${customSize}px`, height: `${customSize}px` });
   });
 
@@ -69,7 +69,7 @@ describe('Loader Component', () => {
       </TestContext>
     );
 
-    const progress = screen.getByRole('progressbar');
+    const progress = screen.getByRole('status');
     expect(progress).toHaveClass('MuiCircularProgress-colorSecondary');
   });
 
@@ -80,20 +80,7 @@ describe('Loader Component', () => {
       </TestContext>
     );
 
-    const progress = screen.getByRole('progressbar');
+    const progress = screen.getByRole('status');
     expect(progress).toHaveAttribute('title', '');
   });
-
-  it('passes additional props to CircularProgress', () => {
-    render(
-      <TestContext>
-        <Loader title="Loading..." thickness={4} disableShrink />
-      </TestContext>
-    );
-
-    const progress = screen.getByRole('progressbar');
-    expect(progress).toHaveClass('MuiCircularProgress-root');
-    expect(progress).toHaveAttribute('role', 'progressbar');
-    expect(progress).toHaveAttribute('title', 'Loading...');
-  });
 });

frontend/src/components/common/Loader.tsx

@@ -15,17 +15,138 @@
  */
 
 import Box from '@mui/material/Box';
-import CircularProgress, { CircularProgressProps } from '@mui/material/CircularProgress';
+import { useTheme } from '@mui/material/styles';
 import React from 'react';
 
-export interface LoaderProps extends CircularProgressProps {
+/**
+ * - Uses CSS animations so does not freeze when main thread is busy
+ * - Does not display right away, to avoid flash of spinner
+ */
+
+export interface LoaderProps {
+  /** If true, the loader will not be wrapped in a container Box. */
   noContainer?: boolean;
+  /** Title for the loader, used for accessibility and as a tooltip. */
   title: string;
+  /** Size of the loader. Defaults to 40. */
+  size?: number;
+  /** Color of the loader. Defaults to primary color. */
+  color?: 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | string;
+}
+
+/**
+ * Injects custom loader styles into the document, once for each theme.
+ */
+function injectLoaderStyle(theme: any) {
+  const styleId = `hl-custom-loader-style-${theme.palette.primary.main.replace(
+    /[^a-zA-Z0-9]/g,
+    ''
+  )}`;
+  if (!document.getElementById(styleId)) {
+    const style = document.createElement('style');
+    style.id = styleId;
+    style.textContent = `
+      @keyframes hl-custom-loader-spin {
+        100% { transform: rotate(360deg); }
+      }
+      @keyframes hl-custom-loader-delay {
+        0% { opacity: 0; }
+        99% { opacity: 0; }
+        100% { opacity: 1; }
+      }
+      .hl-custom-loader {
+        display: inline-block;
+        position: relative;
+        opacity: 0;
+        animation: hl-custom-loader-delay 0.25s linear forwards;
+      }
+      .hl-custom-loader-circle {
+        box-sizing: border-box;
+        position: absolute;
+        top: 0; left: 0;
+        border-radius: 50%;
+        border-right-color: transparent;
+        border-bottom-color: transparent;
+        animation: hl-custom-loader-spin 0.8s linear infinite;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+}
+
+/**
+ * @returns a color value based on the theme and the provided color prop.
+ * If no color is provided, it defaults to the primary color of the theme.
+ */
+function getColor(theme: any, color?: LoaderProps['color']) {
+  if (!color || color === 'primary') return theme.palette.primary.main;
+  if (color === 'secondary') return theme.palette.secondary.main;
+  if (color === 'error') return theme.palette.error.main;
+  if (color === 'info') return theme.palette.info.main;
+  if (color === 'success') return theme.palette.success.main;
+  if (color === 'warning') return theme.palette.warning.main;
+  return color;
+}
+
+/**
+ * @returns a MUI class name based on the provided color prop.
+ * This is used to apply the correct color to the CircularProgress component.
+ */
+function getMuiColorClass(color?: LoaderProps['color']) {
+  if (!color || color === 'primary') return 'MuiCircularProgress-colorPrimary';
+  if (color === 'secondary') return 'MuiCircularProgress-colorSecondary';
+  if (color === 'error') return 'MuiCircularProgress-colorError';
+  if (color === 'info') return 'MuiCircularProgress-colorInfo';
+  if (color === 'success') return 'MuiCircularProgress-colorSuccess';
+  if (color === 'warning') return 'MuiCircularProgress-colorWarning';
+  return '';
+}
+
+/**
+ * CustomLoader component that renders a circular loader with custom styles.
+ */
+function CustomLoader({
+  title,
+  size = 40,
+  color,
+}: {
+  title: LoaderProps['title'];
+  size?: LoaderProps['size'];
+  color?: LoaderProps['color'];
+}) {
+  const theme = useTheme();
+  React.useEffect(() => {
+    injectLoaderStyle(theme);
+  }, [theme]);
+  const loaderColor = getColor(theme, color);
+  const muiColorClass = getMuiColorClass(color);
+
+  return (
+    <span
+      className={`MuiCircularProgress-root MuiCircularProgress-indeterminate hl-custom-loader ${muiColorClass}`}
+      role="status"
+      aria-label={title}
+      aria-live="polite"
+      title={title}
+      style={{ width: size, height: size }}
+    >
+      <span
+        className="hl-custom-loader-circle"
+        style={{
+          width: '100%',
+          height: '100%',
+          borderWidth: Math.max(2, Math.round(size / 10)),
+          borderStyle: 'solid',
+          borderColor: `${loaderColor} transparent transparent transparent`,
+        }}
+      />
+    </span>
+  );
 }
 
 export default function Loader(props: LoaderProps) {
-  const { noContainer = false, title, ...other } = props;
-  const progress = <CircularProgress title={title} {...other} />;
+  const { noContainer = false, title, size, color } = props;
+  const progress = <CustomLoader title={title} size={size} color={color} />;
 
   if (noContainer) return progress;