1 files changed, 6 insertions, 7 deletions
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk.vue b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk.vue
index a2d8b7cbd15..28a16cd846a 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk.vue
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/components/chunk.vue
@@ -1,6 +1,6 @@
 <script>
-import { GlIntersectionObserver, GlSafeHtmlDirective } from '@gitlab/ui';
-import { scrollToElement } from '~/lib/utils/common_utils';
+import { GlIntersectionObserver } from '@gitlab/ui';
+import LineHighlighter from '~/blob/line_highlighter';
 import ChunkLine from './chunk_line.vue';
 
 /*
@@ -20,9 +20,6 @@ export default {
     ChunkLine,
     GlIntersectionObserver,
   },
-  directives: {
-    SafeHtml: GlSafeHtmlDirective,
-  },
   props: {
     isFirstChunk: {
       type: Boolean,
@@ -84,12 +81,14 @@ export default {
       return;
     }
 
-    window.requestIdleCallback(() => {
+    window.requestIdleCallback(async () => {
       this.isLoading = false;
       const { hash } = this.$route;
       if (hash && this.totalChunks > 0 && this.totalChunks === this.chunkIndex + 1) {
         // when the last chunk is loaded scroll to the hash
-        scrollToElement(hash, { behavior: 'auto' });
+        await this.$nextTick();
+        const lineHighlighter = new LineHighlighter({ scrollBehavior: 'auto' });
+        lineHighlighter.highlightHash(hash);
       }
     });
   },