Cb 4270 row counter add cancel button for big tables

webapp/packages/plugin-data-viewer/src/TableViewer/TableFooter/CancelTotalCountAction.m.css

@@ -21,3 +21,7 @@
   font-weight: 700;
   font-size: 12px;
 }
+
+.loader {
+  margin-right: 8px !important;
+}

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

@@ -7,21 +7,40 @@
  */
 import { observer } from 'mobx-react-lite';
 
-import { Container, IconButton, useTranslate } from '@cloudbeaver/core-blocks';
+import { Container, IconButton, Loader, s, useS, useTranslate } from '@cloudbeaver/core-blocks';
 
 import styles from './CancelTotalCountAction.m.css';
 
 interface Props {
   onClick: VoidFunction;
+  loading: boolean;
 }
 
-export const CancelTotalCountAction = observer(function CancelTotalCountAction({ onClick }: Props) {
+export const CancelTotalCountAction = observer(function CancelTotalCountAction({ onClick, loading }: Props) {
   const translate = useTranslate();
+  const style = useS(styles);
+
+  function handleClick() {
+    if (loading) {
+      return;
+    }
+
+    onClick();
+  }
 
   return (
-    <Container className={styles.action} title={translate('ui_processing_cancel')} noWrap center zeroBasis keepSize onClick={onClick}>
-      <IconButton className={styles.icon} name="cross" title={translate('ui_processing_cancel')} viewBox="0 0 32 32" />
-      <span className={styles.cancelText}>{translate('ui_processing_cancel')}</span>
+    <Container
+      className={s(style, { action: true })}
+      title={loading ? translate('ui_processing_canceling') : translate('ui_processing_cancel')}
+      noWrap
+      center
+      zeroBasis
+      keepSize
+      onClick={handleClick}
+    >
+      {loading && <Loader className={s(style, { loader: true })} small />}
+      {!loading && <IconButton disabled={loading} className={s(style, { icon: true })} name="cross" viewBox="0 0 32 32" />}
+      <span className={s(style, { cancelText: true })}>{translate('ui_processing_cancel')}</span>
     </Container>
   );
 });

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

@@ -10,6 +10,7 @@ import { useState } from 'react';
 
 import { useService } from '@cloudbeaver/core-di';
 import { NotificationService } from '@cloudbeaver/core-events';
+import { isNotNullDefined } from '@cloudbeaver/core-utils';
 
 import type { IDatabaseDataModel } from '../../DatabaseDataModel/IDatabaseDataModel';
 import type { IDatabaseResultSet } from '../../DatabaseDataModel/IDatabaseResultSet';
@@ -45,8 +46,8 @@ export const TableFooterRowCount: React.FC<Props> = observer(function TableFoote
     }
   }
 
-  if (loading) {
-    return <CancelTotalCountAction onClick={cancelTotalCount} />;
+  if (isNotNullDefined(model.source.totalCountRequestTask)) {
+    return <CancelTotalCountAction loading={model.source.totalCountRequestTask.cancelled} onClick={cancelTotalCount} />;
   }
 
   return <TotalCountAction loading={loading} resultIndex={resultIndex} model={model} onClick={loadTotalCount} />;