Fixes rerendering of the page when issue loaded

Adds the title-container for issue title
Only animates issue description on second change
Fixes the pinned links if there are none to show

app/assets/javascripts/issue_show/components/description.vue

@@ -48,11 +48,16 @@ export default {
     return {
       preAnimation: false,
       pulseAnimation: false,
+      initialUpdate: true,
     };
   },
   watch: {
-    descriptionHtml() {
-      this.animateChange();
+    descriptionHtml(newDescription, oldDescription) {
+      if (!this.initialUpdate && newDescription !== oldDescription) {
+        this.animateChange();
+      } else {
+        this.initialUpdate = false;
+      }
 
       this.$nextTick(() => {
         this.renderGFM();

app/assets/javascripts/issue_show/components/pinned_links.vue

@@ -20,20 +20,25 @@ export default {
   },
   computed: {
     pinnedLinks() {
-      return [
-        {
+      const links = [];
+      if (this.publishedIncidentUrl) {
+        links.push({
           id: 'publishedIncidentUrl',
           url: this.publishedIncidentUrl,
           text: STATUS_PAGE_PUBLISHED,
           icon: 'tanuki',
-        },
-        {
+        });
+      }
+      if (this.zoomMeetingUrl) {
+        links.push({
           id: 'zoomMeetingUrl',
           url: this.zoomMeetingUrl,
           text: JOIN_ZOOM_MEETING,
           icon: 'brand-zoom',
-        },
-      ];
+        });
+      }
+
+      return links;
     },
   },
   methods: {
@@ -45,7 +50,7 @@ export default {
 </script>
 
 <template>
-  <div class="gl-display-flex gl-justify-content-start">
+  <div v-if="pinnedLinks && pinnedLinks.length" class="gl-display-flex gl-justify-content-start">
     <template v-for="(link, i) in pinnedLinks">
       <div v-if="link.url" :key="link.id" :class="{ 'gl-pr-3': needsPaddingClass(i) }">
         <gl-button

app/views/projects/issues/show.html.haml

@@ -64,7 +64,8 @@
     -# haml-lint:disable InlineJavaScript
     %script#js-issuable-app-initial-data{ type: "application/json" }= issuable_initial_data(@issue).to_json
     #js-issuable-app
-      %h2.title= markdown_field(@issue, :title)
+      .title-container
+        %h2.title= markdown_field(@issue, :title)
       - if @issue.description.present?
         .description{ class: can?(current_user, :update_issue, @issue) ? 'js-task-list-container' : '' }
           .md= markdown_field(@issue, :description)

spec/frontend/issue_show/components/description_spec.js

@@ -36,11 +36,26 @@ describe('Description component', () => {
     $('.issuable-meta .flash-container').remove();
   });
 
-  it('animates description changes', () => {
+  it('doesnt animate first description changes', () => {
     vm.descriptionHtml = 'changed';
 
+    return vm.$nextTick().then(() => {
+      expect(
+        vm.$el.querySelector('.md').classList.contains('issue-realtime-pre-pulse'),
+      ).toBeFalsy();
+      jest.runAllTimers();
+      return vm.$nextTick();
+    });
+  });
+
+  it('animates description changes on live update', () => {
+    vm.descriptionHtml = 'changed';
     return vm
       .$nextTick()
+      .then(() => {
+        vm.descriptionHtml = 'changed second time';
+        return vm.$nextTick();
+      })
       .then(() => {
         expect(
           vm.$el.querySelector('.md').classList.contains('issue-realtime-pre-pulse'),