feat: move depreacted Loader to compat package & replace with BusyIndicator

Author: Lukas742

packages/charts/src/internal/ChartContainer.tsx

@@ -1,7 +1,7 @@
-import { type CommonProps, Label, Loader } from '@ui5/webcomponents-react';
+import { type CommonProps, Label } from '@ui5/webcomponents-react';
 import { useStylesheet } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
-import type { ComponentType, CSSProperties, ReactElement, ReactNode } from 'react';
+import type { ComponentType, ReactElement, ReactNode } from 'react';
 import { Component, forwardRef } from 'react';
 import { ResponsiveContainer } from 'recharts';
 import { classNames, styleData } from './ChartContainer.module.css.js';
@@ -14,13 +14,6 @@ export interface ContainerProps extends CommonProps {
   resizeDebounce: number;
 }
 
-const loaderStyles: CSSProperties = {
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  right: 0
-};
-
 class ErrorBoundary extends Component<{ children: ReactNode }, { errorCount: number }> {
   state = {
     errorCount: 0
@@ -49,7 +42,8 @@ const ChartContainer = forwardRef<HTMLDivElement, ContainerProps>((props, ref) =
     <div ref={ref} className={clsx(classNames.container, className)} slot={slot} {...rest}>
       {dataset?.length > 0 ? (
         <>
-          {loading && <Loader style={loaderStyles} />}
+          {/*todo replace with BusyIndicator*/}
+          {loading && 'Loading...'}
           <ErrorBoundary>
             <ResponsiveContainer debounce={resizeDebounce}>{children}</ResponsiveContainer>
           </ErrorBoundary>

packages/compat/src/components/Loader/Loader.cy.tsx

@@ -1,9 +1,8 @@
+import { LoaderType } from '../../enums/index.js';
+import { Loader } from './index.js';
 import { cypressPassThroughTestsFactory } from '@/cypress/support/utils';
-import type { LoaderType } from '@/packages/main';
-import { Loader } from '@/packages/main';
 
-// skip until component is moved to this package
-describe.skip('Loader', () => {
+describe('Loader', () => {
   it('indeterminate', () => {
     cy.mount(<Loader data-testid="loader" />);
     cy.findByTestId('loader').should('have.css', 'animation-duration', '1.2s');

packages/main/src/components/Loader/Loader.mdx renamed to packages/compat/src/components/Loader/Loader.mdx

@@ -1,3 +1,41 @@
-.dummy {
-  background-color: red;
+.loader {
+  position: relative;
+  height: 0.25rem;
+  width: 100%;
+
+  &:before {
+    content: '';
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--sapContent_BusyColor);
+    opacity: 0.15;
+  }
+
+  &.loaderDeterminate {
+    background: linear-gradient(to right, var(--sapContent_BusyColor), var(--sapContent_BusyColor)) repeat-y;
+  }
+
+  &.loaderIndeterminate {
+    background-size: 40%;
+    background: linear-gradient(
+        to right,
+        transparent 0px,
+        var(--sapContent_BusyColor) calc(50% - 2rem),
+        var(--sapContent_BusyColor) calc(50% + 2rem),
+        transparent 100%
+      )
+      repeat-y;
+    animation: scroll 1.2s linear infinite;
+  }
+}
+
+@keyframes scroll {
+  0% {
+    background-position: -100% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
 }

packages/compat/src/components/Loader/Loader.module.css

@@ -1,22 +1,19 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import activateIcon from '@ui5/webcomponents-icons/dist/activate.js';
+import { Card, CardHeader, FlexBox, FlexBoxDirection, Icon, Text } from '@ui5/webcomponents-react';
 import { useEffect, useRef, useState } from 'react';
-import { FlexBoxDirection, LoaderType } from '../../enums/index.js';
-import { Card } from '../../webComponents/Card/index.js';
-import { CardHeader } from '../../webComponents/CardHeader/index.js';
-import { Icon } from '../../webComponents/Icon/index.js';
-import { Text } from '../../webComponents/Text/index.js';
-import { FlexBox } from '../FlexBox/index.js';
+import { LoaderType } from '../../enums/LoaderType.js';
 import { Loader } from './index.js';
 
 const meta = {
-  title: 'User Feedback / Loader',
+  title: 'Loader',
   component: Loader,
   argTypes: {},
   args: {
     type: LoaderType.Indeterminate,
     progress: '60%'
-  }
+  },
+  tags: ['package:@ui5/webcomponents-compat']
 } satisfies Meta<typeof Loader>;
 
 export default meta;

packages/main/src/components/Loader/Loader.stories.tsx renamed to packages/compat/src/components/Loader/Loader.stories.tsx

@@ -1,12 +1,14 @@
 'use client';
 
+import type { CommonProps } from '@ui5/webcomponents-react';
 import { deprecationNotice, useI18nBundle, useStylesheet } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import type { CSSProperties } from 'react';
 import { forwardRef, useEffect, useState } from 'react';
-import { LoaderType } from '../../enums/index.js';
-import { PLEASE_WAIT } from '../../i18n/i18n-defaults.js';
-import type { CommonProps } from '../../types/index.js';
+// todo: sb won't start with this (maybe because of vite.config alias paths?)
+// import { PLEASE_WAIT } from '@ui5/webcomponents-react/dist/i18n/i18n-defaults.js';
+import { PLEASE_WAIT } from '../../../../main/src/i18n/i18n-defaults.js';
+import { LoaderType } from '../../enums/LoaderType.js';
 import { classNames, styleData } from './Loader.module.css.js';
 
 export interface LoaderPropTypes extends CommonProps {
@@ -35,12 +37,10 @@ export interface LoaderPropTypes extends CommonProps {
 }
 
 /**
- * The `Loader` signals that an operation is currently being executed. It uses as little space as possible to allow the user to interact with the UI.<br />
- * It can be used to signal a data update on an already existing dataset, or where an expansion will happen.
- *
- * __Note:__ This component is __deprecated__ and will be removed with our next major release (v2.0.0)! Please use the [BusyIndicator](https://sap.github.io/ui5-webcomponents-react/?path=/docs/user-feedback-busyindicator--docs) instead.
+ * __Note__: There is no longer a concept of a Loader component defined by the UX guidelines! To indicate a loading state, please use the `BusyIndicator` instead. For backwards compatibility, the Loader is still available in the `@ui5/webcomponents-react-compat` package, but it may lack accessibility features and no longer receives feature updates.
  *
- * @deprecated This component is deprecated and will be removed with our next major release (v2.0.0)! Please use the [BusyIndicator](https://sap.github.io/ui5-webcomponents-react/?path=/docs/user-feedback-busyindicator--docs) instead.
+ * The `Loader` signals that an operation is currently being executed. It uses as little space as possible to allow the user to interact with the UI.
+ * It can be used to signal a data update on an already existing dataset, or where an expansion will happen.
  */
 const Loader = forwardRef<HTMLDivElement, LoaderPropTypes>((props, ref) => {
   const { className, type = LoaderType.Indeterminate, progress = '0px', slot, style, delay = 0, ...rest } = props;

packages/main/src/components/Loader/index.tsx renamed to packages/compat/src/components/Loader/index.tsx

@@ -3,3 +3,6 @@ export * from './components/TableCell/index.js';
 export * from './components/TableColumn/index.js';
 export * from './components/TableGroupRow/index.js';
 export * from './components/TableRow/index.js';
+export * from './components/Loader/index.js';
+
+export { LoaderType } from './enums/LoaderType.js';