Initial render of issue title & description

Instead of wait for Vue for data which can cause a flash of no content depending on how quickly the API returns data. This renders the data with HAML & then passes this over to Vue to render

4 files changed, 26 insertions, 4 deletions

diff --git a/app/assets/javascripts/issue_show/index.js b/app/assets/javascripts/issue_show/index.js
index 6dba7b90716..9056f978df9 100644
--- a/app/assets/javascripts/issue_show/index.js
+++ b/app/assets/javascripts/issue_show/index.js
@@ -4,6 +4,8 @@ import '../vue_shared/vue_resource_interceptor';
 
 (() => {
   const issueTitleData = document.querySelector('.issue-title-data').dataset;
+  const initialTitle = document.querySelector('.js-issue-title').innerHTML;
+  const initialDescription = document.querySelector('.js-issue-description').innerHTML;
   const { canUpdateTasksClass, endpoint, isEdited } = issueTitleData;
 
   const vm = new Vue({
@@ -13,6 +15,8 @@ import '../vue_shared/vue_resource_interceptor';
         canUpdateTasksClass,
         endpoint,
         isEdited,
+        initialTitle,
+        initialDescription,
       },
     }),
   });
diff --git a/app/assets/javascripts/issue_show/issue_title_description.vue b/app/assets/javascripts/issue_show/issue_title_description.vue
index 3f77ba22d23..920fbdfea6b 100644
--- a/app/assets/javascripts/issue_show/issue_title_description.vue
+++ b/app/assets/javascripts/issue_show/issue_title_description.vue
@@ -20,6 +20,14 @@ export default {
       default: false,
       required: false,
     },
+    initialTitle: {
+      type: String,
+      required: true,
+    },
+    initialDescription: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     const resource = new Service(this.$http, this.endpoint);
@@ -39,17 +47,17 @@ export default {
       poll,
       apiData: {},
       tasks: '0 of 0',
-      title: null,
+      title: this.initialTitle,
       titleText: '',
       titleFlag: {
-        pre: true,
+        pre: false,
         pulse: false,
       },
-      description: null,
+      description: this.initialDescription,
       descriptionText: '',
       descriptionChange: false,
       descriptionFlag: {
-        pre: true,
+        pre: false,
         pulse: false,
       },
       titleEl: document.querySelector('title'),
diff --git a/app/views/projects/issues/show.html.haml b/app/views/projects/issues/show.html.haml
index 0ad615535d7..ce6e0f91999 100644
--- a/app/views/projects/issues/show.html.haml
+++ b/app/views/projects/issues/show.html.haml
@@ -56,6 +56,11 @@
       "is-edited": @issue.is_edited?,
     } }
     .issue-title-entrypoint
+      %h2.title.js-issue-title= markdown_field(@issue, :title)
+      - if @issue.description.present?
+        .description{ class: can?(current_user, :update_issue, @issue) ? 'js-task-list-container' : '' }
+          .wiki.js-issue-description= markdown_field(@issue, :description)
+          %textarea.hidden.js-task-list-field= @issue.description
 
     #merge-requests{ data: { url: referenced_merge_requests_namespace_project_issue_url(@project.namespace, @project, @issue) } }
       // This element is filled in using JavaScript.
diff --git a/spec/javascripts/issue_show/issue_title_description_spec.js b/spec/javascripts/issue_show/issue_title_description_spec.js
index 8180e67255c..992ff1a331f 100644
--- a/spec/javascripts/issue_show/issue_title_description_spec.js
+++ b/spec/javascripts/issue_show/issue_title_description_spec.js
@@ -40,9 +40,14 @@ describe('Issue Title', () => {
       propsData: {
         canUpdateIssue: '.css-stuff',
         endpoint: '/gitlab-org/gitlab-shell/issues/9/rendered_title',
+        initialTitle: 'test',
+        initialDescription: 'testing',
       },
     }).$mount();
 
+    expect(issueShowComponent.$el.querySelector('.title').innerHTML).toContain('test');
+    expect(issueShowComponent.$el.querySelector('.wiki').innerHTML).toContain('testing');
+
     setTimeout(() => {
       const editedText = issueShowComponent.$el.querySelector('.edited-text');