@nanoporetech-digital/components 3.0.0 → 3.1.1

package/dist/components/nano-table.js

@@ -3,8 +3,12 @@
  */
 import { consoleError, h, Fragment, getElement, getRenderingRef, proxyCustomElement, HTMLElement, createEvent, readTask, Host, Build } from '@stencil/core/internal/client';
 import { a as cyrb53 } from './math.js';
+import { d as debounce } from './throttle.js';
 import { c as createStore } from './index2.js';
-import { d as defineCustomElement$2 } from './icon.js';
+import { d as defineCustomElement$5 } from './icon.js';
+import { d as defineCustomElement$4 } from './progress-bar.js';
+import { d as defineCustomElement$3 } from './skeleton.js';
+import { d as defineCustomElement$2 } from './spinner.js';
 
 const CSSNAMESPACE = 'nano-tbl';
 
@@ -129,17 +133,11 @@ function colsToWorker(columns) {
   return safeColumns;
 }
 const stores = new WeakMap();
-async function generateStore(host, rows, columns) {
-  // augment data with some internal props
-  rows = rows.map((row, i) => ({
-    ...row,
-    __index: i,
-    __uuid: cyrb53(Object.values(row).join()),
-  }));
+async function generateStore(host, columns, scrollParent) {
   const store = {
-    data: createStore({ rows }),
+    data: createStore({ rows: [] }),
     config: createStore({ columns }),
-    general: createStore({ workerId: null }),
+    general: createStore({ workerId: null, scrollParent, host }),
   };
   const id = await createWorkerStore(store.data.state.rows, colsToWorker(store.config.state.columns));
   store.general.state.workerId = id;
@@ -174,9 +172,15 @@ function storeSetData(host, rows) {
   const store = stores.get(host);
   if (!store)
     return;
-  if (store.general.state.workerId)
-    syncDataToWorker(store.general.state.workerId, rows);
+  // augment data with some internal props
+  rows = rows.map((row, i) => ({
+    ...row,
+    __index: i,
+    __uuid: cyrb53(Object.values(row).join()),
+  }));
   store.data.state.rows = rows;
+  if (store.general.state.workerId)
+    return syncDataToWorker(store.general.state.workerId, rows);
 }
 function storeSetConfig(host, columns) {
   const store = stores.get(host);
@@ -331,7 +335,7 @@ function cellRender(rowIndex, colIndex) {
  * @param col - the current column config object
  * @returns - a JSX node
  */
-function colheadRender(col) {
+function colheadFootRender(col) {
   const tpl = col?.colTemplate;
   return tpl ? (tpl(h, col)) : (h(Fragment, null, col.title));
 }
@@ -358,33 +362,56 @@ const stickyVIOs = new WeakMap();
 function addHObserver(el, pos, cb) {
   if (stickyHIOs.get(el))
     return;
+  const store = fetchStores();
+  const root = store.general.state.scrollParent;
+  const host = store.general.state.host;
   const observer = new IntersectionObserver(([e]) => {
     const positions = {};
-    if (pos === 'start')
-      positions.start = e.boundingClientRect.x < 0 && !e.isIntersecting;
-    if (pos === 'end')
+    if (pos === 'start') {
+      positions.start =
+        e.boundingClientRect.x -
+          (host.getBoundingClientRect().x + root.scrollLeft) <
+          0 && !e.isIntersecting;
+    }
+    if (pos === 'end') {
+      // TODO - sort these out for RtL
       positions.end =
-        e.boundingClientRect.width > e.intersectionRect.width &&
+        e.boundingClientRect.right > e.boundingClientRect.width &&
           !e.isIntersecting;
+    }
     cb(positions);
-  }, { threshold: [1], rootMargin: '1px 0px 1px 0px' });
+  }, {
+    threshold: [1],
+    rootMargin: '1px 0px 1px 0px',
+    root: root === document.scrollingElement ? null : root,
+  });
   stickyHIOs.set(el, observer);
   requestAnimationFrame(() => observer.observe(el));
 }
 function addVObserver(el, pos, cb) {
   if (stickyVIOs.get(el))
     return;
+  const store = fetchStores();
+  const root = store.general.state.scrollParent;
+  const host = store.general.state.host;
   const observer = new IntersectionObserver(([e]) => {
-    console.log(e);
     const positions = {};
-    if (pos === 'top')
-      positions.top = e.boundingClientRect.y < 0 && !e.isIntersecting;
+    if (pos === 'top') {
+      positions.top =
+        e.boundingClientRect.y -
+          (host.getBoundingClientRect().y + root.scrollTop) <
+          0 && !e.isIntersecting;
+    }
     if (pos === 'bottom')
       positions.bottom =
         e.boundingClientRect.height > e.intersectionRect.height &&
           !e.isIntersecting;
     cb(positions);
-  }, { threshold: [0.99], rootMargin: '0px 100px 0px 100px' });
+  }, {
+    threshold: [0.99],
+    rootMargin: '0px 100px 0px 100px',
+    root: root === document.scrollingElement ? null : root,
+  });
   stickyVIOs.set(el, observer);
   requestAnimationFrame(() => observer.observe(el));
 }
@@ -457,7 +484,7 @@ const TableColHead = ({ column, headRenderer, onColumnOrderClick, onColumnPinned
       default:
         order = 'asc';
     }
-    onColumnOrderClick(order, column.prop, e.target.parentElement);
+    onColumnOrderClick(order, column.prop, e.target.closest('th'));
   }
   let extraProps = {};
   if (column.columnProperties) {
@@ -473,7 +500,7 @@ const TableColHead = ({ column, headRenderer, onColumnOrderClick, onColumnPinned
     },
   };
   let props = extraProps ? mergeProperties(baseProps, extraProps) : baseProps;
-  const content = colheadRender(column);
+  const content = colheadFootRender(column);
   if (!content)
     return h(Fragment, null);
   props =
@@ -491,8 +518,11 @@ const TableColHead = ({ column, headRenderer, onColumnOrderClick, onColumnPinned
         if (['top', 'bottom'].includes(headRenderer.pinned))
           addVObserver(th, headRenderer.pinned, onColumnPinned);
       } },
-      h("button", { class: `${CSSNAMESPACE}__order-btn`, onClick: handleColumnOrderClick },
-        colheadRender(column),
+      h("button", { class: {
+          [`${CSSNAMESPACE}__order-btn`]: true,
+          [`${CSSNAMESPACE}__cell-content`]: true,
+        }, onClick: handleColumnOrderClick },
+        colheadFootRender(column),
         !!column.filter && h("nano-icon", { name: "light/filter" }),
         !!column.order &&
           (column.order === 'desc' ? (h("nano-icon", { name: "solid/long-arrow-down" })) : (h("nano-icon", { name: "solid/long-arrow-up" }))),
@@ -505,11 +535,12 @@ const TableColHead = ({ column, headRenderer, onColumnOrderClick, onColumnPinned
       if (['top', 'bottom'].includes(headRenderer.pinned))
         addVObserver(th, headRenderer.pinned, onColumnPinned);
     } },
-    colheadRender(column),
-    !!column.filter && h("nano-icon", { name: "light/bars-filter" })));
+    h("div", { class: `${CSSNAMESPACE}__cell-content` },
+      colheadFootRender(column),
+      !!column.filter && h("nano-icon", { name: "light/bars-filter" }))));
 };
