diff --git a/nx2/blocks/ew-actions/ew-actions.css b/nx2/blocks/ew-actions/ew-actions.css index 1eec6a5c5..86df96cf0 100644 --- a/nx2/blocks/ew-actions/ew-actions.css +++ b/nx2/blocks/ew-actions/ew-actions.css @@ -106,6 +106,32 @@ height: 18px; } +.preview-dropdown-btn.is-busy:disabled { + color: light-dark(var(--s2-gray-25), #fff); + background-color: var(--s2-blue-900); +} + +.preview-dropdown-spinner { + display: block; + flex-shrink: 0; + width: 12px; + height: 12px; + border: 2px solid currentcolor; + border-top-color: transparent; + border-radius: 50%; + animation: preview-dropdown-spin 0.6s linear infinite; +} + +@keyframes preview-dropdown-spin { + to { transform: rotate(360deg); } +} + +@media (prefers-reduced-motion: reduce) { + .preview-dropdown-spinner { + animation-duration: 1.5s; + } +} + .preview-dropdown-label { white-space: nowrap; } diff --git a/nx2/blocks/ew-actions/ew-actions.js b/nx2/blocks/ew-actions/ew-actions.js index f61585320..b31359c4b 100644 --- a/nx2/blocks/ew-actions/ew-actions.js +++ b/nx2/blocks/ew-actions/ew-actions.js @@ -58,8 +58,6 @@ class NXEwActions extends LitElement { _dialog: { state: true }, }; - _busy = false; - get _popover() { return this.shadowRoot?.querySelector('nx-popover'); } @@ -78,6 +76,7 @@ class NXEwActions extends LitElement { connectedCallback() { super.connectedCallback(); + this._busy = false; this.shadowRoot.adoptedStyleSheets = [style]; this._unsubHash = hashChange.subscribe((state) => { this._hashState = state; }); this._loadPrepare(); @@ -254,14 +253,16 @@ class NXEwActions extends LitElement { ` : nothing}