[AURORA-1060] - добавлен лоадер для таблицы

web/src/components/RealtimeTable/RealtimeTable.jsx

@@ -22,9 +22,10 @@ import {
 } from './constants/tableConfig';
 import { useRealtime } from './contexts/RealtimeContext';
 import { toast } from 'react-toastify';
+import { CircularProgress } from '@mui/material';
 
 const RealtimeTable = ({ formType, formId, sheetName, direction }) => {
-  const { data, setData } = useRealtimeData(formId, sheetName, direction);
+  const { data, setData, isLoading: isTableLoading } = useRealtimeData(formId, sheetName, direction);
   const [globalFilter, setGlobalFilter] = useState('');
   const [showColumnFilters, setShowColumnFilters] = useState(false);
   const [selectedColumn, setSelectedColumn] = useState();
@@ -149,7 +150,8 @@ const RealtimeTable = ({ formType, formId, sheetName, direction }) => {
         columnVisibility,
         globalFilter,
         showColumnFilters,
-        rowSelection
+        rowSelection,
+        isLoading: isTableLoading,
       },
       initialState: {
         expanded: true
@@ -196,6 +198,7 @@ const RealtimeTable = ({ formType, formId, sheetName, direction }) => {
       containerRef,
       tableMeta,
       rowSelection,
+      isTableLoading,
     ],
   );
 
@@ -234,10 +237,6 @@ const RealtimeTable = ({ formType, formId, sheetName, direction }) => {
     setRowSelection({});
   }, [rowSelection, table])
 
-  if (!data) {
-    return <div>Загрузка...</div>;
-  }
-
   return (
     <>
       <SettingsPanel
@@ -269,6 +268,22 @@ const RealtimeTable = ({ formType, formId, sheetName, direction }) => {
           >
             <MaterialReactTable table={table} />
 
+            {isTableLoading && (
+              <div
+                style={{
+                  position: 'absolute',
+                  inset: 0,
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center',
+                  background: 'rgba(255, 255, 255, 0.6)',
+                  zIndex: 2,
+                }}
+              >
+                <CircularProgress />
+              </div>
+            )}
+
             {headerPortalRef.current &&
               createPortal(
                 <TableHead