-const TableCell = ({ rowIndex, colIndex, }) => {
-  const content = cellRender(rowIndex, colIndex);
+const TableCell = ({ rowIndex, colIndex, nestedContent, }) => {
+  const content = nestedContent || cellRender(rowIndex, colIndex);
   if (!content)
     return h(Fragment, null);
   const store = fetchStores();
@@ -533,7 +564,8 @@ const TableCell = ({ rowIndex, colIndex, }) => {
   }
   return (h(CellType
   // role="gridcell"
-  , { ...props }, cellRender(rowIndex, colIndex)));
+  , { ...props },
+    h("div", { class: `${CSSNAMESPACE}__cell-content` }, content)));
 };
 
 const detectScrollSpeed = (() => {
@@ -591,7 +623,7 @@ function isInViewport(el, percentVisible = 100) {
       percentVisible);
 }
 
-const tableCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}nano-table{display:block;--max-col-width:200px;--color:var(--nano-color-mediumgrey, #68767e);--font-size:0.87rem;--cell-line-height:1.5;--border-color:var(--nano-color-palegrey, #b5aea7);--border-style:1px solid var(--border-color);--border-tint-color:var(--nano-color-blue, #90c6e7);--border-tint-style:2px solid var(--border-tint-color);--cell-bg-rgb:var(--nano-color-white-rgb);--head-bg-rgb:var(--cell-bg-rgb);--foot-bg-rgb:var(--cell-bg-rgb);--th-row-bg-rgb:var(--cell-bg-rgb);--ordered-bg-rgb:var(--nano-color-lightgrey-rgb);--td-padding:0.5rem 0.625rem 0.4125rem;--th-padding:0.875rem 0.625rem 0.6875rem;--head-th-padding:var(--th-padding);--foot-th-padding:var(--td-padding);--bookend-col-padding:2rem}.nano-tbl{color:var(--color);text-align:start;width:100%;font-size:var(--font-size);border-spacing:0 0;-webkit-margin-after:32px;margin-block-end:32px;border-collapse:separate;background:rgb(var(--cell-bg-rgb))}.nano-tbl__ordered{background-color:var(--ordered-bg);-webkit-border-start:var(--border-style);border-inline-start:var(--border-style);-webkit-border-end:var(--border-style);border-inline-end:var(--border-style)}.nano-tbl__order-btn{padding:0;border:none;outline:none;font:inherit;background:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:inherit;display:-webkit-box;display:-ms-flexbox;display:flex;gap:10px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.nano-tbl__status-icons{margin-inline:auto 10px;display:-webkit-box;display:-ms-flexbox;display:flex;gap:10px}.nano-tbl__loader{font-size:2rem;width:100%;display:block}.nano-tbl__caption{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nano-tbl__td,.nano-tbl__th{line-height:var(--cell-line-height);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;-webkit-border-after:var(--border-style);border-block-end:var(--border-style);padding:var(--td-padding);max-width:var(--max-col-width);background-color:rgb(var(--cell-bg-rgb))}@media (min-width: 768px){.nano-tbl__td:first-child,.nano-tbl__th:first-child{-webkit-padding-start:var(--bookend-col-padding) !important;padding-inline-start:var(--bookend-col-padding) !important}.nano-tbl__td:last-child,.nano-tbl__th:last-child{-webkit-padding-end:var(--bookend-col-padding) !important;padding-inline-end:var(--bookend-col-padding) !important}}thead .nano-tbl__td,thead .nano-tbl__th{padding:var(--head-th-padding);font-weight:800;background:rgba(var(--head-bg-rgb), 90%)}tfoot .nano-tbl__td,tfoot .nano-tbl__th{padding:var(--foot-th-padding);font-weight:800;-webkit-border-after:none;border-block-end:none;background:rgba(var(--foot-bg-rgb), 90%)}.nano-tbl__td.nano-tbl__ordered,.nano-tbl__th.nano-tbl__ordered{background-color:rgba(var(--ordered-bg-rgb), 0.8) !important}.nano-tbl tbody{will-change:scroll-position;visibility:visible}.nano-tbl tbody.nano-tbl__inactive{visibility:hidden}.nano-tbl th[scope=row]{font-weight:800;max-width:65vw;margin:0}.nano-tbl__pin{position:sticky}.nano-tbl__pin--start{inset-inline:-1px auto;will-change:scroll-position;overflow:visible}.nano-tbl__pin--start::after{content:\"\";position:absolute;inset:0;-webkit-box-shadow:5px 0 4px 0 rgba(0, 0, 0, 0.2);box-shadow:5px 0 4px 0 rgba(0, 0, 0, 0.2);opacity:0}.nano-tbl__pinned--start .nano-tbl__pin--start{z-index:1}.nano-tbl__pinned--start .nano-tbl__pin--start::after{opacity:1}.nano-tbl__pin--end{inset-inline:auto -1px}.nano-tbl__pin--end::after{content:\"\";position:absolute;inset:0;-webkit-box-shadow:-5px 0 4px 0 rgba(0, 0, 0, 0.2);box-shadow:-5px 0 4px 0 rgba(0, 0, 0, 0.2);opacity:0}.nano-tbl__pinned--end .nano-tbl__pin--end{z-index:2}.nano-tbl__pinned--end .nano-tbl__pin--end::after{opacity:1}.nano-tbl__pin--top{inset-block:-1px auto}.nano-tbl__pinned--top .nano-tbl__pin--top{z-index:3}.nano-tbl__pin--bottom{inset-block:auto -1px}.nano-tbl__pinned--bottom .nano-tbl__pin--bottom{z-index:4;-webkit-border-before:var(--border-tint-style);border-block-start:var(--border-tint-style)}.nano-tbl__pinned--top.nano-tbl__pinned--start .nano-tbl__pin--top.nano-tbl__pin--start{z-index:5}.nano-tbl__pinned--top.nano-tbl__pinned--end .nano-tbl__pin--top.nano-tbl__pin--end{z-index:5}.nano-tbl__pinned--bottom.nano-tbl__pinned--start .nano-tbl__pin--bottom.nano-tbl__pin--start{z-index:5}.nano-tbl__pinned--bottom.nano-tbl__pinned--end .nano-tbl__pin--bottom.nano-tbl__pin--end{z-index:5}.nano-tbl thead tr:last-of-type td,.nano-tbl thead tr:last-of-type th,.nano-tbl tfoot tr:last-of-type td,.nano-tbl tfoot tr:last-of-type th{-webkit-border-after:var(--border-tint-style);border-block-end:var(--border-tint-style)}.nano-tbl .unlimited-width{max-width:none}";
+const tableCss = ":host{box-sizing:border-box}*,*::before,*::after{box-sizing:border-box}[hidden]{display:none !important}@charset \"UTF-8\";nano-table{display:table;width:100%;--max-col-width:200px;--color:var(--nano-color-mediumgrey, #68767e);--font-size:0.87rem;--cell-line-height:1.5;--border-color:var(--nano-color-palegrey, #b5aea7);--border-style:1px solid var(--border-color);--border-tint-color:var(--nano-color-blue, #90c6e7);--border-tint-style:2px solid var(--border-tint-color);--cell-bg-rgb:var(--nano-color-white-rgb, 255 255 255);--head-bg-rgb:var(--cell-bg-rgb);--foot-bg-rgb:var(--cell-bg-rgb);--th-row-bg-rgb:var(--cell-bg-rgb);--ordered-bg-rgb:var(--nano-color-offwhite-rgb, 249 249 251);--td-padding:0.5rem 0.625rem 0.4125rem;--th-padding:0.875rem 0.625rem 0.6875rem;--head-th-padding:var(--th-padding);--foot-th-padding:var(--td-padding);--bookend-col-padding:2rem}.nano-tbl{color:var(--color);text-align:start;width:100%;font-size:var(--font-size);border-spacing:0 0;border-collapse:separate;background:rgb(var(--cell-bg-rgb));-webkit-border-end:1px solid transparent;border-inline-end:1px solid transparent}.nano-tbl__top-anchor{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nano-tbl__ordered{background-color:var(--ordered-bg);-webkit-border-start:var(--border-style);border-inline-start:var(--border-style);-webkit-border-end:var(--border-style);border-inline-end:var(--border-style)}.nano-tbl__order-btn{padding:0;border:none;outline:none;font:inherit;background:none;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:inherit;display:-webkit-box;display:-ms-flexbox;display:flex;gap:10px;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%}.nano-tbl__status-icons{margin-inline:auto 10px;display:-webkit-box;display:-ms-flexbox;display:flex;gap:10px}.nano-tbl__progress-bar{font-size:0.2rem;position:sticky;inset-block-start:0;inset-inline:0;z-index:10;-webkit-transition:scale 0.25s;transition:scale 0.25s;scale:0;width:100%;height:0}.nano-tbl__progress-bar--show{scale:1;height:auto}.nano-tbl__caption--hide{clip:rect(1px, 1px, 1px, 1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);block-size:1px;inline-size:1px;margin:-1px;overflow:hidden;padding:0;position:absolute}.nano-tbl__td,.nano-tbl__th{line-height:var(--cell-line-height);text-align:start;-webkit-border-after:var(--border-style);border-block-end:var(--border-style);max-width:var(--max-col-width);background-color:rgb(var(--cell-bg-rgb))}@media (min-width: 768px){.nano-tbl__td:first-child .nano-tbl__cell-content,.nano-tbl__th:first-child .nano-tbl__cell-content{-webkit-padding-start:var(--bookend-col-padding) !important;padding-inline-start:var(--bookend-col-padding) !important}.nano-tbl__td:last-child .nano-tbl__cell-content,.nano-tbl__th:last-child .nano-tbl__cell-content{-webkit-padding-end:var(--bookend-col-padding) !important;padding-inline-end:var(--bookend-col-padding) !important}}thead .nano-tbl__td,thead .nano-tbl__th{font-weight:800;background:rgba(var(--head-bg-rgb), 90%)}thead .nano-tbl__td .nano-tbl__cell-content,thead .nano-tbl__th .nano-tbl__cell-content{padding:var(--head-th-padding)}tfoot .nano-tbl__td,tfoot .nano-tbl__th{font-weight:800;-webkit-border-after:none;border-block-end:none;background:rgba(var(--foot-bg-rgb), 90%)}tfoot .nano-tbl__td .nano-tbl__cell-content,tfoot .nano-tbl__th .nano-tbl__cell-content{padding:var(--foot-th-padding)}.nano-tbl__td.nano-tbl__ordered,.nano-tbl__th.nano-tbl__ordered{background-color:rgba(var(--ordered-bg-rgb), 0.8) !important}.nano-tbl__cell-content{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:var(--td-padding)}.nano-tbl tbody{will-change:scroll-position;visibility:visible}.nano-tbl tbody.nano-tbl__inactive{visibility:hidden}.nano-tbl th[scope=row]{font-weight:800;max-width:65vw;margin:0}.nano-tbl__pin{position:sticky;z-index:1}.nano-tbl__pin--start{inset-inline:-1px auto;-webkit-transition:max-width 0.25s;transition:max-width 0.25s}.nano-tbl__pin--start::after{content:\"\";position:absolute;inset:0;-webkit-box-shadow:5px 0 4px 0 rgba(0, 0, 0, 0.2);box-shadow:5px 0 4px 0 rgba(0, 0, 0, 0.2);opacity:0;z-index:-1}.nano-tbl__pinned--start .nano-tbl__pin--start{z-index:2}@media (max-width: 576px){.nano-tbl__pinned--start .nano-tbl__pin--start{max-width:25vw !important}}.nano-tbl__pinned--start .nano-tbl__pin--start::after{opacity:1}.nano-tbl__pin--end{inset-inline:auto -1px;max-width:min(50vw, 200px);}.nano-tbl__pin--end::after{content:\"\";position:absolute;inset:0;-webkit-box-shadow:-5px 0 4px 0 rgba(0, 0, 0, 0.2);box-shadow:-5px 0 4px 0 rgba(0, 0, 0, 0.2);opacity:0;z-index:-1}.nano-tbl__pinned--end .nano-tbl__pin--end{z-index:3}.nano-tbl__pinned--end .nano-tbl__pin--end::after{opacity:1}@media (max-width: 576px){.nano-tbl__pin--start~.nano-tbl__pin--end{inset-inline:auto auto}.nano-tbl__pin--start~.nano-tbl__pin--end::after{display:none}}.nano-tbl__pin--top{inset-block:-1px auto}.nano-tbl__pinned--top .nano-tbl__pin--top{z-index:4}.nano-tbl__pin--bottom{inset-block:auto -1px}.nano-tbl__pinned--bottom .nano-tbl__pin--bottom{z-index:5;-webkit-border-before:var(--border-tint-style);border-block-start:var(--border-tint-style)}.nano-tbl__pinned--top.nano-tbl__pinned--start .nano-tbl__pin--top.nano-tbl__pin--start{z-index:6}.nano-tbl__pinned--top.nano-tbl__pinned--end .nano-tbl__pin--top.nano-tbl__pin--end{z-index:6}.nano-tbl__pinned--bottom.nano-tbl__pinned--start .nano-tbl__pin--bottom.nano-tbl__pin--start{z-index:6}.nano-tbl__pinned--bottom.nano-tbl__pinned--end .nano-tbl__pin--bottom.nano-tbl__pin--end{z-index:6}.nano-tbl thead tr:last-of-type td,.nano-tbl thead tr:last-of-type th,.nano-tbl tfoot tr:last-of-type td,.nano-tbl tfoot tr:last-of-type th{-webkit-border-after:var(--border-tint-style);border-block-end:var(--border-tint-style)}.nano-tbl .unlimited-width{max-width:none}.nano-tbl__spinner{font-size:1.5rem;-webkit-transition:scale 0.25s;transition:scale 0.25s;scale:0;padding:0.5rem;position:absolute;inset-block-end:0;inset-inline-start:calc(50% - 0.75rem);z-index:-1}.nano-tbl__spinner--show{scale:1;position:sticky}.nano-tbl nano-skeleton{line-height:var(--cell-line-height)}";
 
 function perMark(name, end = false) {
   if (!Build.isDev)
@@ -619,6 +651,9 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.nanoTblAfterFilter = createEvent(this, "nanoTblAfterFilter", 7);
     this.nanoTblBeforeSearch = createEvent(this, "nanoTblBeforeSearch", 7);
     this.nanoTblAfterSearch = createEvent(this, "nanoTblAfterSearch", 7);
+    this.debounceSetLoading = (l) => {
+      this._loading = l;
+    };
     this.renderId = 'tbl-' + id++;
     this.filters = [];
     this.currentFilters = '';
@@ -636,8 +671,10 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
      * @returns A promise
      */
     this.sortStart = async (order, column, element) => {
+      // did order change?
       if (this.currentSort === order + ':' + column)
         return;
+      this.loading = true;
       const sortEvent = this.nanoTblBeforeSort.emit({ column: column, order });
       if (sortEvent.defaultPrevented)
         return;
@@ -663,10 +700,13 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         console.warn('sort failed', e);
         this.currentSort = '';
       }
+      finally {
+        this.loading = false;
+      }
     };
     /**
-     * Attaches an intersection observer to each rendered tbody elements
-     * shows / hides intersecting blocks' and sets heights for when their hidden
+     * Attaches an intersection observer to each rendered tbody element
+     * shows / hides intersecting blocks' and sets heights for when they're hidden
      * @param el - the tbody element to observe
      * @param blockIndex - the rendering tbody we're attaching the IO to
      */
@@ -681,8 +721,8 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           // The Intersection Observer (IO) fires in an incorrect order when the scrolling is very fast
           // i.e. we go past blocks 3, 2, 1 and land on 0, but 3 can fire as 'intersecting' after 0.
           // To fix that, we check - for realsies - if the block IS visible.
-          // BUT that test is not as sensitive to a block being visible as the IO,
-          // so doesn't always fire if scrolling slowing
+          // BUT that test is not as sensitive to a block being visible via the IO,
+          // so doesn't always fire if scrolling slowly
           // *sigh*
           readTask(() => {
             if (this.scrollSpeed < 100 || isInViewport(el, 0.01)) {
@@ -699,7 +739,12 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
             }
           });
         }
-      }, { threshold: [0] });
+      }, {
+        threshold: [0],
+        root: this.scrollParent === document.scrollingElement
+          ? null
+          : this.scrollParent,
+      });
       blockIo.observe(el);
       this.blockIos.set(el, blockIo);
     };
