Merge branch 'tz-mr-incremental-rendering' into 'master'

MR Page incremental rendering

See merge request gitlab-org/gitlab-ce!21063

6 files changed, 88 insertions, 8 deletions

diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index 7cc4e6a2c3a..b5b05df4d34 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -114,11 +114,15 @@ export default {
     this.adjustView();
   },
   methods: {
-    ...mapActions('diffs', ['setBaseConfig', 'fetchDiffFiles']),
+    ...mapActions('diffs', ['setBaseConfig', 'fetchDiffFiles', 'startRenderDiffsQueue']),
     fetchData() {
-      this.fetchDiffFiles().catch(() => {
-        createFlash(__('Something went wrong on our end. Please try again!'));
-      });
+      this.fetchDiffFiles()
+        .then(() => {
+          requestIdleCallback(this.startRenderDiffsQueue, { timeout: 1000 });
+        })
+        .catch(() => {
+          createFlash(__('Something went wrong on our end. Please try again!'));
+        });
 
       if (!this.isNotesFetched) {
         eventHub.$emit('fetchNotesData');
diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue
index 7e7058d8d08..59e9ba08b8b 100644
--- a/app/assets/javascripts/diffs/components/diff_file.vue
+++ b/app/assets/javascripts/diffs/components/diff_file.vue
@@ -46,16 +46,25 @@ export default {
     showExpandMessage() {
       return this.isCollapsed && !this.isLoadingCollapsedDiff && !this.file.tooLarge;
     },
+    showLoadingIcon() {
+      return this.isLoadingCollapsedDiff || (!this.file.renderIt && !this.isCollapsed);
+    },
   },
   methods: {
     ...mapActions('diffs', ['loadCollapsedDiff']),
     handleToggle() {
       const { collapsed, highlightedDiffLines, parallelDiffLines } = this.file;
 
-      if (collapsed && !highlightedDiffLines && !parallelDiffLines.length) {
+      if (
+        collapsed &&
+        !highlightedDiffLines &&
+        parallelDiffLines !== undefined &&
+        !parallelDiffLines.length
+      ) {
         this.handleLoadCollapsedDiff();
       } else {
         this.file.collapsed = !this.file.collapsed;
+        this.file.renderIt = true;
       }
     },
     handleLoadCollapsedDiff() {
@@ -65,6 +74,7 @@ export default {
         .then(() => {
           this.isLoadingCollapsedDiff = false;
           this.file.collapsed = false;
+          this.file.renderIt = true;
         })
         .catch(() => {
           this.isLoadingCollapsedDiff = false;
@@ -121,12 +131,12 @@ export default {
     </div>
 
     <diff-content
-      v-if="!isCollapsed"
+      v-if="!isCollapsed && file.renderIt"
       :class="{ hidden: isCollapsed || file.tooLarge }"
       :diff-file="file"
     />
     <loading-icon
-      v-if="isLoadingCollapsedDiff"
+      v-else-if="showLoadingIcon"
       class="diff-content loading"
     />
     <div
diff --git a/app/assets/javascripts/diffs/constants.js b/app/assets/javascripts/diffs/constants.js
index 2fa8367f528..f68afa44837 100644
--- a/app/assets/javascripts/diffs/constants.js
+++ b/app/assets/javascripts/diffs/constants.js
@@ -25,3 +25,6 @@ export const CONTEXT_LINE_CLASS_NAME = 'diff-expanded';
 export const UNFOLD_COUNT = 20;
 export const COUNT_OF_AVATARS_IN_GUTTER = 3;
 export const LENGTH_OF_AVATAR_TOOLTIP = 17;
+
+export const LINES_TO_BE_RENDERED_DIRECTLY = 100;
+export const MAX_LINES_TO_BE_RENDERED = 2000;
diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js
index 27001142257..4ab6ceb249a 100644
--- a/app/assets/javascripts/diffs/store/actions.js
+++ b/app/assets/javascripts/diffs/store/actions.js
@@ -29,6 +29,27 @@ export const fetchDiffFiles = ({ state, commit }) => {
     .then(handleLocationHash);
 };
 
+export const startRenderDiffsQueue = ({ state, commit }) => {
+  const checkItem = () => {
+    const nextFile = state.diffFiles.find(
+      file => !file.renderIt && (!file.collapsed || !file.text),
+    );
+    if (nextFile) {
+      requestAnimationFrame(() => {
+        commit(types.RENDER_FILE, nextFile);
+      });
+      requestIdleCallback(
+        () => {
+          checkItem();
+        },
+        { timeout: 1000 },
+      );
+    }
+  };
+
+  checkItem();
+};
+
 export const setInlineDiffViewType = ({ commit }) => {
   commit(types.SET_DIFF_VIEW_TYPE, INLINE_DIFF_VIEW_TYPE);
 
diff --git a/app/assets/javascripts/diffs/store/mutation_types.js b/app/assets/javascripts/diffs/store/mutation_types.js
index 2c8e1a1466f..c999d637d50 100644
--- a/app/assets/javascripts/diffs/store/mutation_types.js
+++ b/app/assets/javascripts/diffs/store/mutation_types.js
@@ -8,3 +8,4 @@ export const REMOVE_COMMENT_FORM_LINE = 'REMOVE_COMMENT_FORM_LINE';
 export const ADD_CONTEXT_LINES = 'ADD_CONTEXT_LINES';
 export const ADD_COLLAPSED_DIFFS = 'ADD_COLLAPSED_DIFFS';
 export const EXPAND_ALL_FILES = 'EXPAND_ALL_FILES';
+export const RENDER_FILE = 'RENDER_FILE';
diff --git a/app/assets/javascripts/diffs/store/mutations.js b/app/assets/javascripts/diffs/store/mutations.js
index a98b2be89a3..0522e32c410 100644
--- a/app/assets/javascripts/diffs/store/mutations.js
+++ b/app/assets/javascripts/diffs/store/mutations.js
@@ -2,6 +2,7 @@ import Vue from 'vue';
 import _ from 'underscore';
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { findDiffFile, addLineReferences, removeMatchLine, addContextLines } from './utils';
+import { LINES_TO_BE_RENDERED_DIRECTLY, MAX_LINES_TO_BE_RENDERED } from '../constants';
 import * as types from './mutation_types';
 
 export default {
@@ -15,8 +16,48 @@ export default {
   },
 
   [types.SET_DIFF_DATA](state, data) {
+    const diffData = convertObjectPropsToCamelCase(data, { deep: true });
+    let showingLines = 0;
+    const filesLength = diffData.diffFiles.length;
+    let i;
+    for (i = 0; i < filesLength; i += 1) {
+      const file = diffData.diffFiles[i];
+      if (file.parallelDiffLines) {
+        const linesLength = file.parallelDiffLines.length;
+        let u = 0;
+        for (u = 0; u < linesLength; u += 1) {
+          const line = file.parallelDiffLines[u];
+          if (line.left) delete line.left.text;
+          if (line.right) delete line.right.text;
+        }
+      }
+
+      if (file.highlightedDiffLines) {
+        const linesLength = file.highlightedDiffLines.length;
+        let u;
+        for (u = 0; u < linesLength; u += 1) {
+          const line = file.highlightedDiffLines[u];
+          delete line.text;
+        }
+      }
+
+      if (file.highlightedDiffLines) {
+        showingLines += file.parallelDiffLines.length;
+      }
+      Object.assign(file, {
+        renderIt: showingLines < LINES_TO_BE_RENDERED_DIRECTLY,
+        collapsed: file.text && showingLines > MAX_LINES_TO_BE_RENDERED,
+      });
+    }
+
     Object.assign(state, {
-      ...convertObjectPropsToCamelCase(data, { deep: true }),
+      ...diffData,
+    });
+  },
+
+  [types.RENDER_FILE](state, file) {
+    Object.assign(file, {
+      renderIt: true,
     });
   },