Do not block opening rebase dialog on fetching recent changes
For the user case of rebasing on parent change, no interaction with the
change autocomplete is required.
Update the rebase dialog to instead show a spinner for loading the
recent changes.
Release-Notes: skip
Bug: Google b/454164071
Change-Id: Ie387a1d65462eacbc825247d2ecf221782f70a55
(cherry picked from commit 6fd8119869dbdc5bd735358f90a1dcb60dfa1032)
diff --git a/polygerrit-ui/app/elements/change/gr-confirm-rebase-dialog/gr-confirm-rebase-dialog.ts b/polygerrit-ui/app/elements/change/gr-confirm-rebase-dialog/gr-confirm-rebase-dialog.ts
index fd44c59..ab00533 100644
--- a/polygerrit-ui/app/elements/change/gr-confirm-rebase-dialog/gr-confirm-rebase-dialog.ts
+++ b/polygerrit-ui/app/elements/change/gr-confirm-rebase-dialog/gr-confirm-rebase-dialog.ts
@@ -35,6 +35,7 @@
import '@material/web/radio/radio';
import {MdRadio} from '@material/web/radio/radio';
import {materialStyles} from '../../../styles/gr-material-styles';
+import {spinnerStyles} from '../../../styles/gr-spinner-styles';
import '@material/web/checkbox/checkbox';
export interface ConfirmRebaseEventDetail {
@@ -184,6 +185,7 @@
formStyles,
sharedStyles,
materialStyles,
+ spinnerStyles,
css`
:host {
display: block;
@@ -227,6 +229,17 @@
margin-top: var(--spacing-xl);
margin-bottom: var(--spacing-xl);
}
+ .loadingSpin {
+ width: calc(var(--line-height-normal) - 2px);
+ height: calc(var(--line-height-normal) - 2px);
+ display: inline-block;
+ vertical-align: top;
+ position: relative;
+ top: 1px;
+ }
+ .zeroState {
+ color: var(--deemphasized-text-color);
+ }
@media screen and (max-width: 50em) {
#confirmDialog {
height: 90vh;
@@ -246,22 +259,16 @@
@cancel=${this.handleCancelTap}
>
<div class="header" slot="header">Confirm rebase</div>
- <div class="main" slot="main">
- ${when(
- this.loading,
- () => html`<div>Loading...</div>`,
- () => this.renderRebaseDialog()
- )}
- </div>
+ <div class="main" slot="main">${this.renderRebaseDialog()}</div>
</gr-dialog>
`;
}
private renderRebaseDialog() {
- return html`<div
+ return html` <div
id="rebaseOnParent"
class="rebaseOption loading"
- ?hidden=${!this.displayParentOption() || this.loading}
+ ?hidden=${!this.displayParentOption()}
>
<md-radio
id="rebaseOnParentInput"
@@ -335,6 +342,12 @@
>
</gr-change-autocomplete>
</div>
+ ${when(
+ this.loading,
+ () =>
+ html`<span class="loadingSpin"></span
+ ><span class="zeroState"> loading recent changes</span>`
+ )}
<div class="rebaseCheckbox">
<div class="checkbox-container">
<md-checkbox
