Show cell pending state

Author: platypii

package.json

@@ -23,7 +23,7 @@
   },
   "dependencies": {
     "highlight.js": "11.10.0",
-    "hightable": "0.5.4",
+    "hightable": "0.5.5",
     "hyparquet": "1.5.0",
     "hyparquet-compressors": "0.1.4"
   },
@@ -34,12 +34,12 @@
     "@rollup/plugin-terser": "0.4.4",
     "@rollup/plugin-typescript": "12.1.1",
     "@testing-library/react": "16.0.1",
-    "@types/node": "22.7.6",
+    "@types/node": "22.7.7",
     "@types/react": "18.3.11",
     "@types/react-dom": "18.3.1",
-    "@vitejs/plugin-react": "4.3.2",
+    "@vitejs/plugin-react": "4.3.3",
     "@vitest/coverage-v8": "2.1.3",
-    "eslint": "9.12.0",
+    "eslint": "9.13.0",
     "globals": "15.11.0",
     "jsdom": "25.0.1",
     "react": "18.3.1",

public/HighTable.css

@@ -118,7 +118,43 @@
   white-space: nowrap;
 }
 
-/* pending state */
+/* pending cell state */
+.table td.pending {
+  position: relative;
+}
+.table td.pending::after {
+  content: '';
+  position: absolute;
+  top: 8px;
+  left: 8px;
+  right: 8px;
+  bottom: 8px;
+  border-radius: 4px;
+  background: linear-gradient(
+    60deg,
+    rgba(0, 0, 0, 0.05) 25%,
+    rgba(0, 0, 0, 0.08) 50%,
+    rgba(0, 0, 0, 0.05) 75%
+  );
+  background-size: 120px 100%;
+  animation: textshimmer 3s infinite linear;
+}
+/* stagger row shimmering */
+.table tr:nth-child(2n) td.pending::after { animation-delay: -1s; }
+.table tr:nth-child(2n+1) td.pending::after { animation-delay: -3s; }
+.table tr:nth-child(3n) td.pending::after { animation-delay: -2s; }
+.table tr:nth-child(5n) td.pending::after { animation-delay: -4s; }
+.table tr:nth-child(7n) td.pending::after { animation-delay: -1.5s; }
+@keyframes textshimmer {
+  0% {
+    background-position: -120px 0;
+  }
+  100% {
+    background-position: 120px 0;
+  }
+}
+
+/* pending table state */
 .table th::before {
   content: '';
   position: absolute;