fix(AnalyticalTable): block interaction during loading (#6602)

Author: Lukas742

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

@@ -92,13 +92,14 @@ const meta = {
         disableSortBy: true,
         Cell: (instance) => {
           const { cell, row, webComponentsReactProperties } = instance;
-          // disable buttons if overlay is active to prevent focus
-          const isOverlay = webComponentsReactProperties.showOverlay;
+          const { loading, showOverlay } = webComponentsReactProperties;
+          // disable buttons if overlay is active or the table is loading, to prevent focus
+          const disabled = loading || showOverlay;
           // console.log('This is your row data', row.original);
           return (
             <FlexBox>
-              <Button icon="edit" disabled={isOverlay} />
-              <Button icon="delete" disabled={isOverlay} />
+              <Button icon="edit" disabled={disabled} />
+              <Button icon="delete" disabled={disabled} />
             </FlexBox>
           );
         },

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

@@ -710,6 +710,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
               <span />
             </BusyIndicator>
           )}
+          {/*todo: use global CSS once --sapBlockLayer_Opacity is available*/}
           {showOverlay && (
             <>
               <span id={invalidTableTextId} className={classNames.hiddenA11yText} aria-hidden>
@@ -727,7 +728,7 @@ const AnalyticalTable = forwardRef<AnalyticalTableDomRef, AnalyticalTablePropTyp
           <div
             aria-labelledby={titleBarId}
             {...getTableProps()}
-            tabIndex={showOverlay ? -1 : 0}
+            tabIndex={loading || showOverlay ? -1 : 0}
             role="grid"
             aria-rowcount={rows.length}
             aria-colcount={visibleColumns.length}