2 files changed, 21 insertions, 7 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