Fixed scrolling to diff not happening correctly on load

app/assets/javascripts/diffs/components/app.vue

@@ -331,6 +331,7 @@ export default {
 
     if (window.gon?.features?.diffsVirtualScrolling) {
       diffsEventHub.$on('scrollToFileHash', this.scrollVirtualScrollerToFileHash);
+      diffsEventHub.$on('scrollToIndex', this.scrollVirtualScrollerToIndex);
     }
 
     if (window.gon?.features?.diffSettingsUsageData) {
@@ -390,6 +391,7 @@ export default {
 
     if (window.gon?.features?.diffsVirtualScrolling) {
       diffsEventHub.$off('scrollToFileHash', this.scrollVirtualScrollerToFileHash);
+      diffsEventHub.$off('scrollToIndex', this.scrollVirtualScrollerToIndex);
     }
   },
   methods: {
@@ -526,12 +528,15 @@ export default {
       const index = this.diffFiles.findIndex((f) => f.file_hash === hash);
 
       if (index !== -1) {
-        this.virtualScrollCurrentIndex = index;
+        this.scrollVirtualScrollerToIndex(index);
+      }
+    },
+    async scrollVirtualScrollerToIndex(index) {
+      this.virtualScrollCurrentIndex = index;
 
-        await this.$nextTick();
+      await this.$nextTick();
 
-        this.virtualScrollCurrentIndex = -1;
-      }
+      this.virtualScrollCurrentIndex = -1;
     },
   },
   minTreeWidth: MIN_TREE_WIDTH,
@@ -629,6 +634,7 @@ export default {
                         :help-page-path="helpPagePath"
                         :can-current-user-fork="canCurrentUserFork"
                         :view-diffs-file-by-file="viewDiffsFileByFile"
+                        pre-render
                       />
                     </dynamic-scroller-item>
                   </template>

app/assets/javascripts/diffs/components/diff_file.vue

@@ -68,6 +68,11 @@ export default {
       type: Boolean,
       required: true,
     },
+    preRender: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
   data() {
     return {
@@ -163,7 +168,7 @@ export default {
       handler: function hashChangeWatch(newHash, oldHash) {
         this.isCollapsed = isCollapsed(this.file);
 
-        if (newHash && oldHash && !this.hasDiff) {
+        if (newHash && oldHash && !this.hasDiff && !this.preRender) {
           this.requestDiff();
         }
       },

app/assets/javascripts/diffs/components/virtual_scroller_scroll_sync.js

+import { handleLocationHash } from '~/lib/utils/common_utils';
+
 export default {
   inject: ['vscrollParent'],
   props: {
@@ -22,6 +24,10 @@ export default {
             if (this.vscrollParent.itemsWithSize[index].size) {
               this.$_itemsWithSizeWatcher();
               this.scrollToIndex(index);
+
+              await this.$nextTick();
+
+              handleLocationHash();
             }
           });
         }

app/assets/javascripts/diffs/store/actions.js

@@ -110,7 +110,9 @@ export const fetchDiffFilesBatch = ({ commit, state, dispatch }) => {
     w: state.showWhitespace ? '0' : '1',
     view: 'inline',
   };
+  const hash = window.location.hash.replace('#', '').split('diff-content-').pop();
   let totalLoaded = 0;
+  let scrolledVirtualScroller = false;
 
   commit(types.SET_BATCH_LOADING, true);
   commit(types.SET_RETRIEVING_BATCHES, true);
@@ -125,10 +127,14 @@ export const fetchDiffFilesBatch = ({ commit, state, dispatch }) => {
         commit(types.SET_DIFF_DATA_BATCH, { diff_files });
         commit(types.SET_BATCH_LOADING, false);
 
-        eventHub.$emit(
-          'scrollToFileHash',
-          window.location.hash.replace('#', '').split('diff-content-').pop(),
-        );
+        if (window.gon?.features?.diffsVirtualScrolling && !scrolledVirtualScroller) {
+          const index = state.diffFiles.findIndex((f) => f.file_hash === hash);
+
+          if (index >= 0) {
+            eventHub.$emit('scrollToIndex', index);
+            scrolledVirtualScroller = true;
+          }
+        }
 
         if (!isNoteLink && !state.currentDiffFileId) {
           commit(types.VIEW_DIFF_FILE, diff_files[0].file_hash);