fix: Fix missing scrim background on LoadingOverlay (#2098)

Background class wasn't applied when LoadingOverlay has error or is
loading

Author: vbabich

packages/components/src/LoadingOverlay.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import LoadingOverlay from './LoadingOverlay';
+
+describe('LoadingOverlay', () => {
+  it('renders loading spinner and no scrim on initial loading', () => {
+    const { container } = render(
+      <LoadingOverlay isLoading data-testid="test-overlay" />
+    );
+    expect(screen.getByTestId('test-overlay-spinner')).toBeInTheDocument();
+    expect(
+      container.getElementsByClassName('iris-panel-scrim-background').length
+    ).toBe(0);
+  });
+
+  it('renders error message and no scrim when errorMessage is provided on initial loading', () => {
+    const errorMessage = 'An error occurred';
+    const { container } = render(
+      <LoadingOverlay errorMessage={errorMessage} />
+    );
+    const errorElement = screen.getByText(errorMessage);
+    expect(errorElement).toBeInTheDocument();
+    expect(
+      container.getElementsByClassName('iris-panel-scrim-background').length
+    ).toBe(0);
+  });
+
+  it('renders scrim when loaded and errorMessage is provided', () => {
+    const { container } = render(
+      <LoadingOverlay isLoaded errorMessage="ERROR_MESSAGE" />
+    );
+    expect(
+      container.getElementsByClassName('iris-panel-scrim-background').length
+    ).toBe(1);
+  });
+
+  it('renders scrim when isLoaded is true and loading again', () => {
+    const { container } = render(<LoadingOverlay isLoaded isLoading />);
+    expect(
+      container.getElementsByClassName('iris-panel-scrim-background').length
+    ).toBe(1);
+  });
+});

packages/components/src/LoadingOverlay.tsx

@@ -11,6 +11,9 @@ type LoadingOverlayProps = {
   isLoaded?: boolean;
   isLoading?: boolean;
   errorMessage?: string | null;
+  className?: string | null;
+  scrimClassName?: string;
+  timeout?: number | { enter?: number; exit?: number; appear?: number };
   'data-testid'?: string;
 };
 
@@ -21,6 +24,9 @@ function LoadingOverlay({
   isLoaded = false,
   isLoading = true,
   errorMessage = null,
+  className = null,
+  scrimClassName = 'iris-panel-scrim-background',
+  timeout = ThemeExport.transitionMs,
   'data-testid': dataTestId,
 }: LoadingOverlayProps): JSX.Element {
   const messageTestId =
@@ -31,8 +37,8 @@ function LoadingOverlay({
   return (
     <CSSTransition
       in={Boolean(errorMessage) || !isLoaded || isLoading}
-      timeout={ThemeExport.transitionMs}
-      classNames={isLoaded ? 'fade' : ''}
+      timeout={timeout}
+      classNames={classNames(className, { fade: isLoaded })}
       mountOnEnter
       unmountOnExit
     >
@@ -41,7 +47,7 @@ function LoadingOverlay({
           className={classNames(
             'iris-panel-message-overlay',
             'fill-parent-absolute',
-            { 'iris-panel-scrim-background': isLoaded }
+            { [scrimClassName]: isLoaded }
           )}
         >
           <div className="message-content">