(core) Polish display of table row counts

Summary:
Adds a new dots loader, which is used on the Raw Data page when
certain values are still being calculated (e.g. row counts). Now metrics
whose values aren't known yet will still appear under Usage, but with a
"Loading" message and the dots loader shown. For per-table row counts,
we only show the loader.

Test Plan: Existing tests.

Reviewers: jarek

Reviewed By: jarek

Subscribers: jarek

Differential Revision: https://phab.getgrist.com/D3566

app/client/components/DataTables.ts

@@ -7,6 +7,7 @@ import {showTransientTooltip} from 'app/client/ui/tooltips';
 import {buildTableName} from 'app/client/ui/WidgetTitle';
 import * as css from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
+import {loadingDots} from 'app/client/ui2018/loaders';
 import {menu, menuItem, menuText} from 'app/client/ui2018/menus';
 import {confirmModal} from 'app/client/ui2018/modals';
 import {Computed, Disposable, dom, fromKo, makeTestId, Observable, styled} from 'grainjs';
@@ -22,6 +23,9 @@ export class DataTables extends Disposable {
     }
   );
 
+  // TODO: Update this whenever the rest of the UI is internationalized.
+  private readonly _rowCountFormatter = new Intl.NumberFormat('en-US');
+
   constructor(private _gristDoc: GristDoc) {
     super();
     this._tables = Computed.create(this, use => {
@@ -139,18 +143,19 @@ export class DataTables extends Disposable {
   }
 
   private _tableRows(table: TableRec) {
-    return cssTableRowsWrapper(
-      cssUpperCase("Rows: "),
-      cssTableRows(
-        testId('table-rows'),
-        dom.text(use => {
-          const rowCounts = use(this._rowCount);
-          if (typeof rowCounts !== 'object') { return ''; }
+    return dom.maybe(this._rowCount, (rowCounts) => {
+      if (rowCounts === 'hidden') { return null; }
 
-          return rowCounts[table.getRowId()]?.toString() ?? '';
-        }),
-      ),
-    );
+      return cssTableRowsWrapper(
+        cssUpperCase("Rows: "),
+        rowCounts === 'pending' ? cssLoadingDots() : cssTableRows(
+          rowCounts[table.getRowId()] !== undefined
+            ? this._rowCountFormatter.format(rowCounts[table.getRowId()])
+            : '',
+          testId('table-rows'),
+        )
+      );
+    });
   }
 }
 
@@ -285,3 +290,7 @@ const cssTableList = styled('div', `
   position: relative;
   margin-bottom: 56px;
 `);
+
+const cssLoadingDots = styled(loadingDots, `
+  --dot-size: 6px;
+`);