diff --git a/app/assets/javascripts/repository/file_tree_browser/components/tree_list.vue b/app/assets/javascripts/repository/file_tree_browser/components/tree_list.vue
index a5edfc454ead1b467c6dd5449047b5a6dbfe6c8c..956dad127ebe929d41e5d2781920ce731f573f70 100644
--- a/app/assets/javascripts/repository/file_tree_browser/components/tree_list.vue
+++ b/app/assets/javascripts/repository/file_tree_browser/components/tree_list.vue
@@ -1,4 +1,5 @@
 <script>
+import { mapState } from 'pinia';
 import { GlTooltipDirective, GlLoadingIcon, GlFormInput, GlIcon, GlTooltip } from '@gitlab/ui';
 import micromatch from 'micromatch';
 import { createAlert } from '~/alert';
@@ -14,6 +15,7 @@ import { FOCUS_FILE_TREE_BROWSER_FILTER_BAR, keysFor } from '~/behaviors/shortcu
 import { shouldDisableShortcuts } from '~/behaviors/shortcuts/shortcuts_toggle';
 import { Mousetrap } from '~/lib/mousetrap';
 import Shortcut from '~/behaviors/shortcuts/shortcut.vue';
+import { useFileTreeBrowserVisibility } from '~/repository/stores/file_tree_browser_visibility';
 import {
   normalizePath,
   dedupeByFlatPathAndId,
@@ -23,9 +25,12 @@ import {
   hasMorePages,
   isExpandable,
   handleTreeKeydown,
+  createItemVisibilityObserver,
+  observeElements,
 } from '../utils';
 
 export default {
+  name: 'FileTreeBrowser',
   FOCUS_FILE_TREE_BROWSER_FILTER_BAR,
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -61,10 +66,15 @@ export default {
       directoriesCache: {},
       expandedPathsMap: {},
       loadingPathsMap: {},
-      flatFilesList: [],
+      appearedItems: {},
+      itemObserver: null,
     };
   },
   computed: {
+    flatFilesList() {
+      if (this.isRootLoading) return [];
+      return this.buildList('/', 0);
+    },
     isRootLoading() {
       return this.isDirectoryLoading('/');
     },
@@ -104,12 +114,18 @@ export default {
       });
       return map;
     },
