@pb33f/cowboy-components 0.7.2 → 0.7.3

package/dist/components/time-vortex/tardis-control.css.js

@@ -93,11 +93,42 @@ export default css `
     }
 
 
+    #loading-spinner {
+        padding: 5px 50px 5px 50px;
+        text-align: center;
+    }
+
+    .spinner-icon {
+        display: block;
+        margin: 20px auto 0 auto;
+        width: 200px;
+        color: var(--primary-color);
+        font-size: 6rem;
+        animation: spin 2s linear infinite;
+    }
+
+    @keyframes spin {
+        0% {
+            transform: rotate(0deg);
+        }
+        100% {
+            transform: rotate(360deg);
+        }
+    }
+
     .tardis-split-panel {
         --min: 300px;
         --max: calc(100vh - 400px);
         height: calc(100vh - 160px);
     }
-
+    .loading {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        top: 0;
+        left: 0;
+        background: var(--background-color-withopacity);
+        z-index: 10
+    }
 
 `;

package/dist/components/time-vortex/tardis-control.d.ts

@@ -15,6 +15,7 @@ export declare class TardisControl extends Colorful {
     changeGraph?: GraphResponse;
     history?: ChangeHistory;
     chartOptions?: any;
+    loading: boolean;
     changeDoughnut: DoughnutChart;
     breakingDoughnut: DoughnutChart;
     specSummary: SpecSummary | null;

package/dist/components/time-vortex/tardis-control.js

@@ -30,6 +30,7 @@ let TardisControl = class TardisControl extends Colorful {
         this.explorer.renderEqualizer = false;
         this.explorer.equalizer.renderEqualizer = false;
         this.timelineView = new TimelineView();
+        this.loading = false;
         //@ts-ignore
         this.addEventListener(ExplorerNodeClicked, this.explorerNodeClicked.bind(this));
     }
@@ -53,11 +54,8 @@ let TardisControl = class TardisControl extends Colorful {
             });
         }
     }
-    // firstUpdated() {
-    //     super.firstUpdated()
-    //     this.fetchHistory()
-    // }
     fetchHistory() {
+        this.loading = true;
         TimelineService.fetchHistory().then((history) => {
             this.history = history;
             if (history.changeData) {
@@ -73,7 +71,7 @@ let TardisControl = class TardisControl extends Colorful {
                 this.timelineView.qualityLabels = history.qualityData?.labels;
             }
             this.timelineView.requestUpdate();
-            this.requestUpdate();
+            this.loading = false;
         }).catch((e) => {
             this.dispatchEvent(new CustomEvent(AddToast, {
                 bubbles: true,
@@ -130,6 +128,18 @@ let TardisControl = class TardisControl extends Colorful {
             ${timelineItem}`;
     }
     render() {
+        const loading = html `
+            <div class="loading">
+
+                <div class="loader">
+                    <div id="loading-spinner">
+                        <sl-icon name="circle-half" class="spinner-icon"></sl-icon>
+                        <h3>Jumping across the timeline</h3>
+                    </div>
+                </div>
+
+
+            </div>`;
         if (!this.changeReport && !this.history) {
             return html `
                 <div class="pb33f-loader">
@@ -141,9 +151,11 @@ let TardisControl = class TardisControl extends Colorful {
         }
         if (!this.changeReport && this.history) {
             return html `
+                ${this.loading ? loading : ''}
                 <div class="timeline-view">
                     ${this.timelineView}
-                </div>`;
+                </div>
+            `;
         }
         let changelist = [];
         this.changeReport?.changes?.forEach(change => {
@@ -179,13 +191,14 @@ let TardisControl = class TardisControl extends Colorful {
                 </sl-split-panel>`;
         }
         return html `
-
+            ${this.loading ? loading : ''}
             <header>
                 <strong>${changelist.length}</strong> ${changelist.length > 1 ? 'changes' : 'change'} made</strong>
                 <span style="color: var(--font-color-sub1"> on
                     <sl-format-date time-zone="${userTimeZone}" date="${this.specSummary?.created}"
                                     time-zone-name="short" month="long" day="numeric" year="numeric" hour="2-digit"
-                                    minute="numeric" second="numeric"></sl-format-date> <em>(<sl-relative-time date="${this.specSummary?.created}"></sl-relative-time>)</em> <br/>
+                                    minute="numeric" second="numeric"></sl-format-date> <em>(<sl-relative-time
+                            date="${this.specSummary?.created}"></sl-relative-time>)</em> <br/>
                 </span>
             </header>
             <div class="changes-container">
@@ -236,9 +249,11 @@ let TardisControl = class TardisControl extends Colorful {
     set summary(summary) {
         this.specSummary = summary;
         if (summary.changeId) {
+            this.loading = true;
             TimelineService.fetchChange(summary.changeId)
                 .then(this.handleChange.bind(this))
                 .catch((e) => {
+                this.loading = false;
                 this.dispatchEvent(new CustomEvent(AddToast, {
                     bubbles: true,
                     composed: true,
@@ -258,6 +273,7 @@ let TardisControl = class TardisControl extends Colorful {
         this.changeReport = resp;
         this.explorer.updateGraphResponse(resp);
         this.explorer.buildGraph();
+        this.loading = false;
     }
 };
 TardisControl.styles = [specSummaryTimelineItemCss,
@@ -274,6 +290,9 @@ __decorate([
 __decorate([
     state()
 ], TardisControl.prototype, "chartOptions", void 0);
+__decorate([
+    state()
+], TardisControl.prototype, "loading", void 0);
 __decorate([
     query('pb33f-doughnut-chart#change-doughnut')
 ], TardisControl.prototype, "changeDoughnut", void 0);