Improve performance of toggling diff view type

1 files changed, 34 insertions, 6 deletions

diff --git a/app/assets/javascripts/diffs/components/parallel_diff_view.vue b/app/assets/javascripts/diffs/components/parallel_diff_view.vue
index ed92b4ee249..d7280338b68 100644
--- a/app/assets/javascripts/diffs/components/parallel_diff_view.vue
+++ b/app/assets/javascripts/diffs/components/parallel_diff_view.vue
@@ -1,25 +1,53 @@
 <script>
-import diffContentMixin from '../mixins/diff_content';
+import { mapGetters } from 'vuex';
+import parallelDiffTableRow from './parallel_diff_table_row.vue';
 import parallelDiffCommentRow from './parallel_diff_comment_row.vue';
 import { EMPTY_CELL_TYPE } from '../constants';
+import { trimFirstCharOfLineContent } from '../store/utils';
 
 export default {
   components: {
+    parallelDiffTableRow,
     parallelDiffCommentRow,
   },
-  mixins: [diffContentMixin],
+  props: {
+    diffFile: {
+      type: Object,
+      required: true,
+    },
+    diffLines: {
+      type: Array,
+      required: true,
+    },
+  },
   computed: {
+    ...mapGetters(['commit']),
     parallelDiffLines() {
-      return this.normalizedDiffLines.map(line => {
-        if (!line.left) {
+      return this.diffLines.map(line => {
+        if (line.left) {
+          Object.assign(line, { left: trimFirstCharOfLineContent(line.left) });
+        } else {
           Object.assign(line, { left: { type: EMPTY_CELL_TYPE } });
-        } else if (!line.right) {
+        }
+
+        if (line.right) {
+          Object.assign(line, { right: trimFirstCharOfLineContent(line.right) });
+        } else {
           Object.assign(line, { right: { type: EMPTY_CELL_TYPE } });
         }
 
         return line;
       });
     },
+    diffLinesLength() {
+      return this.parallelDiffLines.length;
+    },
+    commitId() {
+      return this.commit && this.commit.id;
+    },
+    userColorScheme() {
+      return window.gon.user_color_scheme;
+    },
   },
 };
 </script>
@@ -35,7 +63,7 @@ export default {
         <template
           v-for="(line, index) in parallelDiffLines"
         >
-          <diff-table-row
+          <parallel-diff-table-row
             :diff-file="diffFile"
             :line="line"
             :is-bottom="index + 1 === diffLinesLength"