commit 74caea4bbad81886d3543c7fe787a174dcea4f22
author Milutin Kristofic <milutin@google.com> Tue Nov 14 20:10:56 2023 +0100
committer Milutin Kristofic <milutin@google.com> Wed Nov 15 09:38:31 2023 +0100
tree e7924267da4528767fcd33bf2244169930cfc395
parent e261a84fb259c7e87c933155677d2311fe0e33d2

Add loading spin when loading suggestion

Release-Notes: skip
Google-Bug-Id: b/303611032
Change-Id: Ib13db2acb0df6ea0e314ceec19445d17ccf15343

polygerrit-ui/app/elements/shared/gr-comment/gr-comment.ts

diff --git a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.ts b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.ts
index 1e91345..7c638be 100644
--- a/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.ts
+++ b/polygerrit-ui/app/elements/shared/gr-comment/gr-comment.ts
@@ -76,6 +76,7 @@
 import {formStyles} from '../../../styles/form-styles';
 import {Interaction} from '../../../constants/reporting';
 import {Suggestion} from '../../../api/suggestions';
+import {when} from 'lit/directives/when.js';
 
 // visible for testing
 export const AUTO_SAVE_DEBOUNCE_DELAY_MS = 2000;
@@ -213,6 +214,9 @@
   @state()
   generatedReplacementId?: string;
 
+  @state()
+  suggestionLoading = false;
+
   @property({type: Boolean, attribute: 'show-patchset'})
   showPatchset = false;
 
@@ -550,6 +554,16 @@
           color: var(--selected-foreground);
           margin-right: var(--spacing-xl);
         }
+        /* The basics of .loadingSpin are defined in shared styles. */
+        .loadingSpin {
+          width: calc(var(--line-height-normal) - 2px);
+          height: calc(var(--line-height-normal) - 2px);
+          display: inline-block;
+          vertical-align: top;
+          position: relative;
+          /* Making up for the 2px reduced height above. */
+          top: 1px;
+        }
       `,
     ];
   }
@@ -979,7 +993,12 @@
               );
             }}
           />
-          Generate Suggestion${numberOfSuggestions}
+          Generate Suggestion
+          ${when(
+            this.suggestionLoading,
+            () => html`<span class="loadingSpin"></span>`,
+            () => html`${numberOfSuggestions}`
+          )}
         </label>
       </div>
     `;
@@ -1009,6 +1028,7 @@
     this.reporting.reportInteraction(Interaction.GENERATE_SUGGESTION_REQUEST, {
       uuid: this.generatedReplacementId,
     });
+    this.suggestionLoading = true;
     const suggestionResponse = await suggestionsPlugins[0].provider.suggestCode(
       {
         prompt: this.messageText,
@@ -1019,6 +1039,7 @@
         lineNumber: this.comment.line,
       }
     );
+    this.suggestionLoading = false;
     // TODO(milutin): The suggestionResponse can contain multiple suggestion
     // options. We pick the first one for now. In future we shouldn't ignore
     // other suggestions.