Incremental Rendering of the MR
This commit is contained in:
parent
f68f405c17
commit
e70d06dff8
|
@ -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');
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
|
|
@ -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';
|
||||
|
|
|
@ -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,
|
||||
});
|
||||
},
|
||||
|
||||
|
|
Loading…
Reference in New Issue