@@ -711,7 +756,9 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.type = 'table';
     this.caption = undefined;
     this.showCaption = false;
-    this.rows = [];
+    this._loading = true;
+    this.placeholderSize = 5;
+    this.rows = undefined;
     this.columns = [];
     this.headRender = { pinned: 'top' };
     this.rowRender = undefined;
@@ -724,9 +771,29 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     this.blocks = [];
     this.activeBlocks = [0, 1, 2];
     this.measureHeight = 0;
+    this.debounceSetLoading = debounce(this.debounceSetLoading.bind(this), 50);
+  }
+  /** Will show a loading state when true.
+   * Will be shown automatically if `rows` is a promise waiting to resolve
+   * or when performing custom filtering or sorting  */
+  get loading() {
+    return this._loading;
+  }
+  set loading(l) {
+    this.debounceSetLoading(l);
   }
   handleRowsChange() {
-    storeSetData(this.host, this.rows);
+    if (!this.rows)
+      return;
+    this.loading = true;
+    Promise.resolve(this.rows).then(async (rows) => {
+      await storeSetData(this.host, rows);
+      if (!this.isReady) {
+        await this.columnInit();
+        this.setInitialBlockDimension();
+      }
+      this.loading = false;
+    });
   }
   handleColsChange() {
     storeSetConfig(this.host, this.columns);
@@ -774,6 +841,8 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   // uses the first 'tr' of an active block as our yard stick
   set measureEle(el) {
+    if (!el)
+      return;
     this.measureHeight = el.getBoundingClientRect().height;
     this.unitHeight =
       el.querySelector('tr')?.getBoundingClientRect().height || this.unitHeight;
@@ -821,6 +890,7 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     perMark('sort', true);
   }
   async searchStart() {
+    this.loading = true;
     const sortEvent = this.nanoTblBeforeSearch.emit({ term: this.searchTerm });
     if (sortEvent.defaultPrevented)
       return;
@@ -832,7 +902,12 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.nanoTblAfterSearch.emit({ term: this.searchTerm });
       perMark('search', true);
     }
-    catch (e) { }
+    catch (e) {
+      console.warn('search failed', e);
+    }
+    finally {
+      this.loading = false;
+    }
   }
   async filterStart(filters, additive = true) {
     if (filters) {
@@ -848,6 +923,7 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     }
     if (this.currentFilters === JSON.stringify(this.filters))
       return;
+    this.loading = true;
     const sortEvent = this.nanoTblBeforeFilter.emit({ filters: this.filters });
     if (sortEvent.defaultPrevented)
       return;
@@ -871,7 +947,12 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       this.filterComplete();
       perMark('search', true);
     }
