diff --git a/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue b/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue
index bb846767aed742c362bbe6b846f594ade6d1955a..b0389a3c459b03fe2e084d599b7764c64a3b68de 100644
--- a/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue
+++ b/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue
@@ -53,6 +53,7 @@ export default {
   methods: {
     switchToViewer(viewer) {
       if (viewer === BLAME_VIEWER) {
+        this.$emit('blame-loading-started');
         this.$emit('blame');
         this.trackEvent('open_blame_viewer_on_blob_page');
       }
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/components/blame_info.vue b/app/assets/javascripts/vue_shared/components/source_viewer/components/blame_info.vue
index f75d2714faed6c2211f45febbf47d8e311a92abf..d4bab5877154418c983d8ca3003823585467c8b6 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/components/blame_info.vue
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/components/blame_info.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlTooltipDirective } from '@gitlab/ui';
+import { GlTooltipDirective, GlSkeletonLoader } from '@gitlab/ui';
 import SafeHtml from '~/vue_shared/directives/safe_html';
 import CommitInfo from '~/repository/components/commit_info.vue';
 
@@ -19,6 +19,7 @@ export default {
   },
   components: {
     CommitInfo,
+    GlSkeletonLoader,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -29,6 +30,10 @@ export default {
       type: Array,
       required: true,
     },
+    isBlameLoading: {
+      type: Boolean,
+      required: true,
+    },
   },
   data() {
     return {
@@ -94,23 +99,50 @@ export default {
 <template>
   <div class="blame gl-border-r gl-bg-subtle">
     <div class="blame-commit !gl-border-none">
-      <span
-        v-for="(processedBlame, index) in processedBlameInfo"
-        :key="`indicator-${index}`"
-        :ref="`indicator-${index}`"
-        class="blame-commit-wrapper"
-        :style="processedBlame.style"
-      ></span>
-      <commit-info
-        v-for="(blame, index) in blameInfo"
-        :key="index"
-        :class="{ 'gl-border-t': blame.blameOffset !== '0px' }"
-        class="gl-absolute gl-flex gl-px-3"
-        :style="{ top: blame.blameOffset }"
-        :commit="blame.commit"
-        :span="blame.span"
-        :prev-blame-link="blame.commitData && blame.commitData.projectBlameLink"
-      />
+      <!-- Skeleton loaders - fixed number during loading -->
+      <template v-if="isBlameLoading && !blameInfo.length">
+        <gl-skeleton-loader
+          v-for="i in 5"
+          :key="i"
+          :width="150"
+          :height="30"
+          class="blame-commit-wrapper gl-mb-2"
+        >
+          <!-- Color indicator -->
+          <rect x="0" y="0" width="2" height="20" fill="var(--gl-color-data-blue-500)" />
+
+          <!-- Avatar -->
+          <circle cx="12" cy="10" r="6" />
+
+          <!-- Commit title -->
+          <rect x="22" y="7" width="80" height="4" rx="2" />
+          <!-- Commit meta -->
+          <rect x="22" y="13" width="50" height="3" rx="2" />
+        </gl-skeleton-loader>
+      </template>
+
+      <template v-if="blameInfo.length">
+        <span
+          v-for="(processedBlame, index) in processedBlameInfo"
+          :key="`indicator-${index}`"
+          :ref="`indicator-${index}`"
+          class="blame-commit-wrapper"
+          :style="processedBlame.style"
+        ></span>
+      </template>
+
+      <template v-if="blameInfo.length">
+        <commit-info
+          v-for="(blame, index) in blameInfo"
+          :key="index"
+          :class="{ 'gl-border-t': blame.blameOffset !== '0px' }"
+          class="gl-absolute gl-flex gl-px-3"
+          :style="{ top: blame.blameOffset }"
+          :commit="blame.commit"
+          :span="blame.span"
+          :prev-blame-link="blame.commitData && blame.commitData.projectBlameLink"
+        />
+      </template>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue b/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue
index 3cad921a845ef212440b3e385dc98938bdddf079..c8d017cf9a8c6480ff79d97b61a9d50d7499b751 100644
--- a/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue
+++ b/app/assets/javascripts/vue_shared/components/source_viewer/source_viewer.vue
@@ -56,6 +56,7 @@ export default {
       lineHighlighter: new LineHighlighter(),
       blameData: [],
       renderedChunks: [],
+      isBlameLoading: false,
     };
   },
   computed: {
@@ -86,6 +87,11 @@ export default {
       handler(isVisible) {
         toggleBlameClasses(this.blameData, isVisible);
 
+        if (isVisible) {
+          this.isBlameLoading = true;
+        } else {
+          this.isBlameLoading = false;
+        }
         if (!isVisible) this.blameData = [];
 
         this.requestBlameInfo(this.renderedChunks[0]);
@@ -96,6 +102,10 @@ export default {
       handler(blameData) {
         if (!this.showBlame) return;
         toggleBlameClasses(blameData, true);
+
+        if (blameData.length > 0) {
+          this.isBlameLoading = false;
+        }
       },
       immediate: true,
     },
@@ -155,7 +165,7 @@ export default {
 
 <template>
   <div class="gl-flex">
-    <blame v-if="showBlame && blameInfo.length" :blame-info="blameInfo" />
+    <blame v-if="showBlame" :blame-info="blameInfo" :is-blame-loading="isBlameLoading" />
 
     <div
       class="file-content code code-syntax-highlight-theme js-syntax-highlight blob-content blob-viewer gl-flex gl-w-full gl-flex-col gl-overflow-auto"
diff --git a/spec/frontend/vue_shared/components/source_viewer/components/blame_info_spec.js b/spec/frontend/vue_shared/components/source_viewer/components/blame_info_spec.js
index c05c85b03bf3a907f2763fe4f8d1f1fc4651cb8d..0c8db40a53b8538b45e5946e2b35f54deac13a98 100644
--- a/spec/frontend/vue_shared/components/source_viewer/components/blame_info_spec.js
+++ b/spec/frontend/vue_shared/components/source_viewer/components/blame_info_spec.js
@@ -1,4 +1,5 @@
 import { nextTick } from 'vue';
+import { GlSkeletonLoader } from '@gitlab/ui';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import CommitInfo from '~/repository/components/commit_info.vue';
 import BlameInfo from '~/vue_shared/components/source_viewer/components/blame_info.vue';
@@ -18,6 +19,8 @@ describe('BlameInfo component', () => {
   });
 
   const findCommitInfoComponents = () => wrapper.findAllComponents(CommitInfo);
+  const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader);
+
   const findBlameWrappers = () => wrapper.findAll('.blame-commit-wrapper');
 
   it('renders a CommitInfo component for each blame entry', () => {
@@ -81,16 +84,41 @@ describe('BlameInfo component', () => {
     });
   });
 
-  describe('commitInfo component styling', () => {
-    const borderTopClassName = 'gl-border-t';
+  describe('skeleton loader', () => {
+    it('renders skeleton loaders when loading with no data', () => {
+      wrapper = shallowMountExtended(BlameInfo, {
+        propsData: {
+          blameInfo: [],
+          isBlameLoading: true,
+        },
+      });
+
+      expect(findSkeletonLoader().exists()).toBe(true);
+      expect(findCommitInfoComponents()).toHaveLength(0);
+    });
+
+    it('does not render skeleton loader when loading is false', () => {
+      wrapper = shallowMountExtended(BlameInfo, {
+        propsData: {
+          blameInfo: BLAME_DATA_MOCK,
+          isBlameLoading: false,
+        },
+      });
 
-    it('does not add a top border for the first entry', () => {
-      expect(findCommitInfoComponents().at(0).element.classList).not.toContain(borderTopClassName);
+      expect(findSkeletonLoader().exists()).toBe(false);
+      expect(findCommitInfoComponents()).toHaveLength(BLAME_DATA_MOCK.length);
     });
 
-    it('add a top border for the rest of the entries', () => {
-      expect(findCommitInfoComponents().at(1).element.classList).toContain(borderTopClassName);
-      expect(findCommitInfoComponents().at(2).element.classList).toContain(borderTopClassName);
+    it('does not render skeleton loader when data exists even if loading', () => {
+      wrapper = shallowMountExtended(BlameInfo, {
+        propsData: {
+          blameInfo: BLAME_DATA_MOCK,
+          isBlameLoading: true,
+        },
+      });
+
+      expect(findSkeletonLoader().exists()).toBe(false);
+      expect(findCommitInfoComponents()).toHaveLength(BLAME_DATA_MOCK.length);
     });
   });
 });
diff --git a/spec/frontend/vue_shared/components/source_viewer/source_viewer_spec.js b/spec/frontend/vue_shared/components/source_viewer/source_viewer_spec.js
index 2ee93a27e1f3d6ac4f0a63f5ff5bd364d61e2d78..105d4b1543d5396d22106b8ea5990dcf2bb64d81 100644
--- a/spec/frontend/vue_shared/components/source_viewer/source_viewer_spec.js
+++ b/spec/frontend/vue_shared/components/source_viewer/source_viewer_spec.js
@@ -70,6 +70,7 @@ describe('Source Viewer component', () => {
 
   const findChunks = () => wrapper.findAllComponents(Chunk);
   const findBlameComponents = () => wrapper.findAllComponents(Blame);
+  const findBlameComponent = () => wrapper.findComponent(Blame);
   const triggerChunkAppear = async (chunkIndex = 0) => {
     findChunks().at(chunkIndex).vm.$emit('appear');
     await waitForPromises();
@@ -112,11 +113,6 @@ describe('Source Viewer component', () => {
   });
 
   describe('rendering', () => {
-    it('does not render a Blame component if the respective chunk for the blame has not appeared', async () => {
-      await waitForPromises();
-      expect(findBlameComponents()).toHaveLength(0);
-    });
-
     describe('DOM updates', () => {
       it('adds the necessary classes to the DOM', async () => {
         setHTMLFixture(SOURCE_CODE_CONTENT_MOCK);
@@ -128,6 +124,42 @@ describe('Source Viewer component', () => {
     });
 
     describe('Blame information', () => {
+      it('passes loading state to Blame component when data is not yet loaded', () => {
+        expect(findBlameComponent().exists()).toBe(true);
+
+        expect(findBlameComponent().props('isBlameLoading')).toBe(true);
+        expect(findBlameComponent().props('blameInfo')).toHaveLength(0);
+      });
+
+      it('passes loaded state to Blame component once blame data has loaded', async () => {
+        expect(findBlameComponent().props('isBlameLoading')).toBe(true);
+
+        await triggerChunkAppear();
+
+        expect(findBlameComponent().props('isBlameLoading')).toBe(false);
+        expect(findBlameComponent().props('blameInfo')).toHaveLength(blameInfo.length);
+      });
+
+      it('passes loading state again when showBlame is toggled off and back on', async () => {
+        await triggerChunkAppear();
+        expect(findBlameComponent().props('isBlameLoading')).toBe(false);
+
+        // Toggle showBlame off
+        await wrapper.setProps({ showBlame: false });
+        await nextTick();
+        expect(findBlameComponent().exists()).toBe(false);
+
+        // Toggle showBlame back on - should pass loading state
+        await wrapper.setProps({ showBlame: true });
+        await nextTick();
+        expect(findBlameComponent().exists()).toBe(true);
+        expect(findBlameComponent().props('isBlameLoading')).toBe(true);
+        expect(findBlameComponent().props('blameInfo')).toHaveLength(0);
+
+        // After chunk appears again, should pass loaded state
+        await triggerChunkAppear();
+        expect(findBlameComponent().props('isBlameLoading')).toBe(false);
+      });
       it('renders a Blame component when a chunk appears', async () => {
         await triggerChunkAppear();