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

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,
       },
     }),
   });

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'),

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.

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');