-    catch (e) { }
+    catch (e) {
+      console.warn('filter failed', e);
+    }
+    finally {
+      this.loading = false;
+    }
   }
   filterComplete() {
     this.columns = this.columns.map((c) => {
@@ -886,16 +967,20 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   /** Scrolls to the top immediately - used whilst sorting / filtering */
   scrollToTop(element) {
     const scrollBehaviour = this.scrollParent.style?.scrollBehavior;
+    const scrollX = this.scrollParent.scrollLeft;
     this.scrollParent.style.scrollBehavior = 'auto';
-    this.host.scrollIntoView();
+    if (this.topAnchorEle && !isInViewport(this.topAnchorEle, 0.1))
+      this.topAnchorEle.scrollIntoView();
     if (element)
-      element.scrollIntoView();
+      element.scrollIntoView({ block: 'start' });
+    if (scrollX)
+      this.scrollParent.scrollLeft = scrollX;
     if (scrollBehaviour)
       this.scrollParent.style.scrollBehavior = scrollBehaviour;
   }
   setMeasureElement() {
     readTask(() => {
-      this.measureEle = this.blockElements.find((b) => !b.classList?.contains(`${CSSNAMESPACE}__inactive`));
+      this.measureEle = this.blockElements.find((b) => !b?.classList?.contains(`${CSSNAMESPACE}__inactive`));
     });
   }
   /**
@@ -921,11 +1006,6 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
           }
           if (i === this.blockElements.length - 1)
             resolve();
-          // const heightGuess = this.getBlockHeight(this.blockElements.indexOf(el));
-          // writeTask(() => {
-          //   el.style.height = heightGuess;
-          //   if (i === this.blockElements.length - 1) resolve();
-          // });
         });
       });
     });
@@ -1013,8 +1093,8 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
         if (!el)
           return;
         const height = el.getBoundingClientRect().height;
-        // cache height to our block heights
-        // array for subsequent renders
+        // cache height to our block heights array
+        // for subsequent renders
         const fBhI = this.blockHeights.findIndex((bh) => bh.blockIndex === blockIndex);
         if (fBhI > 0) {
           this.blockHeights[fBhI] = { height, blockIndex };
@@ -1034,8 +1114,8 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   // Component lifecycle
   async componentWillLoad() {
     perMark('init');
-    this.store = await generateStore(this.host, this.rows, this.columns);
-    await this.columnInit();
+    this.store = await generateStore(this.host, this.columns, this.scrollParent);
+    await this.handleRowsChange();
     this.processSlots();
     this.setBlocks();
     this.store.data.onChange('rows', () => this.setBlocks());
@@ -1063,9 +1143,17 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   }
   render() {
     this.blockElements = [];
-    return (h(Host, null, h("div", { "aria-labelledby": 'table-caption-' + this.renderId, tabindex: this.type === 'grid' ? '0' : undefined }, h("table", { role: this.type === 'grid' ? 'grid' : undefined, "aria-readonly": this.type === 'table' ? 'true' : undefined, "aria-rowcount": this.store.data.state.rows.length, "aria-colcount": this.store.config.state.columns.length, class: `${CSSNAMESPACE}`, ref: (tbl) => (this.tableEle = tbl) }, h("caption", { class: `${CSSNAMESPACE}__caption`, id: 'table-caption-' + this.renderId }, h("slot", { name: "caption" }, this.caption)), h("thead", null, h(TableHeadFootRow, { rowRenderer: this.headRender, onColumnPinned: this.handleColumnPinned }, this.store.config.state.columns.map((colModel) => [
+    return (h(Host, null, h("div", { class: `${CSSNAMESPACE}__top-anchor`, ref: (a) => (this.topAnchorEle = a) }, "\u00A0"), h("div", { "aria-labelledby": 'table-caption-' + this.renderId, tabindex: this.type === 'grid' ? '0' : undefined }, h("nano-progress-bar", { indeterminate: true, class: {
+        [`${CSSNAMESPACE}__progress-bar`]: true,
+        [`${CSSNAMESPACE}__progress-bar--show`]: this.loading,
+      } }), h("table", { role: this.type === 'grid' ? 'grid' : undefined, "aria-readonly": this.type === 'table' ? 'true' : undefined, "aria-rowcount": this.store.data.state.rows.length, "aria-colcount": this.store.config.state.columns.length, class: `${CSSNAMESPACE}`, ref: (tbl) => (this.tableEle = tbl) }, h("caption", { class: {
+        [`${CSSNAMESPACE}__caption`]: true,
+        [`${CSSNAMESPACE}__caption--hide`]: !this.showCaption,
+      }, id: 'table-caption-' + this.renderId }, h("slot", { name: "caption" }, this.caption)), h("thead", null, h(TableHeadFootRow, { rowRenderer: this.headRender, onColumnPinned: this.handleColumnPinned }, this.store.config.state.columns.map((colModel) => [
       h(TableColHead, { column: colModel, headRenderer: this.headRender, onColumnOrderClick: this.sortStart, onColumnPinned: this.handleColumnPinned }),
-    ]))), this.blocks.map((block, blockIndex) => (h("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
+    ]))), this.loading &&
+      !this.blocks.length &&
+      [...Array(10).keys()].map((rowIndex) => (h("tr", null, this.store.config.state.columns.map((_colModel, colIndex) => (h(TableCell, { rowIndex: rowIndex, colIndex: colIndex, nestedContent: h("nano-skeleton", null) })))))), this.blocks.map((block, blockIndex) => (h("tbody", { key: block.__uuid, id: `tbody-${this.renderId}-${blockIndex}`, ref: (tb) => {
         this.blockElements.push(tb);
         this.setupBlockIO(tb, blockIndex);
       }, class: {
@@ -1076,9 +1164,12 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
       return (h(TableRow, { rowRenderer: this.rowRender, row: row }, this.store.config.state.columns.map((_colModel, colIndex) => (h(TableCell, { rowIndex: rowIndex, colIndex: colIndex })))));
     })) : (h("td", { colSpan: this.store.config.state.columns.length, style: {
         height: this.getBlockHeight(blockIndex),
-      } }))))), (this.showFooter || !!this.footRender) && (h("tfoot", null, h(TableHeadFootRow, { rowRenderer: this.footRender, onColumnPinned: this.handleColumnPinned }, this.store.config.state.columns.map((colModel) => [
+      } }))))), this.showFooter && (h("tfoot", null, h(TableHeadFootRow, { rowRenderer: this.footRender, onColumnPinned: this.handleColumnPinned }, this.store.config.state.columns.map((colModel) => [
       h(TableColHead, { column: colModel, headRenderer: this.footRender, onColumnPinned: this.handleColumnPinned }),
-    ]))))))));
+    ]))))), !!this.blocks.length && (h("nano-spinner", { type: "circle", class: {
+        [`${CSSNAMESPACE}__spinner`]: true,
+        [`${CSSNAMESPACE}__spinner--show`]: this.loading,
+      } })))));
   }
   get host() { return this; }
   static get watchers() { return {
@@ -1091,6 +1182,8 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "type": [1],
     "caption": [1],
     "showCaption": [4, "show-caption"],
+    "loading": [6148],
+    "placeholderSize": [2, "placeholder-size"],
     "rows": [16],
     "columns": [1040],
     "headRender": [16],
@@ -1102,6 +1195,7 @@ const Table = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
     "searchTerm": [1, "search-term"],
     "customFilterFn": [16],
     "customSortFn": [16],
+    "_loading": [32],
     "blocks": [32],
     "activeBlocks": [32],
     "measureHeight": [32],
@@ -1114,7 +1208,7 @@ function defineCustomElement$1() {
   if (typeof customElements === "undefined") {
     return;
   }
-  const components = ["nano-table", "nano-icon"];
+  const components = ["nano-table", "nano-icon", "nano-progress-bar", "nano-skeleton", "nano-spinner"];
   components.forEach(tagName => { switch (tagName) {
     case "nano-table":
       if (!customElements.get(tagName)) {
@@ -1122,6 +1216,21 @@ function defineCustomElement$1() {
       }
       break;
     case "nano-icon":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$5();
+      }
+      break;
+    case "nano-progress-bar":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$4();
+      }
+      break;
+    case "nano-skeleton":
+      if (!customElements.get(tagName)) {
+        defineCustomElement$3();
+      }
+      break;
+    case "nano-spinner":
       if (!customElements.get(tagName)) {
         defineCustomElement$2();
       }