[UIK-5801][data-table] fixed loading spinner for grouped headers and scroll inside table

semcore/base-components/src/components/scroll-area/ScrollArea.type.ts

@@ -97,7 +97,11 @@ declare namespace NSScrollArea {
       type Component = NSBox.Component;
     }
 
-    type Component = Intergalactic.Component<'div', Props, Ctx> & {
+    interface Instance {
+      get isScrollVisible(): boolean;
+    }
+
+    type Component = Intergalactic.Component<'div', Props, Ctx, [], Instance> & {
       Slider: Slider.Component;
     };
   }

semcore/base-components/src/components/scroll-area/ScrollBar.tsx

@@ -40,7 +40,7 @@ class ScrollBarRoot extends Component<
   { container: React.RefObject<HTMLElement | null> },
   NSScrollArea.Bar.State,
   NSScrollArea.Bar.DefaultProps
-> {
+> implements NSScrollArea.Bar.Instance {
   static displayName = 'Bar';
 
   static style = style;
@@ -70,6 +70,10 @@ class ScrollBarRoot extends Component<
     visibleScroll: false,
   };
 
+  public get isScrollVisible(): boolean {
+    return this.state.visibleScroll;
+  }
+
   get $container(): Element | null {
     return this.asProps.container.current;
   }

semcore/data-table/src/components/Body/Body.tsx

@@ -237,6 +237,8 @@ class BodyRoot<Data extends DataTableData, UniqKeyType> extends Component<DataTa
       rows,
       renderCellOverlay,
       selectedRows,
+      hasGroups,
+      scrollBarInstanceRef,
     } = this.asProps;
 
     let rowsToRender = rows;
@@ -394,7 +396,9 @@ class BodyRoot<Data extends DataTableData, UniqKeyType> extends Component<DataTa
           <SSpinContainer
             innerOutline
             // @ts-ignore
+            hasGroups={hasGroups}
             headerHeight={`${this.getSpinnerTopOffset()}px`}
+            tableInnerVerticalScroll={scrollBarInstanceRef.current?.isScrollVisible}
             tabIndex={-1}
             ref={spinnerRef}
             role='row'

semcore/data-table/src/components/Body/Body.types.ts

@@ -1,3 +1,4 @@
+import type { NSScrollArea } from '@semcore/base-components';
 import type { Intergalactic } from '@semcore/core';
 import type * as React from 'react';
 
@@ -96,6 +97,7 @@ export type BodyPropsInner<Data extends DataTableData, UniqKeyType> = DataTableB
   variant?: DataTableProps<any, any, any>['variant'];
   totalRows?: number;
   accordionAnimationRows: RowPropsInner<Data, UniqKeyType>['accordionAnimationRows'];
+  scrollBarInstanceRef: React.RefObject<NSScrollArea.Bar.Instance>;
 };
 
 export type DataTableBodyType = (<

semcore/data-table/src/components/Body/style.shadow.css

@@ -270,7 +270,7 @@ SCellWrapper[fixed] {
 }
 
 SSpinContainer {
-  grid-area: 2 / 1 / 20 / 5;
+  grid-area: 2 / 1 / 20 / -1;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -287,6 +287,16 @@ SSpinContainer {
     top: 0;
     height: min(100vh, calc(var(--global-table-height) - var(--headerHeight)));
     min-height: min(100vh, calc(var(--global-table-height) - var(--headerHeight)));
+    max-width: 100vw;
+    left: 0;
+  }
+
+  &[tableInnerVerticalScroll][headerHeight] {
+    top: var(--headerHeight);
+  }
+
+  &[hasGroups] {
+    grid-area: 3 / 1 / 20 / -1;
   }
 }
 

semcore/data-table/src/components/DataTable/DataTable.tsx

@@ -1,3 +1,4 @@
+import type { NSScrollArea } from '@semcore/base-components';
 import { Box, ScrollArea } from '@semcore/base-components';
 import { Component, createComponent, lastInteraction, Root, sstyled } from '@semcore/core';
 import canUseDOM from '@semcore/core/lib/utils/canUseDOM';
@@ -116,6 +117,7 @@ class DataTableRoot<
   private focusedCell: [RowIndex, ColIndex] = [-1, -1];
 
   private scrollAreaRef = React.createRef<HTMLDivElement>();
+  private scrollBarInstanceRef = React.createRef<React.RefObject<NSScrollArea.Bar.Instance>>();
 
   private tableContainerRef = React.createRef<HTMLDivElement>();
   private tableRef = React.createRef<HTMLDivElement>();
@@ -420,6 +422,7 @@ class DataTableRoot<
       limit,
       variant,
       totalRows,
+      scrollBarInstanceRef: this.scrollBarInstanceRef,
     };
   }
 
@@ -1018,6 +1021,7 @@ class DataTableRoot<
           topOffset={topOffset}
           withHeaderScrollBar={headerProps?.withScrollBar}
           withAnimation={this.withAnimation}
+          scrollBarInstanceRef={this.scrollBarInstanceRef}
         />
 
         {selectedRows !== undefined && !Array.isArray(selectedRows) && (

semcore/data-table/src/components/DataTable/ScrollBars.tsx

@@ -1,3 +1,4 @@
+import type { NSScrollArea } from '@semcore/base-components';
 import { ScrollArea } from '@semcore/base-components';
 import { sstyled } from '@semcore/core';
 import React from 'react';
@@ -9,14 +10,15 @@ type Props = {
   withHeaderScrollBar?: boolean;
   topOffset?: number;
   withAnimation: boolean;
+  scrollBarInstanceRef: React.RefObject<NSScrollArea.Bar.Instance>;
 };
 
 const SCROLL_BAR_HEIGHT = 12;
 
 export class ScrollBars extends React.PureComponent<Props> {
   render() {
     const SScrollAreaBarInHeader = ScrollArea.Bar;
-    const { loading, topOffset, withHeaderScrollBar, withAnimation } = this.props;
+    const { loading, topOffset, withHeaderScrollBar, withAnimation, scrollBarInstanceRef } = this.props;
 
     return sstyled(styles)(
       <>
@@ -33,7 +35,7 @@ export class ScrollBars extends React.PureComponent<Props> {
         {!loading && (
           <>
             <ScrollArea.Bar orientation='horizontal' zIndex={20} />
-            <ScrollArea.Bar orientation='vertical' zIndex={20} />
+            <ScrollArea.Bar orientation='vertical' zIndex={20} instanceRef={scrollBarInstanceRef} />
           </>
         )}
       </>,

stories/components/data-table/advanced/examples/table_perf/table_perf.tsx

@@ -218,7 +218,6 @@ const Demo = (demoProps: AccordionInTableProps) => {
         loading={demoProps.loading}
         data={data}
         aria-label='Accordion inside table'
-        h='100%'
         defaultGridTemplateColumnWidth='1fr'
         columns={cols}
         renderCell={(props) => {