CB-3386 fix: cleanup of useDynamicDataContext (#1638)

* CB-3386 fix: cleanup of useDynamicDataContext
CB-3386 fix: add suspense loader for data presentation

* CB-3386 fix: reset constraints only if we change dataFormat of the result

webapp/packages/core-view/src/DataContext/DynamicDataContext.ts

@@ -31,6 +31,10 @@ export class DynamicDataContext implements IDataContext {
   }
 
   setFallBack(fallback: IDataContext): void {
+    if (this.fallback === fallback) {
+      return;
+    }
+    this.flush();
     this.fallback = fallback;
   }
 

webapp/packages/core-view/src/DataContext/useDynamicDataContext.ts

@@ -7,9 +7,8 @@
  */
 
 import { untracked } from 'mobx';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
-import { useObjectRef } from '@cloudbeaver/core-blocks';
 
 import { DataContext } from './DataContext';
 import { DynamicDataContext } from './DynamicDataContext';
@@ -19,21 +18,17 @@ export function useDynamicDataContext(
   context: IDataContext | undefined,
   capture: (context: IDataContext) => void
 ): void {
-  const state = useObjectRef(() => ({
-    dynamic: new DynamicDataContext(context || new DataContext()),
-  }));
+  const [state] = useState(() => new DynamicDataContext(context || new DataContext()));
 
   untracked(() => {
     if (context) {
-      state.dynamic.setFallBack(context);
+      state.setFallBack(context);
     }
-
-    state.dynamic.flush();
   });
 
   useEffect(() => {
-    capture(state.dynamic);
+    capture(state);
   });
 
-  useEffect(() => () => state.dynamic.flush(), []);
+  useEffect(() => () => state.flush(), []);
 }

webapp/packages/plugin-data-viewer/src/TableViewer/TableViewer.tsx

@@ -132,10 +132,10 @@ export const TableViewer = observer<Props, HTMLDivElement>(forwardRef(function T
           presentation.dataFormat !== undefined
           && presentation.dataFormat !== this.dataModel?.source.dataFormat
         ) {
+          localActions.clearConstraints();
           this.dataModel?.setDataFormat(presentation.dataFormat).reload();
         }
 
-        localActions.clearConstraints();
         this.onPresentationChange(id);
       }
     },
@@ -206,18 +206,19 @@ export const TableViewer = observer<Props, HTMLDivElement>(forwardRef(function T
     }
   }, [needRefresh]);
 
-  useEffect(() => {
-    if (!presentationId || !dataModel) {
-      return;
-    }
+  // TODO: seems this code is not working because of setting dataFormat in presentation change
+  // useEffect(() => {
+  //   if (!presentationId || !dataModel) {
+  //     return;
+  //   }
 
-    const presentation = dataPresentationService.get(presentationId);
+  //   const presentation = dataPresentationService.get(presentationId);
 
-    if (presentation?.dataFormat && !dataModel.supportedDataFormats.includes(presentation.dataFormat)) {
-      localActions.clearConstraints();
-      onPresentationChange(dataFormat);
-    }
-  }, [dataFormat]);
+  //   if (presentation?.dataFormat && !dataModel.supportedDataFormats.includes(presentation.dataFormat)) {
+  //     // localActions.clearConstraints();
+  //     onPresentationChange(dataFormat);
+  //   }
+  // }, [dataFormat]);
 
   if (!dataModel) {
     return <Loader />;
@@ -278,15 +279,17 @@ export const TableViewer = observer<Props, HTMLDivElement>(forwardRef(function T
             keepRatio
           >
             <Pane>
-              <pane-content {...use({ grid:true })}>
-                <TableGrid
-                  model={dataModel}
-                  actions={dataTableActions}
-                  dataFormat={dataFormat}
-                  presentation={presentation}
-                  resultIndex={resultIndex}
-                  simple={simple}
-                />
+              <pane-content {...use({ grid: true })}>
+                <Loader suspense>
+                  <TableGrid
+                    model={dataModel}
+                    actions={dataTableActions}
+                    dataFormat={dataFormat}
+                    presentation={presentation}
+                    resultIndex={resultIndex}
+                    simple={simple}
+                  />
+                </Loader>
                 <TableError model={dataModel} loading={loading} />
                 <Loader
                   loading={loading}