Incremental Rendering of the MR

5 files changed, 51 insertions, 7 deletions

diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index 7cc4e6a2c3a..51d86dc661f 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -114,11 +114,16 @@ 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(() => {
+          console.log('Done');
+          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..716ebad209f 100644
--- a/app/assets/javascripts/diffs/components/diff_file.vue
+++ b/app/assets/javascripts/diffs/components/diff_file.vue
@@ -121,12 +121,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-if="isLoadingCollapsedDiff || !file.renderIt"
       class="diff-content loading"
     />
     <div
diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js
index 27001142257..1b4e4239716 100644
--- a/app/assets/javascripts/diffs/store/actions.js
+++ b/app/assets/javascripts/diffs/store/actions.js
@@ -29,6 +29,26 @@ export const fetchDiffFiles = ({ state, commit }) => {
     .then(handleLocationHash);
 };
 
+export const startRenderDiffsQueue = ({ state, commit }) => {
+  const checkItem = () => {
+    const nextFile = state.diffFiles.find(file => !file.renderIt && !file.collapsed);
+    if (nextFile) {
+      requestAnimationFrame(() => {
+        commit(types.RENDER_FILE, nextFile);
+      });
+      requestIdleCallback(
+        () => {
+          console.log('CALL NEXT');
+          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..5e6b374747e 100644
--- a/app/assets/javascripts/diffs/store/mutations.js
+++ b/app/assets/javascripts/diffs/store/mutations.js
@@ -15,8 +15,26 @@ export default {
   },
 
   [types.SET_DIFF_DATA](state, data) {
+    const diffData = convertObjectPropsToCamelCase(data, { deep: true });
+    let showingLines = 0;
+    diffData.diffFiles.map(file => {
+      if (file.highlightedDiffLines) {
+        showingLines += file.parallelDiffLines.length;
+        Object.assign(file, {
+          renderIt: showingLines < 200,
+          collapsed: showingLines > 2000,
+        });
+      }
+    });
+
     Object.assign(state, {
-      ...convertObjectPropsToCamelCase(data, { deep: true }),
+      ...diffData,
+    });
+  },
+
+  [types.RENDER_FILE](state, file) {
+    Object.assign(file, {
+      renderIt: true,
     });
   },