Merge branch 'sse-ux-submit-changes-loading' into 'master'

Update PublishToolbar with GlButton loading flag

See merge request gitlab-org/gitlab!30657

app/assets/javascripts/static_site_editor/components/publish_toolbar.vue

 <script>
-import { GlButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 
 export default {
   components: {
     GlButton,
-    GlLoadingIcon,
   },
   props: {
     returnUrl: {
@@ -26,14 +25,18 @@ export default {
 };
 </script>
 <template>
-  <div class="d-flex bg-light border-top justify-content-between align-items-center py-3 px-4">
-    <gl-loading-icon :class="{ invisible: !savingChanges }" size="md" />
+  <div class="d-flex bg-light border-top justify-content-end align-items-center py-3 px-4">
     <div>
       <gl-button v-if="returnUrl" ref="returnUrlLink" :href="returnUrl">{{
         s__('StaticSiteEditor|Return to site')
       }}</gl-button>
-      <gl-button variant="success" :disabled="!saveable || savingChanges" @click="$emit('submit')">
-        {{ __('Submit Changes') }}
+      <gl-button
+        variant="success"
+        :disabled="!saveable"
+        :loading="savingChanges"
+        @click="$emit('submit')"
+      >
+        <span>{{ __('Submit Changes') }}</span>
       </gl-button>
     </div>
   </div>

spec/frontend/static_site_editor/components/publish_toolbar_spec.js

 import { shallowMount } from '@vue/test-utils';
-import { GlButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 
 import PublishToolbar from '~/static_site_editor/components/publish_toolbar.vue';
 
@@ -19,7 +19,6 @@ describe('Static Site Editor Toolbar', () => {
 
   const findReturnUrlLink = () => wrapper.find({ ref: 'returnUrlLink' });
   const findSaveChangesButton = () => wrapper.find(GlButton);
-  const findLoadingIndicator = () => wrapper.find(GlLoadingIcon);
 
   beforeEach(() => {
     buildWrapper();
@@ -37,8 +36,8 @@ describe('Static Site Editor Toolbar', () => {
     expect(findSaveChangesButton().attributes('disabled')).toBe('true');
   });
 
-  it('does not display saving changes indicator', () => {
-    expect(findLoadingIndicator().classes()).toContain('invisible');
+  it('does not render the Submit Changes button with a loader', () => {
+    expect(findSaveChangesButton().props('loading')).toBe(false);
   });
 
   it('does not render returnUrl link', () => {
@@ -62,15 +61,11 @@ describe('Static Site Editor Toolbar', () => {
 
   describe('when saving changes', () => {
     beforeEach(() => {
-      buildWrapper({ saveable: true, savingChanges: true });
+      buildWrapper({ savingChanges: true });
     });
 
-    it('disables Submit Changes button', () => {
-      expect(findSaveChangesButton().attributes('disabled')).toBe('true');
-    });
-
-    it('displays saving changes indicator', () => {
-      expect(findLoadingIndicator().classes()).not.toContain('invisible');
+    it('renders the Submit Changes button with a loading indicator', () => {
+      expect(findSaveChangesButton().props('loading')).toBe(true);
     });
   });