First try at deferred renderingtz-experimental-mr-perf-impr

5 files changed, 33 insertions, 2 deletions

diff --git a/app/assets/javascripts/diffs/components/app.vue b/app/assets/javascripts/diffs/components/app.vue
index f839cf82d7d..5af4536f194 100644
--- a/app/assets/javascripts/diffs/components/app.vue
+++ b/app/assets/javascripts/diffs/components/app.vue
@@ -1,4 +1,5 @@
 <script>
+import Vue from 'vue';
 import { mapState, mapGetters, mapActions } from 'vuex';
 import Icon from '~/vue_shared/components/icon.vue';
 import { __ } from '~/locale';
@@ -109,12 +110,25 @@ export default {
     if (this.shouldShow) {
       this.fetchData();
     }
+
+    console.log('We are done!');
+  },
+  updated() {
+    console.log('We are upd ated ' + this.diffFiles.length);
+    if (this.diffFiles.length) {
+      Vue.nextTick()
+        .then(() => {
+          this.setNextFileToRender();
+          requestAnimationFrame(this.setNextFileToRender);
+        })
+        .catch(() => {});
+    }
   },
   created() {
     this.adjustView();
   },
   methods: {
-    ...mapActions('diffs', ['setBaseConfig', 'fetchDiffFiles']),
+    ...mapActions('diffs', ['setBaseConfig', 'fetchDiffFiles', 'setNextFileToRender']),
     fetchData() {
       this.fetchDiffFiles().catch(() => {
         createFlash(__('Something went wrong on our end. Please try again!'));
diff --git a/app/assets/javascripts/diffs/components/diff_file.vue b/app/assets/javascripts/diffs/components/diff_file.vue
index 1bb46eab5d1..ce8e1249156 100644
--- a/app/assets/javascripts/diffs/components/diff_file.vue
+++ b/app/assets/javascripts/diffs/components/diff_file.vue
@@ -121,7 +121,7 @@ export default {
     </div>
 
     <diff-content
-      v-if="!isCollapsed"
+      v-if="file.renderIt && !isCollapsed"
       :class="{ hidden: isCollapsed || file.tooLarge }"
       :diff-file="file"
     />
diff --git a/app/assets/javascripts/diffs/store/actions.js b/app/assets/javascripts/diffs/store/actions.js
index 27001142257..4bc660caaf6 100644
--- a/app/assets/javascripts/diffs/store/actions.js
+++ b/app/assets/javascripts/diffs/store/actions.js
@@ -45,6 +45,11 @@ export const setParallelDiffViewType = ({ commit }) => {
   historyPushState(url);
 };
 
+export const setNextFileToRender = ({ commit }) => {
+  console.log('SET NEXT FILE TO RN)');
+  commit(types.SET_NEXT_DIFF_FILE_TO_RENDER);
+};
+
 export const showCommentForm = ({ commit }, params) => {
   commit(types.ADD_COMMENT_FORM_LINE, params);
 };
diff --git a/app/assets/javascripts/diffs/store/mutation_types.js b/app/assets/javascripts/diffs/store/mutation_types.js
index 2c8e1a1466f..4c03a9cd80b 100644
--- a/app/assets/javascripts/diffs/store/mutation_types.js
+++ b/app/assets/javascripts/diffs/store/mutation_types.js
@@ -2,6 +2,7 @@ export const SET_BASE_CONFIG = 'SET_BASE_CONFIG';
 export const SET_LOADING = 'SET_LOADING';
 export const SET_DIFF_DATA = 'SET_DIFF_DATA';
 export const SET_DIFF_VIEW_TYPE = 'SET_DIFF_VIEW_TYPE';
+export const SET_NEXT_DIFF_FILE_TO_RENDER = 'SET_NEXT_DIFF_FILE_TO_RENDER';
 export const SET_MERGE_REQUEST_DIFFS = 'SET_MERGE_REQUEST_DIFFS';
 export const ADD_COMMENT_FORM_LINE = 'ADD_COMMENT_FORM_LINE';
 export const REMOVE_COMMENT_FORM_LINE = 'REMOVE_COMMENT_FORM_LINE';
diff --git a/app/assets/javascripts/diffs/store/mutations.js b/app/assets/javascripts/diffs/store/mutations.js
index a98b2be89a3..27ed1572a54 100644
--- a/app/assets/javascripts/diffs/store/mutations.js
+++ b/app/assets/javascripts/diffs/store/mutations.js
@@ -15,6 +15,12 @@ export default {
   },
 
   [types.SET_DIFF_DATA](state, data) {
+    // eslint-disable-next-line no-param-reassign
+    data.diff_files = data.diff_files.map((file, index) => ({
+      ...file,
+      renderIt: index < 5,
+    }));
+
     Object.assign(state, {
       ...convertObjectPropsToCamelCase(data, { deep: true }),
     });
@@ -65,6 +71,11 @@ export default {
     }
   },
 
+  [types.SET_NEXT_DIFF_FILE_TO_RENDER](state) {
+    const nextFile = state.diffFiles.find(checkFile => checkFile.renderIt === false);
+    if (nextFile) Object.assign(nextFile, { renderIt: true });
+  },
+
   [types.EXPAND_ALL_FILES](state) {
     // eslint-disable-next-line no-param-reassign
     state.diffFiles = state.diffFiles.map(file => ({