@aquera/nile-visualization 1.0.0 → 1.1.0

package/dist/src/nile-executive-summary/nile-executive-summary.css.js

@@ -186,6 +186,14 @@ export const styles = css `
     word-break: break-word;
   }
 
+  /* ─── Skeleton loading state ───────────────────────────────────────────── */
+
+  .es-skeleton {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+  }
+
 @media (forced-colors: active) {
     .es-panel {
       border: 1px solid ButtonText;

package/dist/src/nile-executive-summary/nile-executive-summary.d.ts

@@ -71,6 +71,13 @@ export declare class NileExecutiveSummary extends NileElement {
      * Can be set programmatically; use `show()` / `hide()` for animated transitions.
      */
     open: boolean;
+    /**
+     * Whether the drawer body is in a loading state. When `true`, the body renders
+     * `nile-skeleton-loader` placeholders instead of the typed summary. Toggle it
+     * off (set to `false`) once data arrives from the API — at which point the
+     * typewriter animation begins if the drawer is already open.
+     */
+    loading: boolean;
     /** @internal Characters revealed so far during typing. */
     private displayedText;
     /** @internal Whether typing is still in progress (drives cursor visibility). */
@@ -90,6 +97,7 @@ export declare class NileExecutiveSummary extends NileElement {
     private stopTyping;
     /** Opens the drawer with animation. Resolves when the animation completes. */
     show(): Promise<void>;
+    updated(changed: Map<string, unknown>): void;
     /** Closes the drawer with animation. Resolves when the animation completes. */
     hide(): Promise<void>;
     render(): TemplateResult;

package/dist/src/nile-executive-summary/nile-executive-summary.js

@@ -72,6 +72,13 @@ let NileExecutiveSummary = class NileExecutiveSummary extends NileElement {
          * Can be set programmatically; use `show()` / `hide()` for animated transitions.
          */
         this.open = false;
+        /**
+         * Whether the drawer body is in a loading state. When `true`, the body renders
+         * `nile-skeleton-loader` placeholders instead of the typed summary. Toggle it
+         * off (set to `false`) once data arrives from the API — at which point the
+         * typewriter animation begins if the drawer is already open.
+         */
+        this.loading = false;
         /** @internal Characters revealed so far during typing. */
         this.displayedText = '';
         /** @internal Whether typing is still in progress (drives cursor visibility). */
@@ -185,7 +192,13 @@ let NileExecutiveSummary = class NileExecutiveSummary extends NileElement {
         await Promise.all([this.animatePanel(true), this.animateOverlay(true)]);
         requestAnimationFrame(() => this.panel.focus({ preventScroll: true }));
         this.emit('nile-after-show');
-        this.startTyping();
+        if (!this.loading)
+            this.startTyping();
+    }
+    updated(changed) {
+        if (changed.has('loading') && changed.get('loading') === true && !this.loading && this.open) {
+            this.startTyping();
+        }
     }
     /** Closes the drawer with animation. Resolves when the animation completes. */
     async hide() {
@@ -264,12 +277,24 @@ let NileExecutiveSummary = class NileExecutiveSummary extends NileElement {
             </header>
 
             <div part="body" class="es-body">
-              <div
-                class=${classMap({
-            'es-typed-text': true,
-            'es-typed-text--typing': this.isTyping,
-        })}
-              >${unsafeHTML(this.displayedText)}</div>
+              ${this.loading
+            ? html `
+                    <div part="skeleton" class="es-skeleton" aria-busy="true" aria-live="polite">
+                      <nile-skeleton-loader variant="text" width="90%"></nile-skeleton-loader>
+                      <nile-skeleton-loader variant="text" width="95%"></nile-skeleton-loader>
+                      <nile-skeleton-loader variant="text" width="80%"></nile-skeleton-loader>
+                      <nile-skeleton-loader variant="text" width="70%"></nile-skeleton-loader>
+                      <nile-skeleton-loader variant="text" width="85%"></nile-skeleton-loader>
+                    </div>
+                  `
+            : html `
+                    <div
+                      class=${classMap({
+                'es-typed-text': true,
+                'es-typed-text--typing': this.isTyping,
+            })}
+                    >${unsafeHTML(this.displayedText)}</div>
+                  `}
               <slot></slot>
             </div>
 
@@ -295,6 +320,9 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileExecutiveSummary.prototype, "open", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileExecutiveSummary.prototype, "loading", void 0);
 __decorate([
     state()
 ], NileExecutiveSummary.prototype, "displayedText", void 0);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aquera/nile-visualization",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "A visualization Library for the Nile Design System",
   "license": "MIT",
   "author": "Aquera Inc",