charts: remove Loader

Author: Lukas742

package.json

@@ -44,8 +44,8 @@
     "@ui5/webcomponents-compat": "2.0.0-rc.6",
     "@ui5/webcomponents-fiori": "2.0.0-rc.6",
     "@ui5/webcomponents-icons": "2.0.0-rc.6",
-    "react": "19.0.0-rc-c21bcd627b-20240624",
-    "react-dom": "19.0.0-rc-c21bcd627b-20240624",
+    "react": "18",
+    "react-dom": "18",
     "remark-gfm": "^4.0.0",
     "tocbot": "4.28.2"
   },

packages/charts/src/internal/ChartContainer.module.css

@@ -3,11 +3,23 @@
   color: var(--sapTextColor);
   font-family: var(--sapFontFamily);
   width: 100%;
-  /*todo remove in v2*/
   height: 400px;
+  min-height: fit-content;
   position: relative;
 }
 
+.loading {
+  opacity: 0.4;
+}
+
+.busyIndicator {
+  /* todo: clarify if we want to use the block layer variable of ui5wc or our own approach*/
+  /*background: var(--_ui5_busy_indicator_block_layer);*/
+  position: absolute;
+  inset: 0;
+  height: 100%;
+}
+
 :global(.has-click-handler) {
   :global(.recharts-pie-sector),
   :global(.recharts-bar-rectangles),

packages/charts/src/internal/ChartContainer.tsx

@@ -1,11 +1,28 @@
-import { type CommonProps, Label } from '@ui5/webcomponents-react';
+import { BusyIndicator, Label } from '@ui5/webcomponents-react';
+import type { CommonProps } from '@ui5/webcomponents-react';
 import { useStylesheet } from '@ui5/webcomponents-react-base';
 import { clsx } from 'clsx';
 import type { ComponentType, ReactElement, ReactNode } from 'react';
 import { Component, forwardRef } from 'react';
 import { ResponsiveContainer } from 'recharts';
+// todo: same issue as with Loader import
+// import { addCustomCSSWithScoping } from '@ui5/webcomponents-react/dist/internal/addCustomCSSWithScoping.js';
+import { addCustomCSSWithScoping } from '../../../main/src/internal/addCustomCSSWithScoping.js';
 import { classNames, styleData } from './ChartContainer.module.css.js';
 
+//todo: add feature request for parts or even a fix if this turns out to be a bug
+addCustomCSSWithScoping(
+  'ui5-busy-indicator',
+  `
+:host([data-component-name="ChartContainerBusyIndicator"]) .ui5-busy-indicator-busy-area{
+    background:unset;
+},
+:host([data-component-name="ChartContainerBusyIndicator"]) .ui5-busy-indicator-busy-area:focus {
+    border-radius: 0;
+}
+`
+);
+
 export interface ContainerProps extends CommonProps {
   children: ReactElement;
   Placeholder?: ComponentType;
@@ -43,9 +60,17 @@ const ChartContainer = forwardRef<HTMLDivElement, ContainerProps>((props, ref) =
       {dataset?.length > 0 ? (
         <>
           {/*todo replace with BusyIndicator*/}
-          {loading && 'Loading...'}
+          {loading && (
+            <BusyIndicator
+              active
+              className={classNames.busyIndicator}
+              data-component-name="ChartContainerBusyIndicator"
+            />
+          )}
           <ErrorBoundary>
-            <ResponsiveContainer debounce={resizeDebounce}>{children}</ResponsiveContainer>
+            <ResponsiveContainer debounce={resizeDebounce} className={loading && classNames.loading}>
+              {children}
+            </ResponsiveContainer>
           </ErrorBoundary>
         </>
       ) : (

packages/main/src/components/AnalyticalTable/index.tsx

@@ -107,8 +107,7 @@ addCustomCSSWithScoping(
 :host([data-component-name="AnalyticalTableBusyIndicator"]) .ui5-busy-indicator-busy-area:focus {
 border-radius: 0;
 }
-
-    `
+`
 );
 
 /**

yarn.lock

@@ -19516,14 +19516,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:19.0.0-rc-c21bcd627b-20240624":
-  version: 19.0.0-rc-c21bcd627b-20240624
-  resolution: "react-dom@npm:19.0.0-rc-c21bcd627b-20240624"
+"react-dom@npm:18":
+  version: 18.3.1
+  resolution: "react-dom@npm:18.3.1"
   dependencies:
-    scheduler: "npm:0.25.0-rc-c21bcd627b-20240624"
+    loose-envify: "npm:^1.1.0"
+    scheduler: "npm:^0.23.2"
   peerDependencies:
-    react: 19.0.0-rc-c21bcd627b-20240624
-  checksum: 10c0/61570745ba25391e1659ccb4da5f315b6e8fc65597741fe28af36c33551623e2f984ac6ce6acea0a062f9c97dd6c556788c8b3cd97ad497788d5a66e291ce622
+    react: ^18.3.1
+  checksum: 10c0/a752496c1941f958f2e8ac56239172296fcddce1365ce45222d04a1947e0cc5547df3e8447f855a81d6d39f008d7c32eab43db3712077f09e3f67c4874973e85
   languageName: node
   linkType: hard
 
@@ -19626,10 +19627,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:19.0.0-rc-c21bcd627b-20240624":
-  version: 19.0.0-rc-c21bcd627b-20240624
-  resolution: "react@npm:19.0.0-rc-c21bcd627b-20240624"
-  checksum: 10c0/82a760b294b40a13b93a94c6d3c76265896977c7f270006082a8b2dc89d71894d1f51e77861e9316265c1f8a92bc09f1314c1e4679be48e44690d0ec74e0c688
+"react@npm:18":
+  version: 18.3.1
+  resolution: "react@npm:18.3.1"
+  dependencies:
+    loose-envify: "npm:^1.1.0"
+  checksum: 10c0/283e8c5efcf37802c9d1ce767f302dd569dd97a70d9bb8c7be79a789b9902451e0d16334b05d73299b20f048cbc3c7d288bbbde10b701fa194e2089c237dbea3
   languageName: node
   linkType: hard
 
@@ -20527,13 +20530,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"scheduler@npm:0.25.0-rc-c21bcd627b-20240624":
-  version: 0.25.0-rc-c21bcd627b-20240624
-  resolution: "scheduler@npm:0.25.0-rc-c21bcd627b-20240624"
-  checksum: 10c0/78dfa0cadc3f617933d01718ddf855ac9ee46d96e5ab46e839c9b7d13138afb304a5ac779b89d0c600095cfdca409758828536a187099a39d16100d5be4fc758
-  languageName: node
-  linkType: hard
-
 "scheduler@npm:^0.23.0":
   version: 0.23.0
   resolution: "scheduler@npm:0.23.0"
@@ -20543,6 +20539,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"scheduler@npm:^0.23.2":
+  version: 0.23.2
+  resolution: "scheduler@npm:0.23.2"
+  dependencies:
+    loose-envify: "npm:^1.1.0"
+  checksum: 10c0/26383305e249651d4c58e6705d5f8425f153211aef95f15161c151f7b8de885f24751b377e4a0b3dd42cce09aad3f87a61dab7636859c0d89b7daf1a1e2a5c78
+  languageName: node
+  linkType: hard
+
 "semver@npm:2 || 3 || 4 || 5, semver@npm:^5.6.0":
   version: 5.7.2
   resolution: "semver@npm:5.7.2"
@@ -22426,8 +22431,8 @@ __metadata:
     postcss-modules: "npm:^6.0.0"
     postcss-nesting: "npm:^12.0.3"
     prettier: "npm:^3.0.0"
-    react: "npm:19.0.0-rc-c21bcd627b-20240624"
-    react-dom: "npm:19.0.0-rc-c21bcd627b-20240624"
+    react: "npm:18"
+    react-dom: "npm:18"
     remark-gfm: "npm:^4.0.0"
     rimraf: "npm:^5.0.0"
     storybook: "npm:8.0.10"