+    ...mapState(useFileTreeBrowserVisibility, ['fileTreeBrowserIsPeekOn']),
   },
   watch: {
-    directoriesCache: { deep: true, handler: 'updateFlatFilesList' },
-    expandedPathsMap: { deep: true, handler: 'updateFlatFilesList' },
+    filteredFlatFilesList() {
+      this.$nextTick(() => this.observeListItems());
+    },
+    fileTreeBrowserIsPeekOn() {
+      this.$nextTick(() => this.observeItemVisibility());
+    },
   },
   mounted() {
+    this.observeItemVisibility();
     this.expandPathAncestors(this.currentRouterPath || '/');
     this.mousetrap = new Mousetrap();
 
@@ -118,13 +134,20 @@ export default {
     }
   },
   beforeDestroy() {
+    this.itemObserver?.disconnect();
     this.mousetrap.unbind(keysFor(FOCUS_FILE_TREE_BROWSER_FILTER_BAR));
   },
   methods: {
-    updateFlatFilesList() {
-      if (this.isRootLoading) return;
-      // Replace array contents in-place to maintain reactivity
-      this.flatFilesList.splice(0, this.flatFilesList.length, ...this.buildList('/', 0));
+    observeItemVisibility() {
+      this.itemObserver?.disconnect();
+      const rootElement = this.fileTreeBrowserIsPeekOn
+        ? document.querySelector('.file-tree-browser-peek')
+        : document.querySelector('.js-static-panel-inner');
+      this.itemObserver = createItemVisibilityObserver((itemId, isVisible) => {
+        this.appearedItems = { ...this.appearedItems, [itemId]: isVisible };
+      }, rootElement);
+
+      this.observeListItems();
     },
     isCurrentPath(path) {
       if (!this.$route.params.path) return path === '/';
@@ -156,7 +179,7 @@ export default {
           directoryList.push(generateShowMoreItem(tree.id, path, level));
 
         // Recursively add children for expanded directories
-        if (this.expandedPathsMap[treePath] && !this.isDirectoryLoading(treePath)) {
+        if (this.expandedPathsMap[treePath]) {
           directoryList.push(...this.buildList(treePath, level + 1));
         }
       });
@@ -355,6 +378,15 @@ export default {
     onTreeKeydown(event) {
       handleTreeKeydown(event);
     },
+    observeListItems() {
+      this.$nextTick(() => observeElements(this.$refs.fileTreeList, this.itemObserver));
+    },
+    async handleShowMore(parentPath, event) {
+      const prevItem = event.target.closest('li')?.previousElementSibling;
+      await this.fetchDirectory(parentPath);
+      await this.$nextTick();
+      prevItem?.nextElementSibling?.firstElementChild?.focus(); // Ensures the next available item is focussed after loading more items
+    },
   },
   filterPlaceholder: s__('Repository|Filter files (*.vue, *.rb...)'),
 };
@@ -399,22 +431,17 @@ export default {
       class="repository-tree-list gl-mt-2 gl-flex gl-min-h-0 gl-flex-col"
       :aria-label="__('File tree')"
     >
-      <div
+      <ul
         v-if="filteredFlatFilesList.length"
-        class="gl-h-full gl-min-h-0 gl-flex-grow gl-overflow-y-auto gl-pl-2"
+        ref="fileTreeList"
+        class="gl-h-full gl-min-h-0 gl-flex-grow gl-list-none gl-overflow-y-auto !gl-pl-2"
         role="tree"
         @keydown="onTreeKeydown"
       >
-        <file-row
-          v-for="(item, index) in filteredFlatFilesList"
-          :key="item.id + index"
-          :file="item"
-          :file-url="item.routerPath"
-          :level="item.level"
-          :opened="item.opened"
-          :loading="item.loading"
-          show-tree-toggle
-          tabindex="-1"
+        <li
+          v-for="item in filteredFlatFilesList"
+          :key="`${item.path}-${item.type}`"
+          :data-item-id="item.id"
           :aria-current="isCurrentPath(item.path)"
           role="treeitem"
           :aria-expanded="item.opened"
@@ -422,17 +449,30 @@ export default {
           :aria-level="item.level + 1"
           :aria-setsize="siblingInfo(item)[0]"
           :aria-posinset="siblingInfo(item)[1]"
-          :style="{ '--level': item.level }"
-          :class="{
-            'tree-list-parent': item.level > 0,
-            '!gl-bg-gray-50': isCurrentPath(item.path),
-          }"
-          class="gl-relative !gl-mx-0"
-          truncate-middle
-          @clickTree="(options) => toggleDirectory(item.path, options)"
-          @showMore="fetchDirectory(item.parentPath)"
-        />
-      </div>
+          :aria-label="item.name"
+          tabindex="-1"
+        >
+          <file-row
+            v-if="appearedItems[item.id]"
+            :file="item"
+            :file-url="item.routerPath"
+            :level="item.level"
+            :opened="item.opened"
+            :loading="item.loading"
+            show-tree-toggle
+            :style="{ '--level': item.level }"
+            :class="{
+              'tree-list-parent': item.level > 0,
+              '!gl-bg-gray-50': isCurrentPath(item.path),
+            }"
+            class="gl-relative !gl-mx-0 gl-w-fit gl-min-w-full"
+            truncate-middle
+            @clickTree="(options) => toggleDirectory(item.path, options)"
+            @showMore="handleShowMore(item.parentPath, $event)"
+          />
+          <div v-else data-placeholder-item class="gl-h-7" tabindex="0"></div>
+        </li>
+      </ul>
       <p v-else class="gl-my-6 gl-text-center">
         {{ __('No files found') }}
       </p>
diff --git a/app/assets/javascripts/repository/file_tree_browser/utils.js b/app/assets/javascripts/repository/file_tree_browser/utils.js
index 4c6c8d28ce7d97c43ffd487ed54ff35af4a7c3b8..47cfd8ca90b77eb621b41cefa827c51136ffc206 100644
--- a/app/assets/javascripts/repository/file_tree_browser/utils.js
+++ b/app/assets/javascripts/repository/file_tree_browser/utils.js
@@ -104,5 +104,35 @@ export const handleTreeKeydown = (event) => {
   }
 
   event.preventDefault();
-  items[nextIndex]?.focus();
+  items[nextIndex]?.querySelector('button')?.focus();
 };
+
+/**
+ * Creates an IntersectionObserver that toggles item visibility based on viewport intersection
+ * @param {Function} setItemVisibility - Callback to update item visibility (itemId, isVisible)
+ * @returns {IntersectionObserver}
+ */
+export const createItemVisibilityObserver = (setItemVisibility, rootElement = null) =>
+  new IntersectionObserver(
+    (entries) =>
+      entries?.forEach(({ target, isIntersecting }) => {
+        setItemVisibility(target.dataset?.itemId, isIntersecting);
+        const isFocussed =
+          target.querySelector('[data-placeholder-item]') === document.activeElement;
+        if (isIntersecting && isFocussed)
+          requestAnimationFrame(() => target.querySelector('button')?.focus());
+      }),
+    {
+      root: rootElement,
+      scrollMargin: '1500px', // Pre-render items before scrolling into view (prevent white flashing)
+    },
+  );
+
+/**
+ * Observes all elements matching the selector
+ * @param {HTMLElement} container - Container element to query within
+ * @param {IntersectionObserver} observer - The observer instance
+ * @param {string} selector - CSS selector for elements to observe
+ */
+export const observeElements = (container, observer, selector = 'li[data-item-id]') =>
+  container?.querySelectorAll(selector).forEach((el) => observer?.observe(el));
diff --git a/app/assets/javascripts/vue_shared/components/file_row.vue b/app/assets/javascripts/vue_shared/components/file_row.vue
index 720fa1fa1ace1c2860ca2d86b0d0ff93c0c0c56e..2262979ac51d16ed3587ca5e46b8b050bf6cef2f 100644
--- a/app/assets/javascripts/vue_shared/components/file_row.vue
+++ b/app/assets/javascripts/vue_shared/components/file_row.vue
@@ -157,7 +157,7 @@ export default {
     :loading="file.loading"
     class="!gl-border-none !gl-pl-6"
     button-text-classes="gl-text-blue-700"
-    @click="$emit('showMore')"
+    @click="$emit('showMore', $event)"
   >
     {{ __('Show more') }}
   </gl-button>
@@ -238,7 +238,6 @@ export default {
   height: var(--file-row-height, 32px);
   padding: 4px 8px;
   margin-left: -8px;
-  margin-right: -8px;
   border-radius: 3px;
   text-align: left;
   cursor: pointer;
diff --git a/spec/features/projects/repository/file_tree_browser_spec.rb b/spec/features/projects/repository/file_tree_browser_spec.rb
index 063d7740928c73610b0a45da90aaf563a9c16b0c..c5537348788b8c39ad0300719356cdc710fbb490 100644
--- a/spec/features/projects/repository/file_tree_browser_spec.rb
+++ b/spec/features/projects/repository/file_tree_browser_spec.rb
@@ -38,7 +38,7 @@
 
     it 'displays files and directories' do
       within('.file-tree-browser') do
-        expect(page).to have_file('README.md')
+        expect(page).to have_file('CONTRIBUTING.md')
         expect(page).to have_file('files')
       end
     end
@@ -49,10 +49,10 @@
 
     it 'navigates to a file' do
       within('.file-tree-browser') do
-        click_file('README.md')
+        click_file('CONTRIBUTING.md')
       end
 
-      expect(page).to have_current_path(project_blob_path(project, "#{project.default_branch}/README.md"))
+      expect(page).to have_current_path(project_blob_path(project, "#{project.default_branch}/CONTRIBUTING.md"))
     end
 
     it 'expands and collapses directories' do
@@ -68,6 +68,8 @@
     it 'expands parent directories when navigating directly to a nested file' do
       visit project_blob_path(project, "#{project.default_branch}/files/ruby/popen.rb")
       wait_for_requests
+      # File tree starts collapsed in Project Studio
+      click_button('Show file tree browser') if Users::ProjectStudio.enabled_for_user?(user) # rubocop:disable RSpec/AvoidConditionalStatements -- temporary Project Studio rollout
 
       within('.file-tree-browser') do
         # Should auto-expand parent directories
diff --git a/spec/frontend/repository/file_tree_browser/components/tree_list_spec.js b/spec/frontend/repository/file_tree_browser/components/tree_list_spec.js
index b8a4c8f8ab2153433b5e43ec5751d8502c8fd81d..a39e3d5181029081b55fe57e47f9e504bfc3401e 100644
--- a/spec/frontend/repository/file_tree_browser/components/tree_list_spec.js
+++ b/spec/frontend/repository/file_tree_browser/components/tree_list_spec.js
@@ -3,8 +3,10 @@ import { GlFormInput, GlIcon, GlTooltip } from '@gitlab/ui';
 import VueApollo from 'vue-apollo';
 import { cloneDeep } from 'lodash';
 import { PiniaVuePlugin } from 'pinia';
+import { createTestingPinia } from '@pinia/testing';
 import waitForPromises from 'helpers/wait_for_promises';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import { useMockIntersectionObserver } from 'helpers/mock_dom_observer';
 import TreeList from '~/repository/file_tree_browser/components/tree_list.vue';
 import FileRow from '~/vue_shared/components/file_row.vue';
 import { FOCUS_FILE_TREE_BROWSER_FILTER_BAR, keysFor } from '~/behaviors/shortcuts/keybindings';
@@ -30,6 +32,14 @@ describe('Tree List', () => {
   let pinia;
   let getQueryHandlerSuccess;
 
+  const { trigger: triggerIntersection } = useMockIntersectionObserver();
+  const triggerIntersectionForAll = () => {
+    const listItems = wrapper.element.querySelectorAll('[data-item-id]');
+    listItems.forEach((item) => {
+      triggerIntersection(item, { entry: { isIntersecting: true } });
+    });
+  };
+
   const createComponent = async (apiResponse = mockResponse) => {
     getQueryHandlerSuccess = jest.fn().mockResolvedValue(apiResponse);
 
@@ -43,14 +53,19 @@ describe('Tree List', () => {
     });
 
     await waitForPromises();
+    triggerIntersectionForAll();
   };
 
-  beforeEach(() => createComponent());
+  beforeEach(() => {
+    pinia = createTestingPinia();
+    return createComponent();
+  });
 
   const findFileTreeToggle = () => wrapper.findComponent(FileTreeBrowserToggle);
   const findTree = () => wrapper.find('[role="tree"]');
   const findHeader = () => wrapper.find('h3');
   const findFileRows = () => wrapper.findAllComponents(FileRow);
+  const findFileRowPlaceholders = () => wrapper.findAll('[data-placeholder-item]');
   const findFilterInput = () => wrapper.findComponent(GlFormInput);
   const findFilterIcon = () => wrapper.findComponent(GlIcon);
   const findNoFilesMessage = () => wrapper.findByText('No files found');
@@ -112,6 +127,7 @@ describe('Tree List', () => {
   it('fetches directory contents when tree row is clicked', async () => {
     const subdirResponse = cloneDeep(mockResponse);
     subdirResponse.data.project.repository.paginatedTree.nodes[0].trees.nodes = [];
+    subdirResponse.data.project.repository.paginatedTree.nodes[0].blobs.nodes = [];
     getQueryHandlerSuccess.mockResolvedValueOnce(subdirResponse);
 
     findFileRows().at(0).vm.$emit('clickTree');
@@ -133,6 +149,7 @@ describe('Tree List', () => {
       await createComponent();
       const subdirResponse = cloneDeep(mockResponse);
       subdirResponse.data.project.repository.paginatedTree.nodes[0].trees.nodes = [];
+      subdirResponse.data.project.repository.paginatedTree.nodes[0].blobs.nodes = [];
       getQueryHandlerSuccess.mockResolvedValueOnce(subdirResponse);
 
       findFileRows().at(0).vm.$emit('clickTree');
@@ -150,13 +167,13 @@ describe('Tree List', () => {
 
   it('sets aria-setsize and aria-posinset relative to siblings at same level', async () => {
     await createComponent();
-    const fileRows = findFileRows();
+    const treeItems = wrapper.findAll('[role="treeitem"]');
 
-    expect(fileRows.at(0).attributes('aria-setsize')).toBe('2');
-    expect(fileRows.at(0).attributes('aria-posinset')).toBe('1');
+    expect(treeItems.at(0).attributes('aria-setsize')).toBe('2');
+    expect(treeItems.at(0).attributes('aria-posinset')).toBe('1');
 
-    expect(fileRows.at(1).attributes('aria-setsize')).toBe('2');
-    expect(fileRows.at(1).attributes('aria-posinset')).toBe('2');
+    expect(treeItems.at(1).attributes('aria-setsize')).toBe('2');
+    expect(treeItems.at(1).attributes('aria-posinset')).toBe('2');
   });
 
   describe('pagination', () => {
@@ -170,8 +187,28 @@ describe('Tree List', () => {
       expect(findFileRows().at(2).props('file')).toMatchObject({ isShowMore: true });
     });
 
-    it('fetches the next page', () => {
-      findFileRows().at(2).vm.$emit('showMore');
+    it('fetches the next page', async () => {
+      const secondPageResponse = cloneDeep(mockResponse);
+      secondPageResponse.data.project.repository.paginatedTree.nodes[0].trees.nodes = [];
+      secondPageResponse.data.project.repository.paginatedTree.nodes[0].blobs.nodes = [];
+      getQueryHandlerSuccess.mockResolvedValueOnce(secondPageResponse);
+
+      const mockFocus = jest.fn();
+      const mockEvent = {
+        target: {
+          closest: jest.fn(() => ({
+            previousElementSibling: {
+              nextElementSibling: {
+                firstElementChild: { focus: mockFocus },
+              },
+            },
+          })),
+        },
+      };
+
+      findFileRows().at(2).vm.$emit('showMore', mockEvent);
+
+      await waitForPromises();
 
       expect(getQueryHandlerSuccess).toHaveBeenCalledWith({
         projectPath: 'group/project',
@@ -181,6 +218,8 @@ describe('Tree List', () => {
         nextPageCursor: 'cursor123',
         pageSize: 100,
       });
+
+      expect(mockFocus).toHaveBeenCalled();
     });
 
     it('can filter with Show more button in the list', async () => {
@@ -334,9 +373,7 @@ describe('Tree List', () => {
   describe('deep path navigation with pagination', () => {
     it('paginates to find directories not on first page', async () => {
       const page1 = cloneDeep(mockResponse);
-      page1.data.project.repository.paginatedTree.nodes[0].trees.nodes = [
-        { id: 'gid://dir_1', name: 'dir_1', path: 'dir_1', webPath: 'dir_1' },
-      ];
+      page1.data.project.repository.paginatedTree.nodes[0].blobs.nodes = [];
       page1.data.project.repository.paginatedTree.pageInfo = {
         __typename: 'PageInfo',
         hasNextPage: true,
@@ -386,9 +423,9 @@ describe('Tree List', () => {
           startCursor: null,
           endCursor: `cursor_${i}`,
         };
-        page.data.project.repository.paginatedTree.nodes[0].trees.nodes = [
-          { id: `gid://dir_${i}`, name: `dir_${i}`, path: `dir_${i}`, webPath: `dir_${i}` },
-        ];
+
+        page.data.project.repository.paginatedTree.nodes[0].blobs.nodes = [];
+        page.data.project.repository.paginatedTree.nodes[0].trees.nodes = [];
         getQueryHandlerSuccess.mockResolvedValueOnce(page);
       }
 
@@ -459,4 +496,32 @@ describe('Tree List', () => {
       );
     });
   });
+
+  describe('intersection observer', () => {
+    it('renders placeholders before intersection and FileRows after', async () => {
+      getQueryHandlerSuccess = jest.fn().mockResolvedValue(mockResponse);
+      apolloProvider = createMockApollo([[paginatedTreeQuery, getQueryHandlerSuccess]]);
+
+      wrapper = shallowMountExtended(TreeList, {
+        apolloProvider,
+        pinia,
+        propsData: { projectPath: 'group/project', currentRef: 'main', refType: 'branch' },
+        mocks: { $route: { params: {} } },
+      });
+
+      await waitForPromises();
+      await nextTick();
+
+      // Before intersection: placeholders only
+      expect(findFileRowPlaceholders()).toHaveLength(2);
+      expect(findFileRows()).toHaveLength(0);
+
+      // After intersection: FileRows rendered
+      triggerIntersectionForAll();
+      await nextTick();
+
+      expect(findFileRows()).toHaveLength(2);
+      expect(findFileRowPlaceholders()).toHaveLength(0);
+    });
+  });
 });
diff --git a/spec/frontend/repository/file_tree_browser/utils_spec.js b/spec/frontend/repository/file_tree_browser/utils_spec.js
index ce6a342532cf3efc258cb9b13aa61220815ee4e9..44857b1dc4838293f19d4ce755a2a3f19a4a68c8 100644
--- a/spec/frontend/repository/file_tree_browser/utils_spec.js
+++ b/spec/frontend/repository/file_tree_browser/utils_spec.js
@@ -7,6 +7,8 @@ import {
   hasMorePages,
   isExpandable,
   handleTreeKeydown,
+  createItemVisibilityObserver,
+  observeElements,
 } from '~/repository/file_tree_browser/utils';
 import { FTB_MAX_PAGES, FTB_MAX_DEPTH } from '~/repository/constants';
 
@@ -165,9 +167,9 @@ describe('File tree browser utilities', () => {
       container = document.createElement('div');
       container.setAttribute('role', 'tree');
       container.innerHTML = `
-      <button role="treeitem">Item 0</button>
-      <button role="treeitem">Item 1</button>
-      <button role="treeitem">Item 2</button>
+      <div role="treeitem"><button>Item 0</button></div>
+      <div role="treeitem"><button>Item 1</button></div>
+      <div role="treeitem"><button>Item 2</button></div>
     `;
       document.body.appendChild(container);
       items = container.querySelectorAll('[role="treeitem"]');
@@ -185,8 +187,64 @@ describe('File tree browser utilities', () => {
       it(`moves focus to item ${to}`, () => {
         triggerKey(key, from);
 
-        expect(document.activeElement).toBe(items[to]);
+        expect(document.activeElement).toBe(items[to].querySelector('button'));
       });
     });
   });
+
+  describe('createItemVisibilityObserver', () => {
+    afterEach(() => document.querySelector('.js-static-panel-inner')?.remove());
+
+    it('creates an IntersectionObserver instance', () => {
+      const observer = createItemVisibilityObserver(jest.fn());
+
+      expect(observer).toBeInstanceOf(IntersectionObserver);
+      observer.disconnect();
+    });
+
+    it('creates observer with scrollMargin option and custom root element', () => {
+      const customRoot = document.createElement('div');
+      const mockIntersectionObserver = jest.fn();
+      global.IntersectionObserver = mockIntersectionObserver;
+      createItemVisibilityObserver(jest.fn(), customRoot);
+
+      expect(mockIntersectionObserver).toHaveBeenCalledWith(expect.any(Function), {
+        root: customRoot,
+        scrollMargin: '1500px',
+      });
+    });
+
+    it('creates observer with null root when panel does not exist', () => {
+      const mockIntersectionObserver = jest.fn();
+      global.IntersectionObserver = mockIntersectionObserver;
+      createItemVisibilityObserver(jest.fn());
+
+      expect(mockIntersectionObserver).toHaveBeenCalledWith(expect.any(Function), {
+        root: null,
+        scrollMargin: '1500px',
+      });
+    });
+  });
+
+  describe('observeElements', () => {
+    it('observes all elements matching the default selector', () => {
+      const container = document.createElement('div');
+      container.innerHTML = '<li data-item-id="1"></li><li data-item-id="2"></li>';
+      const observer = { observe: jest.fn() };
+
+      observeElements(container, observer);
+
+      expect(observer.observe).toHaveBeenCalledTimes(2);
+    });
+
+    it('observes elements matching a custom selector', () => {
+      const container = document.createElement('div');
+      container.innerHTML = '<div class="item"></div><div class="item"></div>';
+      const observer = { observe: jest.fn() };
+
+      observeElements(container, observer, '.item');
+
+      expect(observer.observe).toHaveBeenCalledTimes(2);
+    });
+  });
 });