fix(AnalyticalTable): BusyIndicator is displayed when loading prop is true (#61)

Author: Lukas742

packages/main/__karma_snapshots__/AnalyticalTable.md

@@ -577,9 +577,9 @@
                   </WithStyles(Pagination)>
                 </div>
                 <CustomLoadingComponent loading={false} loadingText="Loading...">
-                  <div className="-loading">
-                    <BusyIndicator size="Large">
-                      <ui5-busyindicator size="Large" class="" />
+                  <div className="-loading" style={{...}}>
+                    <BusyIndicator size="Medium" active={true} style={{...}}>
+                      <ui5-busyindicator active={true} size="Medium" style={{...}} class="" />
                     </BusyIndicator>
                   </div>
                 </CustomLoadingComponent>
@@ -1185,9 +1185,9 @@
                   </WithStyles(Pagination)>
                 </div>
                 <CustomLoadingComponent loading={false} loadingText="Loading...">
-                  <div className="-loading">
-                    <BusyIndicator size="Large">
-                      <ui5-busyindicator size="Large" class="" />
+                  <div className="-loading" style={{...}}>
+                    <BusyIndicator size="Medium" active={true} style={{...}}>
+                      <ui5-busyindicator active={true} size="Medium" style={{...}} class="" />
                     </BusyIndicator>
                   </div>
                 </CustomLoadingComponent>

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

@@ -12,15 +12,16 @@ import { ColumnHeader } from './columnHeader';
 import { Pagination } from './pagination';
 import { TitleBar } from './titleBar';
 import { FilterEntry } from './types/FilterEntry';
+import { BusyIndicatorType } from '../../lib/BusyIndicatorType';
 
 const CustomLoadingComponent = (props) => {
   let className = '-loading';
   if (props.loading) {
     className += ' -active';
   }
   return (
-    <div className={className}>
-      <BusyIndicator />
+    <div className={className} style={{ display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+      <BusyIndicator size={BusyIndicatorType.Medium} active style={{ backgroundColor: 'transparent' }} />
     </div>
   );
 };