Improve performance of toggling diff view type

1 files changed, 30 insertions, 3 deletions

diff --git a/app/assets/javascripts/diffs/components/inline_diff_view.vue b/app/assets/javascripts/diffs/components/inline_diff_view.vue
index e72f85df77a..b884230fb63 100644
--- a/app/assets/javascripts/diffs/components/inline_diff_view.vue
+++ b/app/assets/javascripts/diffs/components/inline_diff_view.vue
@@ -1,12 +1,39 @@
 <script>
-import diffContentMixin from '../mixins/diff_content';
+import { mapGetters } from 'vuex';
+import inlineDiffTableRow from './inline_diff_table_row.vue';
 import inlineDiffCommentRow from './inline_diff_comment_row.vue';
+import { trimFirstCharOfLineContent } from '../store/utils';
 
 export default {
   components: {
     inlineDiffCommentRow,
+    inlineDiffTableRow,
+  },
+  props: {
+    diffFile: {
+      type: Object,
+      required: true,
+    },
+    diffLines: {
+      type: Array,
+      required: true,
+    },
+  },
+  computed: {
+    ...mapGetters(['commit']),
+    normalizedDiffLines() {
+      return this.diffLines.map(line => (line.richText ? trimFirstCharOfLineContent(line) : line));
+    },
+    diffLinesLength() {
+      return this.normalizedDiffLines.length;
+    },
+    commitId() {
+      return this.commit && this.commit.id;
+    },
+    userColorScheme() {
+      return window.gon.user_color_scheme;
+    },
   },
-  mixins: [diffContentMixin],
 };
 </script>
 
@@ -19,7 +46,7 @@ export default {
       <template
         v-for="(line, index) in normalizedDiffLines"
       >
-        <diff-table-row
+        <inline-diff-table-row
           :diff-file="diffFile"
           :line="line"
           :is-bottom="index + 1 === diffLinesLength"