1 files changed, 31 insertions, 15 deletions
diff --git a/app/assets/javascripts/static_site_editor/pages/success.vue b/app/assets/javascripts/static_site_editor/pages/success.vue
index f0d597d7c9b..5b013c27c35 100644
--- a/app/assets/javascripts/static_site_editor/pages/success.vue
+++ b/app/assets/javascripts/static_site_editor/pages/success.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlEmptyState, GlButton } from '@gitlab/ui';
+import { GlButton, GlEmptyState, GlLoadingIcon } from '@gitlab/ui';
 import { s__, __, sprintf } from '~/locale';
 
 import savedContentMetaQuery from '../graphql/queries/saved_content_meta.query.graphql';
@@ -8,8 +8,9 @@ import { HOME_ROUTE } from '../router/constants';
 
 export default {
   components: {
-    GlEmptyState,
     GlButton,
+    GlEmptyState,
+    GlLoadingIcon,
   },
   props: {
     mergeRequestsIllustrationPath: {
@@ -33,7 +34,7 @@ export default {
     },
   },
   created() {
-    if (!this.savedContentMeta) {
+    if (!this.appData.hasSubmittedChanges) {
       this.$router.push(HOME_ROUTE);
     }
   },
@@ -50,14 +51,21 @@ export default {
   assignMergeRequestInstruction: s__(
     'StaticSiteEditor|3. Assign a person to review and accept the merge request.',
   ),
+  submittingTitle: s__('StaticSiteEditor|Creating your merge request'),
+  submittingNotePrimary: s__(
+    'StaticSiteEditor|You can set an assignee to get your changes reviewed and deployed once your merge request is created.',
+  ),
+  submittingNoteSecondary: s__(
+    'StaticSiteEditor|A link to view the merge request will appear once ready.',
+  ),
 };
 </script>
 <template>
-  <div
-    v-if="savedContentMeta"
-    class="container gl-flex-grow-1 gl-display-flex gl-flex-direction-column"
-  >
-    <div class="gl-fixed gl-left-0 gl-right-0 gl-border-b-solid gl-border-b-1 gl-border-b-gray-100">
+  <div class="container gl-flex-grow-1 gl-display-flex gl-flex-direction-column">
+    <div
+      v-if="savedContentMeta"
+      class="gl-fixed gl-left-0 gl-right-0 gl-border-b-solid gl-border-b-1 gl-border-b-gray-100"
+    >
       <div class="container gl-py-4">
         <gl-button
           v-if="appData.returnUrl"
@@ -73,16 +81,24 @@ export default {
     </div>
     <gl-empty-state
       class="gl-my-9"
-      :primary-button-text="$options.primaryButtonText"
-      :title="$options.title"
-      :primary-button-link="savedContentMeta.mergeRequest.url"
+      :title="savedContentMeta ? $options.title : $options.submittingTitle"
+      :primary-button-text="savedContentMeta && $options.primaryButtonText"
+      :primary-button-link="savedContentMeta && savedContentMeta.mergeRequest.url"
       :svg-path="mergeRequestsIllustrationPath"
+      :svg-height="146"
     >
       <template #description>
-        <p>{{ $options.mergeRequestInstructionsHeading }}</p>
-        <p>{{ $options.addTitleInstruction }}</p>
-        <p>{{ $options.addDescriptionInstruction }}</p>
-        <p>{{ $options.assignMergeRequestInstruction }}</p>
+        <div v-if="savedContentMeta">
+          <p>{{ $options.mergeRequestInstructionsHeading }}</p>
+          <p>{{ $options.addTitleInstruction }}</p>
+          <p>{{ $options.addDescriptionInstruction }}</p>
+          <p>{{ $options.assignMergeRequestInstruction }}</p>
+        </div>
+        <div v-else>
+          <p>{{ $options.submittingNotePrimary }}</p>
+          <p>{{ $options.submittingNoteSecondary }}</p>
+          <gl-loading-icon size="xl" />
+        </div>
       </template>
     </gl-empty-state>
   </div>