Dynamically load version data

src/paths/index/components/versions/VersionItem.js

@@ -86,6 +86,37 @@ export default class VersionItem extends LitElement {
             font-weight: 700;
           }
 
+          @keyframes loader-rotate {
+            from {
+              transform: rotate(0deg);
+            }
+            to {
+              transform: rotate(360deg);
+            }
+          }
+
+          :host .version-loader {
+            background-image: url('loader.svg');
+            background-size: 20px 20px;
+            background-position: 50% 50%;
+            background-repeat: no-repeat;
+            border-radius: 2px;
+            display: inline-block;
+            width: 20px;
+            height: 20px;
+            min-width: 20px;
+            animation-name: loader-rotate;
+            animation-duration: 1.25s;
+            animation-timing-function: steps(8);
+            animation-iteration-count: infinite;
+          }
+
+          @media (prefers-color-scheme: light) {
+            :host .version-loader {
+              filter: invert(1);
+            }
+          }
+
           @media only screen and (max-width: 900px) {
             :host .version-item {
               padding: 10px 20px 10px 16px;
@@ -104,6 +135,7 @@ export default class VersionItem extends LitElement {
     @property({ type: String, reflect: true }) type = "";
     @property({ type: Boolean, reflect: true }) active = false;
     @property({ type: Boolean, reflect: true }) expanded = false;
+    @property({ type: Boolean, reflect: true }) loading = false;
     @property({ type: Number }) pull_count = 0;
 
     _onIconClicked(event) {
@@ -141,9 +173,14 @@ export default class VersionItem extends LitElement {
                 <span class="version-title">
                     ${this.name}
                 </span>
+
                 <span class="${countClassList.join(" ")}">
-                    ${this.pull_count}
+                    ${this.loading ? "" : this.pull_count}
                 </span>
+
+                ${(this.loading ? html`
+                  <div class="version-loader"></div>
+                ` : null)}
             </div>
         `;
     }

src/paths/index/components/versions/VersionList.js

@@ -106,6 +106,8 @@ export default class VersionList extends LitElement {
 
     @property({ type: Array }) versions = [];
 
+    @property({ type: Array }) loadingVersions = [];
+
     @property({ type: Array }) toggledVersions = [];
     @property({ type: String }) selectedVersion = "";
     @property({ type: String }) selectedRelease = "";
@@ -130,7 +132,7 @@ export default class VersionList extends LitElement {
     }
 
     _onItemClicked(versionType, versionName, releaseName) {
-      this._toggleEntry(versionType, versionName, true);
+      //this._toggleEntry(versionType, versionName, true);
 
       this.dispatchEvent(greports.util.createEvent("versionclick", {
           "type": versionType,
@@ -162,6 +164,7 @@ export default class VersionList extends LitElement {
                                 .type="${"main"}"
                                 ?active="${this.selectedVersion === item.name}"
                                 ?expanded="${this.toggledVersions.includes(item.name)}"
+                                ?loading="${this.loadingVersions.includes(item.name)}"
                                 @click="${this._onItemClicked.bind(this, "main", item.name, "")}"
                                 @iconclick="${this._onItemIconClicked.bind(this, "main", item.name, "")}"
                             ></gr-version-item>

src/paths/index/entry.js

@@ -41,6 +41,7 @@ export default class EntryComponent extends LitElement {
 
         this._entryRequested = false;
         this._isLoading = true;
+        this._loadingVersions = [];
 
         this._versions = [];
         this._versionData = {};
@@ -89,6 +90,23 @@ export default class EntryComponent extends LitElement {
 
         this._isLoading = false;
         this.requestUpdate();
+
+        this._versions.forEach((version) => {
+            this._requestVersionData(version.name);
+        });
+    }
+
+    async _requestVersionData(version) {
+        // Start loading, show the indicator.
+        this._loadingVersions.push(version);
+        
+        const versionData = await greports.api.getVersionData(this._selectedRepository, version);
+        this._versionData[version] = versionData;
+
+        // Finish loading, hide the indicator.
+        const index = this._loadingVersions.indexOf(version);
+        this._loadingVersions.splice(index, 1);
+        this.requestUpdate();
     }
 
     _onVersionClicked(event) {
@@ -100,6 +118,10 @@ export default class EntryComponent extends LitElement {
     }
 
     render(){
+        // Dereferencing to ensure it triggers an update.
+        const [...versions] = this._versions;
+        const [...loadingVersions] = this._loadingVersions;
+
         return html`
             <page-content>
                 <shared-nav></shared-nav>
@@ -111,7 +133,8 @@ export default class EntryComponent extends LitElement {
                 ` : html`
                     <div class="versions">
                         <gr-version-list
-                            .versions="${this._versions}"
+                            .versions="${versions}"
+                            .loadingVersions="${loadingVersions}"
                             .selectedVersion="${this._selectedVersion}"
                             .selectedRelease="${this._selectedRelease}"
                             @versionclick="${this._onVersionClicked}"

src/static/icons/dropdown.svg

@@ -1 +1 @@
-<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="m4 7 3 3 3-3" fill="none" stroke="#fff" stroke-opacity=".59" stroke-width="2"/></svg>
+<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg"><path d="m4 7 3 3 3-3" fill="none" stroke="#fff" stroke-opacity=".59" stroke-width="2" transform="translate(0 -1.5)"/></svg>

src/static/icons/loader.svg

@@ -0,0 +1 @@
+<svg clip-rule="evenodd" fill-rule="evenodd" stroke-linejoin="round" stroke-miterlimit="2" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><g fill="#e0e0e0"><g fill-opacity=".2"><path d="m10.061 11.466 2.152 2.152c-.924.694-2.023 1.166-3.22 1.336v-3.045c.381-.096.74-.247 1.068-.443z"/><path d="m5.939 11.466c.328.196.687.347 1.068.443v3.045c-1.197-.17-2.297-.642-3.22-1.336z"/><path d="m14.954 8.993c-.17 1.197-.642 2.297-1.336 3.22l-2.152-2.152c.196-.328.347-.687.443-1.068z"/><path d="m1.046 8.993h3.045c.096.381.247.74.443 1.068l-2.152 2.152c-.694-.923-1.166-2.023-1.336-3.22z"/><path d="m2.382 3.787 2.152 2.152c-.196.329-.347.687-.443 1.068h-3.045c.17-1.197.642-2.297 1.336-3.22z"/><path d="m13.618 3.787c.694.923 1.166 2.023 1.336 3.22h-3.045c-.096-.381-.247-.74-.443-1.068z"/><path d="m7.007 1.046v3.045c-.381.096-.74.247-1.068.443l-2.152-2.152c.923-.694 2.023-1.166 3.22-1.336z"/></g><path d="m8.993 1.046c1.197.17 2.297.642 3.22 1.336l-2.152 2.152c-.328-.196-.687-.347-1.068-.443z"/></g></svg>