Explicitly show the loading process

This commit is contained in:
Yuri Sizov
2021-09-06 00:41:50 +03:00
parent 6cf7457c2a
commit 142b88403c

View File

@@ -34,6 +34,7 @@ export default class EntryComponent extends LitElement {
super(); super();
this._entryRequested = false; this._entryRequested = false;
this._isLoading = true;
this._generatedAt = null; this._generatedAt = null;
this._teams = {}; this._teams = {};
@@ -59,6 +60,7 @@ export default class EntryComponent extends LitElement {
return; return;
} }
this._entryRequested = true; this._entryRequested = true;
this._isLoading = true;
const data = await greports.api.getData(); const data = await greports.api.getData();
if (data) { if (data) {
@@ -140,6 +142,7 @@ export default class EntryComponent extends LitElement {
this._pulls = []; this._pulls = [];
} }
this._isLoading = false;
this.requestUpdate(); this.requestUpdate();
} }
@@ -167,23 +170,27 @@ export default class EntryComponent extends LitElement {
<gr-index-entry .generated_at="${this._generatedAt}"></gr-index-entry> <gr-index-entry .generated_at="${this._generatedAt}"></gr-index-entry>
<gr-index-description></gr-index-description> <gr-index-description></gr-index-description>
<div class="teams"> ${(this._isLoading ? html`
<gr-team-list <h3>Loading...</h3>
.teams="${this._orderedTeams}" ` : html`
.reviewers="${this._orderedReviewers}" <div class="teams">
.selected="${this._selectedGroup}" <gr-team-list
.selected_is_person="${this._selectedIsPerson}" .teams="${this._orderedTeams}"
@tabclick="${this.onTabClicked}" .reviewers="${this._orderedReviewers}"
></gr-team-list> .selected="${this._selectedGroup}"
.selected_is_person="${this._selectedIsPerson}"
<gr-pull-list @tabclick="${this.onTabClicked}"
.pulls="${pulls}" ></gr-team-list>
.teams="${this._teams}"
.selected_group="${this._selectedGroup}" <gr-pull-list
.selected_is_person="${this._selectedIsPerson}" .pulls="${pulls}"
.authors="${this._authors}" .teams="${this._teams}"
></gr-pull-list> .selected_group="${this._selectedGroup}"
</div> .selected_is_person="${this._selectedIsPerson}"
.authors="${this._authors}"
></gr-pull-list>
</div>
`)}
</page-content> </page-content>
`; `;
} }