Set _loading flag in diff-view while awaiting API
Previously, PolyGerrit relied on the default value of the loading flag
in the diff view to show/hide the appropriate diff panels (or loading
message). Because of this, stale information is displayed when a user
navigates between different files within the same diff view.
With this change, the `_loading` flag is set before the major API calls
are made, and the loading message is made more obvious.
Bug: Issue 7381
Change-Id: Id70d981a2c72fef9f44a32c5463dc43c3ce41cf6
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html
index 8ae5617..cbc5c52 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.html
@@ -124,8 +124,11 @@
text-decoration: none;
}
.loading {
- padding: 0 var(--default-horizontal-margin) 1em;
- color: #666;
+ color: #777;
+ font-size: 2em;
+ height: 100%;
+ padding: 1em var(--default-horizontal-margin);
+ text-align: center;
}
.subHeader {
flex-wrap: wrap;
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.js b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.js
index c4746f2..8455e1c 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.js
+++ b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view.js
@@ -540,6 +540,7 @@
promises.push(this._getChangeEdit(this._changeNum));
+ this._loading = true;
Promise.all(promises).then(r => {
const edit = r[4];
if (edit) {
diff --git a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view_test.html b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view_test.html
index 8587fe5..2c267e8 100644
--- a/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view_test.html
+++ b/polygerrit-ui/app/elements/diff/gr-diff-view/gr-diff-view_test.html
@@ -100,23 +100,27 @@
'10', PARENT), 'Should navigate to /c/42/10/wheatley.md');
element._path = 'wheatley.md';
assert.equal(element.changeViewState.selectedFileIndex, 2);
+ assert.isTrue(element._loading);
MockInteractions.pressAndReleaseKeyOn(element, 219, null, '[');
assert(diffNavStub.lastCall.calledWith(element._change, 'glados.txt',
'10', PARENT), 'Should navigate to /c/42/10/glados.txt');
element._path = 'glados.txt';
assert.equal(element.changeViewState.selectedFileIndex, 1);
+ assert.isTrue(element._loading);
MockInteractions.pressAndReleaseKeyOn(element, 219, null, '[');
assert(diffNavStub.lastCall.calledWith(element._change, 'chell.go', '10',
PARENT), 'Should navigate to /c/42/10/chell.go');
element._path = 'chell.go';
assert.equal(element.changeViewState.selectedFileIndex, 0);
+ assert.isTrue(element._loading);
MockInteractions.pressAndReleaseKeyOn(element, 219, null, '[');
assert(changeNavStub.lastCall.calledWith(element._change),
'Should navigate to /c/42/');
assert.equal(element.changeViewState.selectedFileIndex, 0);
+ assert.isTrue(element._loading);
const showPrefsStub =
sandbox.stub(element.$.diffPreferences.$.prefsOverlay, 'open',
@@ -190,24 +194,28 @@
'5'), 'Should navigate to /c/42/5..10');
MockInteractions.pressAndReleaseKeyOn(element, 221, null, ']');
+ assert.isTrue(element._loading);
assert(diffNavStub.lastCall.calledWithExactly(element._change,
'wheatley.md', '10', '5'),
'Should navigate to /c/42/5..10/wheatley.md');
element._path = 'wheatley.md';
MockInteractions.pressAndReleaseKeyOn(element, 219, null, '[');
+ assert.isTrue(element._loading);
assert(diffNavStub.lastCall.calledWithExactly(element._change,
'glados.txt', '10', '5'),
'Should navigate to /c/42/5..10/glados.txt');
element._path = 'glados.txt';
MockInteractions.pressAndReleaseKeyOn(element, 219, null, '[');
+ assert.isTrue(element._loading);
assert(diffNavStub.lastCall.calledWithExactly(element._change, 'chell.go',
'10', '5'),
'Should navigate to /c/42/5..10/chell.go');
element._path = 'chell.go';
MockInteractions.pressAndReleaseKeyOn(element, 219, null, '[');
+ assert.isTrue(element._loading);
assert(changeNavStub.lastCall.calledWithExactly(element._change, '10',
'5'),
'Should navigate to /c/42/5..10');
