grid load fix

packages/web/src/datagrid/DataGridCore.js

@@ -41,6 +41,7 @@ import { scriptToSql } from '@dbgate/sqltree';
 import { sleep } from '../utility/common';
 import { copyTextToClipboard } from '../utility/clipboard';
 import DataGridToolbar from './DataGridToolbar';
+import usePropsCompare from '../utility/usePropsCompare';
 
 const GridContainer = styled.div`
   position: absolute;
@@ -101,6 +102,8 @@ export default function DataGridCore(props) {
   const { conid, database, display, changeSetState, dispatchChangeSet, tabVisible } = props;
   const columns = display.getGridColumns();
 
+  // usePropsCompare(props);
+
   // console.log(`GRID, conid=${conid}, database=${database}, sql=${sql}`);
   const [loadProps, setLoadProps] = React.useState({
     isLoading: false,

packages/web/src/tabs/TableDataTab.js

@@ -9,6 +9,7 @@ import useConnectionInfo from '../utility/useConnectionInfo';
 import engines from '@dbgate/engines';
 import getTableInfo from '../utility/getTableInfo';
 import useUndoReducer from '../utility/useUndoReducer';
+import usePropsCompare from '../utility/usePropsCompare';
 
 export default function TableDataTab({ conid, database, schemaName, pureName, tabVisible, toolbarPortalRef }) {
   const tableInfo = useTableInfo({ conid, database, schemaName, pureName });
@@ -19,6 +20,9 @@ export default function TableDataTab({ conid, database, schemaName, pureName, ta
   // console.log('changeSet', changeSet);
 
   const connection = useConnectionInfo(conid);
+
+  // usePropsCompare({ tableInfo, connection, config, cache });
+
   const display = React.useMemo(
     () =>
       tableInfo && connection

packages/web/src/utility/usePrevious.js

@@ -0,0 +1,17 @@
+// copied from https://usehooks.com/usePrevious/
+
+import React from 'react';
+
+export default function usePrevious(value) {
+  const ref = React.useRef();
+
+  // Store current value in ref
+
+  React.useEffect(() => {
+    ref.current = value;
+  }, [value]); // Only re-run if value changes
+
+  // Return previous value (happens before update in useEffect above)
+
+  return ref.current;
+}

packages/web/src/utility/usePropsCompare.js

@@ -0,0 +1,12 @@
+import _ from 'lodash';
+import usePrevious from './usePrevious';
+
+export default function usePropsCompare(props) {
+  const prevProps = usePrevious(props);
+  if (!prevProps) return;
+  for (const key of _.union(_.keys(props), _.keys(prevProps))) {
+    if (props[key] !== prevProps[key]) {
+      console.log(`Different prop value found: prop=${key}, old=${prevProps[key]}, new=${prevProps[key]}`);
+    }
+  }
+}