1 files changed, 49 insertions, 32 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..1ee1a3b0edf 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,40 +51,56 @@ 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>
+    <div class="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"
-          ref="returnToSiteButton"
-          class="gl-mr-5"
-          :href="appData.returnUrl"
-          >{{ $options.returnToSiteBtnText }}</gl-button
-        >
-        <strong>
-          {{ updatedFileDescription }}
-        </strong>
+        <div class="gl-display-flex">
+          <gl-button
+            v-if="appData.returnUrl"
+            ref="returnToSiteButton"
+            class="gl-mr-5 gl-align-self-start"
+            :href="appData.returnUrl"
+            >{{ $options.returnToSiteBtnText }}</gl-button
+          >
+          <strong class="gl-mt-2">
+            {{ updatedFileDescription }}
+          </strong>
+        </div>
       </div>
     </div>
-    <gl-empty-state
-      class="gl-my-9"
-      :primary-button-text="$options.primaryButtonText"
-      :title="$options.title"
-      :primary-button-link="savedContentMeta.mergeRequest.url"
-      :svg-path="mergeRequestsIllustrationPath"
-    >
-      <template #description>
-        <p>{{ $options.mergeRequestInstructionsHeading }}</p>
-        <p>{{ $options.addTitleInstruction }}</p>
-        <p>{{ $options.addDescriptionInstruction }}</p>
-        <p>{{ $options.assignMergeRequestInstruction }}</p>
-      </template>
-    </gl-empty-state>
+    <div class="container">
+      <gl-empty-state
+        class="gl-my-7"
+        :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>
+          <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>
   </div>
 </template>