(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/ui2018/loaders.ts

@@ -1,5 +1,5 @@
 import {colors} from 'app/client/ui2018/cssVars';
-import {keyframes, styled} from 'grainjs';
+import {DomArg, keyframes, styled} from 'grainjs';
 
 const rotate360 = keyframes(`
   from { transform: rotate(45deg); }
@@ -7,6 +7,15 @@ const rotate360 = keyframes(`
   to { transform: rotate(405deg); }
 `);
 
+const flash = keyframes(`
+  0% {
+    background-color: ${colors.lightGreen};
+  }
+  50%, 100% {
+    background-color: ${colors.darkGrey};
+  }
+`);
+
 /**
  * Creates a 32x32 pixel loading spinner. Use by calling `loadingSpinner()`.
  */
@@ -20,3 +29,40 @@ export const loadingSpinner = styled('div', `
   border-top-color: ${colors.lightGreen};
   animation: ${rotate360} 1s ease-out infinite;
 `);
+
+/**
+ * Creates a three-dots loading animation. Use by calling `loadingDots()`.
+ */
+export function loadingDots(...args: DomArg<HTMLDivElement>[]) {
+  return cssLoadingDotsContainer(
+    cssLoadingDot(cssLoadingDot.cls('-left')),
+    cssLoadingDot(cssLoadingDot.cls('-middle')),
+    cssLoadingDot(cssLoadingDot.cls('-right')),
+    ...args,
+  );
+}
+
+const cssLoadingDotsContainer = styled('div', `
+  --dot-size: 10px;
+  display: inline-flex;
+  column-gap: calc(var(--dot-size) / 2);
+`);
+
+const cssLoadingDot = styled('div', `
+  border-radius: 50%;
+  width: var(--dot-size);
+  height: var(--dot-size);
+  background-color: ${colors.lightGreen};
+  color: ${colors.lightGreen};
+  animation: ${flash} 1s alternate infinite;
+
+  &-left {
+    animation-delay: 0s;
+  }
+  &-middle {
+    animation-delay: 0.25s;
+  }
+  &-right {
+    animation-delay: 0.5s;
+  }
+`);