feat(table): added loading state (#2483)

eBay · Nov 6, 2024 · fef21d3 · fef21d3
1 parent 207c518
commit fef21d3
Show file tree

Hide file tree

Showing 5 changed files with 1,374 additions and 0 deletions.
diff --git a/.changeset/selfish-flowers-kneel.md b/.changeset/selfish-flowers-kneel.md
@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(table): added loading state
diff --git a/dist/table/table.css b/dist/table/table.css
@@ -77,6 +77,7 @@
 .table--freeze-column-3 tr td:nth-child(-n + 3),
 .table--freeze-column-3 tr th:nth-child(-n + 3) {
     left: 0;
+    max-width: 124px;
     position: sticky;
 }
 
@@ -149,6 +150,34 @@
     padding-inline-end: 0;
 }
 
+.table--loading-state {
+    overflow: hidden;
+}
+
+.table--loading-state table {
+    opacity: 0.15;
+    -webkit-user-select: none;
+    user-select: none;
+}
+
+.table--loading-state .signal,
+.table--loading-state img {
+    filter: var(--color-media-disabled-filter);
+}
+
+.table--loading-state a {
+    cursor: default;
+    pointer-events: none;
+    text-decoration: none;
+}
+
+.table--loading-state .progress-bar-expressive {
+    bottom: 50%;
+    left: 0;
+    position: absolute;
+    right: 0;
+}
+
 .table--mode-selection td:first-child,
 .table--mode-selection th:first-child {
     min-width: 48px;