From 7a99967235cb0390292157564b541972f2049bce Mon Sep 17 00:00:00 2001
From: Jacques <jerasmus@gitlab.com>
Date: Mon, 24 Mar 2025 07:00:42 +0100
Subject: [PATCH 1/5] Show empty state on rapid diffs

Shows an empty state when no diff is available
---
 .../diffs/components/no_changes.vue           |  2 +-
 .../diffs/store/getters_versions_dropdowns.js |  8 ++--
 .../javascripts/rapid_diffs/app/index.js      |  7 +++
 .../rapid_diffs/app/init_no_changes.js        | 22 +++++++++
 .../rapid_diffs/app_component.html.haml       | 46 ++++++++++---------
 .../diffs/components/no_changes_spec.js       | 17 +++++++
 spec/frontend/rapid_diffs/app/app_spec.js     | 10 ++++
 7 files changed, 86 insertions(+), 26 deletions(-)
 create mode 100644 app/assets/javascripts/rapid_diffs/app/init_no_changes.js

diff --git a/app/assets/javascripts/diffs/components/no_changes.vue b/app/assets/javascripts/diffs/components/no_changes.vue
index b5d31cafedcbbf..8c8b70dc3da7e7 100644
--- a/app/assets/javascripts/diffs/components/no_changes.vue
+++ b/app/assets/javascripts/diffs/components/no_changes.vue
@@ -57,7 +57,7 @@ export default {
     :primary-button-text="$options.i18n.buttonText"
     :primary-button-link="getNoteableData.new_blob_path"
   >
-    <template #description>
+    <template v-if="sourceName && targetName" #description>
       <span data-testid="no-changes-message">
         <gl-sprintf :message="$options.i18n.message">
           <template #source>
diff --git a/app/assets/javascripts/diffs/store/getters_versions_dropdowns.js b/app/assets/javascripts/diffs/store/getters_versions_dropdowns.js
index 734407dec45b3f..df1edfbf2c7612 100644
--- a/app/assets/javascripts/diffs/store/getters_versions_dropdowns.js
+++ b/app/assets/javascripts/diffs/store/getters_versions_dropdowns.js
@@ -21,11 +21,11 @@ export const diffCompareDropdownTargetVersions = (state, getters) => {
   const isHeadSelected = !state.startVersion && diffHead;
   let baseVersion = null;
 
-  if (!state.mergeRequestDiff.head_version_path) {
+  if (!state.mergeRequestDiff?.head_version_path) {
     baseVersion = {
       versionName: state.targetBranchName,
       version_index: DIFF_COMPARE_BASE_VERSION_INDEX,
-      href: state.mergeRequestDiff.base_version_path,
+      href: state.mergeRequestDiff?.base_version_path,
       isBase: true,
       selected: isBaseSelected,
     };
@@ -34,7 +34,7 @@ export const diffCompareDropdownTargetVersions = (state, getters) => {
   const headVersion = {
     versionName: state.targetBranchName,
     version_index: DIFF_COMPARE_HEAD_VERSION_INDEX,
-    href: state.mergeRequestDiff.head_version_path,
+    href: state.mergeRequestDiff?.head_version_path,
     isHead: true,
     selected: isHeadSelected,
   };
@@ -51,7 +51,7 @@ export const diffCompareDropdownTargetVersions = (state, getters) => {
   return [
     ...state.mergeRequestDiffs.slice(1).map(formatVersion),
     baseVersion,
-    state.mergeRequestDiff.head_version_path && headVersion,
+    state.mergeRequestDiff?.head_version_path && headVersion,
   ].filter((a) => a);
 };
 
diff --git a/app/assets/javascripts/rapid_diffs/app/index.js b/app/assets/javascripts/rapid_diffs/app/index.js
index 6822c892823b28..388f4b1d7b8de5 100644
--- a/app/assets/javascripts/rapid_diffs/app/index.js
+++ b/app/assets/javascripts/rapid_diffs/app/index.js
@@ -7,6 +7,7 @@ import { initFileBrowser } from '~/rapid_diffs/app/init_file_browser';
 import { StreamingError } from '~/rapid_diffs/streaming_error';
 import { useDiffsView } from '~/rapid_diffs/stores/diffs_view';
 import { initHiddenFilesWarning } from '~/rapid_diffs/app/init_hidden_files_warning';
+import { initNoChanges } from '~/rapid_diffs/app/init_no_changes';
 import { createAlert } from '~/alert';
 import { __ } from '~/locale';
 
@@ -18,6 +19,12 @@ class RapidDiffsFacade {
   }
 
   init() {
+    const emptyEl = document.querySelector('#js-diffs-empty');
+    if (emptyEl) {
+      initNoChanges(emptyEl);
+      return;
+    }
+
     this.#registerCustomElements();
     const { reloadStreamUrl, metadataEndpoint, diffFilesEndpoint } =
       document.querySelector('[data-rapid-diffs]').dataset;
diff --git a/app/assets/javascripts/rapid_diffs/app/init_no_changes.js b/app/assets/javascripts/rapid_diffs/app/init_no_changes.js
new file mode 100644
index 00000000000000..26a8b74b3bfb89
--- /dev/null
+++ b/app/assets/javascripts/rapid_diffs/app/init_no_changes.js
@@ -0,0 +1,22 @@
+import Vue from 'vue';
+import VueApollo from 'vue-apollo';
+import store from '~/mr_notes/stores';
+import { apolloProvider } from '~/graphql_shared/issuable_client';
+import NoChanges from '~/diffs/components/no_changes.vue';
+
+Vue.use(VueApollo);
+export async function initNoChanges(el) {
+  const { changesEmptyStateIllustration } = el.dataset;
+
+  // eslint-disable-next-line no-new
+  new Vue({
+    el,
+    store,
+    apolloProvider,
+    render(h) {
+      return h(NoChanges, {
+        props: { changesEmptyStateIllustration },
+      });
+    },
+  });
+}
diff --git a/app/components/rapid_diffs/app_component.html.haml b/app/components/rapid_diffs/app_component.html.haml
index 83f5ae409494ff..a1249e78c4ab32 100644
--- a/app/components/rapid_diffs/app_component.html.haml
+++ b/app/components/rapid_diffs/app_component.html.haml
@@ -18,26 +18,30 @@
     .rd-app-settings
       %div{ data: { view_settings: true, show_whitespace: @show_whitespace.to_json, diff_view_type: @diff_view, update_user_endpoint: @update_user_endpoint } }
   .rd-app-body
-    .rd-app-sidebar{ data: { file_browser: true }, style: sidebar_style }
-      .rd-app-sidebar-loading
-        = helpers.gl_loading_icon(size: 'sm')
-    .rd-app-content
-      .rd-app-content-header{ data: { hidden_files_warning: true } }
-      .code{ class: helpers.user_color_scheme }
-        %div{ data: { diffs_list: true } }
-          = javascript_tag nonce: content_security_policy_nonce do
-            :plain
-              requestAnimationFrame(() => { window.performance.mark('rapid-diffs-first-diff-file-shown') })
-          - if diffs_list?
-            = diffs_list
-          - else
-            = render RapidDiffs::DiffFileComponent.with_collection(@diffs_slice, parallel_view: @diff_view == :parallel)
-          - if @stream_url
-            #js-stream-container{ data: { diffs_stream_url: @stream_url } }
-          - else
+    - if @diffs_slice.empty?
+      .gl-w-full
+        #js-diffs-empty{ data: { changes_empty_state_illustration: image_path('illustrations/empty-state/empty-commit-md.svg') }}
+    - else
+      .rd-app-sidebar{ data: { file_browser: true }, style: sidebar_style }
+        .rd-app-sidebar-loading
+          = helpers.gl_loading_icon(size: 'sm')
+      .rd-app-content
+        .rd-app-content-header{ data: { hidden_files_warning: true } }
+        .code{ class: helpers.user_color_scheme }
+          %div{ data: { diffs_list: true } }
             = javascript_tag nonce: content_security_policy_nonce do
               :plain
-                requestAnimationFrame(() => {
-                  window.performance.mark('rapid-diffs-list-loaded');
-                  window.performance.measure('rapid-diffs-list-loading', 'rapid-diffs-first-diff-file-shown', 'rapid-diffs-list-loaded');
-                })
+                requestAnimationFrame(() => { window.performance.mark('rapid-diffs-first-diff-file-shown') })
+            - if diffs_list?
+              = diffs_list
+            - else
+              = render RapidDiffs::DiffFileComponent.with_collection(@diffs_slice, parallel_view: @diff_view == :parallel)
+            - if @stream_url
+              #js-stream-container{ data: { diffs_stream_url: @stream_url } }
+            - else
+              = javascript_tag nonce: content_security_policy_nonce do
+                :plain
+                  requestAnimationFrame(() => {
+                    window.performance.mark('rapid-diffs-list-loaded');
+                    window.performance.measure('rapid-diffs-list-loading', 'rapid-diffs-first-diff-file-shown', 'rapid-diffs-list-loaded');
+                  })
diff --git a/spec/frontend/diffs/components/no_changes_spec.js b/spec/frontend/diffs/components/no_changes_spec.js
index ef86e3a0e9567c..78fbc3a77bd9f7 100644
--- a/spec/frontend/diffs/components/no_changes_spec.js
+++ b/spec/frontend/diffs/components/no_changes_spec.js
@@ -88,4 +88,21 @@ describe('Diff no changes empty state', () => {
       },
     );
   });
+
+  it.each`
+    sourceBranch          | targetBranch
+    ${''}                 | ${TEST_TARGET_BRANCH}
+    ${TEST_SOURCE_BRANCH} | ${''}
+  `(
+    'does not render message when source=$sourceBranch and target=$targetBranch',
+    ({ sourceBranch, targetBranch }) => {
+      store.getters.getNoteableData = {
+        source_branch: sourceBranch,
+        target_branch: targetBranch,
+      };
+
+      const wrapper = createComponent(mount);
+      expect(findMessage(wrapper).exists()).toBe(false);
+    },
+  );
 });
diff --git a/spec/frontend/rapid_diffs/app/app_spec.js b/spec/frontend/rapid_diffs/app/app_spec.js
index 30c22a617a8c7b..1b77686acdf947 100644
--- a/spec/frontend/rapid_diffs/app/app_spec.js
+++ b/spec/frontend/rapid_diffs/app/app_spec.js
@@ -10,11 +10,13 @@ import { initHiddenFilesWarning } from '~/rapid_diffs/app/init_hidden_files_warn
 import { initFileBrowser } from '~/rapid_diffs/app/init_file_browser';
 import { StreamingError } from '~/rapid_diffs/streaming_error';
 import { useDiffsView } from '~/rapid_diffs/stores/diffs_view';
+import { initNoChanges } from '~/rapid_diffs/app/init_no_changes';
 
 jest.mock('~/mr_notes/stores');
 jest.mock('~/rapid_diffs/app/view_settings');
 jest.mock('~/rapid_diffs/app/init_hidden_files_warning');
 jest.mock('~/rapid_diffs/app/init_file_browser');
+jest.mock('~/rapid_diffs/app/init_no_changes', () => ({ initNoChanges: jest.fn() }));
 
 describe('Rapid Diffs App', () => {
   let app;
@@ -67,4 +69,12 @@ describe('Rapid Diffs App', () => {
     app.reloadDiffs();
     expect(useDiffsList().reloadDiffs).toHaveBeenCalledWith('/reload');
   });
+
+  it('initializes no changes when #js-diffs-empty is present', () => {
+    setHTMLFixture('<div id="js-diffs-empty"></div>');
+    createApp();
+    app.init();
+
+    expect(initNoChanges).toHaveBeenCalledWith(document.querySelector('#js-diffs-empty'));
+  });
 });
-- 
GitLab


From f8e8abd685f3cb30803fa1d59c9555360b326fbf Mon Sep 17 00:00:00 2001
From: Jacques <jerasmus@gitlab.com>
Date: Mon, 31 Mar 2025 08:43:52 +0200
Subject: [PATCH 2/5] Revert "Show empty state on rapid diffs"

This reverts commit 7a99967235cb0390292157564b541972f2049bce.
---
 .../diffs/components/no_changes.vue           |  2 +-
 .../diffs/store/getters_versions_dropdowns.js |  8 ++--
 .../javascripts/rapid_diffs/app/index.js      |  7 ---
 .../rapid_diffs/app/init_no_changes.js        | 22 ---------
 .../rapid_diffs/app_component.html.haml       | 46 +++++++++----------
 .../diffs/components/no_changes_spec.js       | 17 -------
 spec/frontend/rapid_diffs/app/app_spec.js     | 10 ----
 7 files changed, 26 insertions(+), 86 deletions(-)
 delete mode 100644 app/assets/javascripts/rapid_diffs/app/init_no_changes.js

diff --git a/app/assets/javascripts/diffs/components/no_changes.vue b/app/assets/javascripts/diffs/components/no_changes.vue
index 8c8b70dc3da7e7..b5d31cafedcbbf 100644
--- a/app/assets/javascripts/diffs/components/no_changes.vue
+++ b/app/assets/javascripts/diffs/components/no_changes.vue
@@ -57,7 +57,7 @@ export default {
     :primary-button-text="$options.i18n.buttonText"
     :primary-button-link="getNoteableData.new_blob_path"
   >
-    <template v-if="sourceName && targetName" #description>
+    <template #description>
       <span data-testid="no-changes-message">
         <gl-sprintf :message="$options.i18n.message">
           <template #source>
diff --git a/app/assets/javascripts/diffs/store/getters_versions_dropdowns.js b/app/assets/javascripts/diffs/store/getters_versions_dropdowns.js
index df1edfbf2c7612..734407dec45b3f 100644
--- a/app/assets/javascripts/diffs/store/getters_versions_dropdowns.js
+++ b/app/assets/javascripts/diffs/store/getters_versions_dropdowns.js
@@ -21,11 +21,11 @@ export const diffCompareDropdownTargetVersions = (state, getters) => {
   const isHeadSelected = !state.startVersion && diffHead;
   let baseVersion = null;
 
-  if (!state.mergeRequestDiff?.head_version_path) {
+  if (!state.mergeRequestDiff.head_version_path) {
     baseVersion = {
       versionName: state.targetBranchName,
       version_index: DIFF_COMPARE_BASE_VERSION_INDEX,
-      href: state.mergeRequestDiff?.base_version_path,
+      href: state.mergeRequestDiff.base_version_path,
       isBase: true,
       selected: isBaseSelected,
     };
@@ -34,7 +34,7 @@ export const diffCompareDropdownTargetVersions = (state, getters) => {
   const headVersion = {
     versionName: state.targetBranchName,
     version_index: DIFF_COMPARE_HEAD_VERSION_INDEX,
-    href: state.mergeRequestDiff?.head_version_path,
+    href: state.mergeRequestDiff.head_version_path,
     isHead: true,
     selected: isHeadSelected,
   };
@@ -51,7 +51,7 @@ export const diffCompareDropdownTargetVersions = (state, getters) => {
   return [
     ...state.mergeRequestDiffs.slice(1).map(formatVersion),
     baseVersion,
-    state.mergeRequestDiff?.head_version_path && headVersion,
+    state.mergeRequestDiff.head_version_path && headVersion,
   ].filter((a) => a);
 };
 
diff --git a/app/assets/javascripts/rapid_diffs/app/index.js b/app/assets/javascripts/rapid_diffs/app/index.js
index 388f4b1d7b8de5..6822c892823b28 100644
--- a/app/assets/javascripts/rapid_diffs/app/index.js
+++ b/app/assets/javascripts/rapid_diffs/app/index.js
@@ -7,7 +7,6 @@ import { initFileBrowser } from '~/rapid_diffs/app/init_file_browser';
 import { StreamingError } from '~/rapid_diffs/streaming_error';
 import { useDiffsView } from '~/rapid_diffs/stores/diffs_view';
 import { initHiddenFilesWarning } from '~/rapid_diffs/app/init_hidden_files_warning';
-import { initNoChanges } from '~/rapid_diffs/app/init_no_changes';
 import { createAlert } from '~/alert';
 import { __ } from '~/locale';
 
@@ -19,12 +18,6 @@ class RapidDiffsFacade {
   }
 
   init() {
-    const emptyEl = document.querySelector('#js-diffs-empty');
-    if (emptyEl) {
-      initNoChanges(emptyEl);
-      return;
-    }
-
     this.#registerCustomElements();
     const { reloadStreamUrl, metadataEndpoint, diffFilesEndpoint } =
       document.querySelector('[data-rapid-diffs]').dataset;
diff --git a/app/assets/javascripts/rapid_diffs/app/init_no_changes.js b/app/assets/javascripts/rapid_diffs/app/init_no_changes.js
deleted file mode 100644
index 26a8b74b3bfb89..00000000000000
--- a/app/assets/javascripts/rapid_diffs/app/init_no_changes.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import Vue from 'vue';
-import VueApollo from 'vue-apollo';
-import store from '~/mr_notes/stores';
-import { apolloProvider } from '~/graphql_shared/issuable_client';
-import NoChanges from '~/diffs/components/no_changes.vue';
-
-Vue.use(VueApollo);
-export async function initNoChanges(el) {
-  const { changesEmptyStateIllustration } = el.dataset;
-
-  // eslint-disable-next-line no-new
-  new Vue({
-    el,
-    store,
-    apolloProvider,
-    render(h) {
-      return h(NoChanges, {
-        props: { changesEmptyStateIllustration },
-      });
-    },
-  });
-}
diff --git a/app/components/rapid_diffs/app_component.html.haml b/app/components/rapid_diffs/app_component.html.haml
index a1249e78c4ab32..83f5ae409494ff 100644
--- a/app/components/rapid_diffs/app_component.html.haml
+++ b/app/components/rapid_diffs/app_component.html.haml
@@ -18,30 +18,26 @@
     .rd-app-settings
       %div{ data: { view_settings: true, show_whitespace: @show_whitespace.to_json, diff_view_type: @diff_view, update_user_endpoint: @update_user_endpoint } }
   .rd-app-body
-    - if @diffs_slice.empty?
-      .gl-w-full
-        #js-diffs-empty{ data: { changes_empty_state_illustration: image_path('illustrations/empty-state/empty-commit-md.svg') }}
-    - else
-      .rd-app-sidebar{ data: { file_browser: true }, style: sidebar_style }
-        .rd-app-sidebar-loading
-          = helpers.gl_loading_icon(size: 'sm')
-      .rd-app-content
-        .rd-app-content-header{ data: { hidden_files_warning: true } }
-        .code{ class: helpers.user_color_scheme }
-          %div{ data: { diffs_list: true } }
+    .rd-app-sidebar{ data: { file_browser: true }, style: sidebar_style }
+      .rd-app-sidebar-loading
+        = helpers.gl_loading_icon(size: 'sm')
+    .rd-app-content
+      .rd-app-content-header{ data: { hidden_files_warning: true } }
+      .code{ class: helpers.user_color_scheme }
+        %div{ data: { diffs_list: true } }
+          = javascript_tag nonce: content_security_policy_nonce do
+            :plain
+              requestAnimationFrame(() => { window.performance.mark('rapid-diffs-first-diff-file-shown') })
+          - if diffs_list?
+            = diffs_list
+          - else
+            = render RapidDiffs::DiffFileComponent.with_collection(@diffs_slice, parallel_view: @diff_view == :parallel)
+          - if @stream_url
+            #js-stream-container{ data: { diffs_stream_url: @stream_url } }
+          - else
             = javascript_tag nonce: content_security_policy_nonce do
               :plain
-                requestAnimationFrame(() => { window.performance.mark('rapid-diffs-first-diff-file-shown') })
-            - if diffs_list?
-              = diffs_list
-            - else
-              = render RapidDiffs::DiffFileComponent.with_collection(@diffs_slice, parallel_view: @diff_view == :parallel)
-            - if @stream_url
-              #js-stream-container{ data: { diffs_stream_url: @stream_url } }
-            - else
-              = javascript_tag nonce: content_security_policy_nonce do
-                :plain
-                  requestAnimationFrame(() => {
-                    window.performance.mark('rapid-diffs-list-loaded');
-                    window.performance.measure('rapid-diffs-list-loading', 'rapid-diffs-first-diff-file-shown', 'rapid-diffs-list-loaded');
-                  })
+                requestAnimationFrame(() => {
+                  window.performance.mark('rapid-diffs-list-loaded');
+                  window.performance.measure('rapid-diffs-list-loading', 'rapid-diffs-first-diff-file-shown', 'rapid-diffs-list-loaded');
+                })
diff --git a/spec/frontend/diffs/components/no_changes_spec.js b/spec/frontend/diffs/components/no_changes_spec.js
index 78fbc3a77bd9f7..ef86e3a0e9567c 100644
--- a/spec/frontend/diffs/components/no_changes_spec.js
+++ b/spec/frontend/diffs/components/no_changes_spec.js
@@ -88,21 +88,4 @@ describe('Diff no changes empty state', () => {
       },
     );
   });
-
-  it.each`
-    sourceBranch          | targetBranch
-    ${''}                 | ${TEST_TARGET_BRANCH}
-    ${TEST_SOURCE_BRANCH} | ${''}
-  `(
-    'does not render message when source=$sourceBranch and target=$targetBranch',
-    ({ sourceBranch, targetBranch }) => {
-      store.getters.getNoteableData = {
-        source_branch: sourceBranch,
-        target_branch: targetBranch,
-      };
-
-      const wrapper = createComponent(mount);
-      expect(findMessage(wrapper).exists()).toBe(false);
-    },
-  );
 });
diff --git a/spec/frontend/rapid_diffs/app/app_spec.js b/spec/frontend/rapid_diffs/app/app_spec.js
index 1b77686acdf947..30c22a617a8c7b 100644
--- a/spec/frontend/rapid_diffs/app/app_spec.js
+++ b/spec/frontend/rapid_diffs/app/app_spec.js
@@ -10,13 +10,11 @@ import { initHiddenFilesWarning } from '~/rapid_diffs/app/init_hidden_files_warn
 import { initFileBrowser } from '~/rapid_diffs/app/init_file_browser';
 import { StreamingError } from '~/rapid_diffs/streaming_error';
 import { useDiffsView } from '~/rapid_diffs/stores/diffs_view';
-import { initNoChanges } from '~/rapid_diffs/app/init_no_changes';
 
 jest.mock('~/mr_notes/stores');
 jest.mock('~/rapid_diffs/app/view_settings');
 jest.mock('~/rapid_diffs/app/init_hidden_files_warning');
 jest.mock('~/rapid_diffs/app/init_file_browser');
-jest.mock('~/rapid_diffs/app/init_no_changes', () => ({ initNoChanges: jest.fn() }));
 
 describe('Rapid Diffs App', () => {
   let app;
@@ -69,12 +67,4 @@ describe('Rapid Diffs App', () => {
     app.reloadDiffs();
     expect(useDiffsList().reloadDiffs).toHaveBeenCalledWith('/reload');
   });
-
-  it('initializes no changes when #js-diffs-empty is present', () => {
-    setHTMLFixture('<div id="js-diffs-empty"></div>');
-    createApp();
-    app.init();
-
-    expect(initNoChanges).toHaveBeenCalledWith(document.querySelector('#js-diffs-empty'));
-  });
 });
-- 
GitLab


From 652599413b5d830901b2ec4ad2c77b75065d187f Mon Sep 17 00:00:00 2001
From: Jacques <jerasmus@gitlab.com>
Date: Mon, 31 Mar 2025 10:52:27 +0200
Subject: [PATCH 3/5] Show empty state on rapid diffs

Shows an empty state when no diff is available
---
 .../javascripts/rapid_diffs/app/index.js      | 10 +++++++---
 .../rapid_diffs/app_component.html.haml       |  8 ++++++--
 app/components/rapid_diffs/app_component.rb   |  2 ++
 .../empty_state_component.html.haml           |  9 +++++++++
 .../rapid_diffs/empty_state_component.rb      | 13 +++++++++++++
 app/controllers/concerns/stream_diffs.rb      | 19 ++++++++++++++++++-
 app/controllers/projects/commit_controller.rb |  1 +
 .../merge_requests/creations_controller.rb    |  1 +
 .../projects/merge_requests_controller.rb     |  1 +
 .../projects/commit/rapid_diffs.html.haml     |  2 +-
 .../creations/rapid_diffs.html.haml           |  2 +-
 .../merge_requests/rapid_diffs.html.haml      |  2 +-
 locale/gitlab.pot                             |  3 +++
 13 files changed, 64 insertions(+), 9 deletions(-)
 create mode 100644 app/components/rapid_diffs/empty_state_component.html.haml
 create mode 100644 app/components/rapid_diffs/empty_state_component.rb

diff --git a/app/assets/javascripts/rapid_diffs/app/index.js b/app/assets/javascripts/rapid_diffs/app/index.js
index 6822c892823b28..28c0587224d907 100644
--- a/app/assets/javascripts/rapid_diffs/app/index.js
+++ b/app/assets/javascripts/rapid_diffs/app/index.js
@@ -1,4 +1,5 @@
 import { pinia } from '~/pinia/instance';
+import { parseBoolean } from '~/lib/utils/common_utils';
 import { initViewSettings } from '~/rapid_diffs/app/view_settings';
 import { DiffFile } from '~/rapid_diffs/diff_file';
 import { DiffFileMounted } from '~/rapid_diffs/diff_file_mounted';
@@ -19,8 +20,11 @@ class RapidDiffsFacade {
 
   init() {
     this.#registerCustomElements();
-    const { reloadStreamUrl, metadataEndpoint, diffFilesEndpoint } =
+    const { reloadStreamUrl, metadataEndpoint, diffFilesEndpoint, emptyState } =
       document.querySelector('[data-rapid-diffs]').dataset;
+
+    this.emptyState = parseBoolean(emptyState);
+
     useDiffsView(pinia).metadataEndpoint = metadataEndpoint;
     useDiffsView(pinia)
       .loadMetadata()
@@ -42,10 +46,9 @@ class RapidDiffsFacade {
     initViewSettings({ pinia, streamUrl: reloadStreamUrl });
   }
 
-  // eslint-disable-next-line class-methods-use-this
   streamRemainingDiffs() {
     const streamContainer = document.getElementById('js-stream-container');
-    if (!streamContainer) return Promise.resolve();
+    if (!streamContainer || this.emptyState) return Promise.resolve();
 
     return useDiffsList(pinia).streamRemainingDiffs(streamContainer.dataset.diffsStreamUrl);
   }
@@ -55,6 +58,7 @@ class RapidDiffsFacade {
     const { reloadStreamUrl } = document.querySelector('[data-rapid-diffs]').dataset;
 
     return useDiffsList(pinia).reloadDiffs(reloadStreamUrl);
+    // TODO: Handle empty state for reloadDiffs
   }
 
   #registerCustomElements() {
diff --git a/app/components/rapid_diffs/app_component.html.haml b/app/components/rapid_diffs/app_component.html.haml
index 83f5ae409494ff..3ec52bd3d878d9 100644
--- a/app/components/rapid_diffs/app_component.html.haml
+++ b/app/components/rapid_diffs/app_component.html.haml
@@ -11,7 +11,7 @@
             streamRequest: fetch('#{Gitlab::UrlSanitizer.sanitize(@stream_url)}', { signal: controller.signal })
           }
 
-.rd-app{ data: { rapid_diffs: true, reload_stream_url: @reload_stream_url, metadata_endpoint: @metadata_endpoint, diff_files_endpoint: @diff_files_endpoint } }
+.rd-app{ data: { rapid_diffs: true, reload_stream_url: @reload_stream_url, metadata_endpoint: @metadata_endpoint, diff_files_endpoint: @diff_files_endpoint, empty_state: @empty_state.to_json } }
   .rd-app-header
     .rd-app-file-browser-toggle
       %div{ data: { file_browser_toggle: true } }
@@ -23,6 +23,10 @@
         = helpers.gl_loading_icon(size: 'sm')
     .rd-app-content
       .rd-app-content-header{ data: { hidden_files_warning: true } }
+
+      - if @empty_state && !@stream_url
+        = render RapidDiffs::EmptyStateComponent.new
+
       .code{ class: helpers.user_color_scheme }
         %div{ data: { diffs_list: true } }
           = javascript_tag nonce: content_security_policy_nonce do
@@ -30,7 +34,7 @@
               requestAnimationFrame(() => { window.performance.mark('rapid-diffs-first-diff-file-shown') })
           - if diffs_list?
             = diffs_list
-          - else
+          - elsif !@empty_state
             = render RapidDiffs::DiffFileComponent.with_collection(@diffs_slice, parallel_view: @diff_view == :parallel)
           - if @stream_url
             #js-stream-container{ data: { diffs_stream_url: @stream_url } }
diff --git a/app/components/rapid_diffs/app_component.rb b/app/components/rapid_diffs/app_component.rb
index 6e33d11785d853..2de1594dd65cd4 100644
--- a/app/components/rapid_diffs/app_component.rb
+++ b/app/components/rapid_diffs/app_component.rb
@@ -13,6 +13,7 @@ def initialize(
       update_user_endpoint:,
       metadata_endpoint:,
       diff_files_endpoint:,
+      empty_state: false,
       preload: true
     )
       @diffs_slice = diffs_slice
@@ -23,6 +24,7 @@ def initialize(
       @update_user_endpoint = update_user_endpoint
       @metadata_endpoint = metadata_endpoint
       @diff_files_endpoint = diff_files_endpoint
+      @empty_state = empty_state
       @preload = preload
     end
 
diff --git a/app/components/rapid_diffs/empty_state_component.html.haml b/app/components/rapid_diffs/empty_state_component.html.haml
new file mode 100644
index 00000000000000..a0128c6891ac98
--- /dev/null
+++ b/app/components/rapid_diffs/empty_state_component.html.haml
@@ -0,0 +1,9 @@
+.rd-app-empty-state.gl-mt-5.gl-text-center
+  = render Pajamas::CardComponent.new(card_options: { class: "gl-bg-subtle" }) do |c|
+    - c.with_body do
+      = render Pajamas::EmptyStateComponent.new(svg_path: 'illustrations/empty-state/empty-commit-md.svg',
+        title: message) do |c|
+
+        - c.with_description do
+          -# TODO: Add secondary text
+          -# TODO: Add call to action button
diff --git a/app/components/rapid_diffs/empty_state_component.rb b/app/components/rapid_diffs/empty_state_component.rb
new file mode 100644
index 00000000000000..47d5c68e452507
--- /dev/null
+++ b/app/components/rapid_diffs/empty_state_component.rb
@@ -0,0 +1,13 @@
+# frozen_string_literal: true
+
+module RapidDiffs
+  class EmptyStateComponent < ViewComponent::Base
+    def initialize(message: nil)
+      @message = message || _('There are no changes yet')
+    end
+
+    private
+
+    attr_reader :message
+  end
+end
diff --git a/app/controllers/concerns/stream_diffs.rb b/app/controllers/concerns/stream_diffs.rb
index 8c3a188b5ee212..b9486295d48887 100644
--- a/app/controllers/concerns/stream_diffs.rb
+++ b/app/controllers/concerns/stream_diffs.rb
@@ -57,11 +57,19 @@ def view
   def stream_diff_files(options)
     return unless resource
 
+    diffs = resource.diffs_for_streaming(options)
+
+    if diffs.diff_files.empty?
+      empty_state_component = ::RapidDiffs::EmptyStateComponent.new
+      response.stream.write empty_state_component.render_in(view_context)
+      return
+    end
+
     # NOTE: This is a temporary flag to test out the new diff_blobs
     if !!ActiveModel::Type::Boolean.new.cast(params.permit(:diff_blobs)[:diff_blobs])
       stream_diff_blobs(options)
     else
-      resource.diffs_for_streaming(options).diff_files.each do |diff_file|
+      diffs.diff_files.each do |diff_file|
         response.stream.write(render_diff_file(diff_file))
       end
     end
@@ -75,7 +83,16 @@ def render_diff_file(diff_file)
   end
 
   def stream_diff_blobs(options)
+    empty_state = true
+
     resource.diffs_for_streaming(options) do |diff_files_batch|
+      if diff_files_batch.empty? && empty_state
+        empty_state_component = ::RapidDiffs::EmptyStateComponent.new
+        response.stream.write empty_state_component.render_in(view_context)
+        next
+      end
+
+      empty_state = false
       diff_files_batch.each do |diff_file|
         response.stream.write(render_diff_file(diff_file))
       end
diff --git a/app/controllers/projects/commit_controller.rb b/app/controllers/projects/commit_controller.rb
index cb577480f5b653..4baec64d1606f6 100644
--- a/app/controllers/projects/commit_controller.rb
+++ b/app/controllers/projects/commit_controller.rb
@@ -165,6 +165,7 @@ def rapid_diffs
     @stream_url = diffs_stream_url(@commit, streaming_offset, diff_view)
     @diffs_slice = @commit.first_diffs_slice(streaming_offset, commit_diff_options)
     @diff_files_endpoint = diff_files_metadata_namespace_project_commit_path
+    @empty_state = @commit.diffs(commit_diff_options).diff_files.empty?
 
     show
   end
diff --git a/app/controllers/projects/merge_requests/creations_controller.rb b/app/controllers/projects/merge_requests/creations_controller.rb
index 6ec02a31cc60dd..3395b0e420108e 100644
--- a/app/controllers/projects/merge_requests/creations_controller.rb
+++ b/app/controllers/projects/merge_requests/creations_controller.rb
@@ -70,6 +70,7 @@ def rapid_diffs
     @stream_url = project_new_merge_request_diffs_stream_path(@project, merge_request: merge_request)
     @reload_stream_url = project_new_merge_request_diffs_stream_path(@project, merge_request: merge_request)
     @diff_files_endpoint = project_new_merge_request_diff_files_metadata_path(@project, merge_request: merge_request)
+    @empty_state = @merge_request.diffs(diff_options).diff_files.empty?
 
     define_new_vars
   end
diff --git a/app/controllers/projects/merge_requests_controller.rb b/app/controllers/projects/merge_requests_controller.rb
index b6f97072979a4a..9519fb941867ff 100644
--- a/app/controllers/projects/merge_requests_controller.rb
+++ b/app/controllers/projects/merge_requests_controller.rb
@@ -112,6 +112,7 @@ def rapid_diffs
     @stream_url = diffs_stream_url(@merge_request, streaming_offset, diff_view)
     @diffs_slice = @merge_request.first_diffs_slice(streaming_offset)
     @diff_files_endpoint = diff_files_metadata_namespace_project_merge_request_path
+    @empty_state = @merge_request.diffs.diff_files.empty?
 
     show_merge_request
   end
diff --git a/app/views/projects/commit/rapid_diffs.html.haml b/app/views/projects/commit/rapid_diffs.html.haml
index f0e62bff58aeba..a1bb59c302cac2 100644
--- a/app/views/projects/commit/rapid_diffs.html.haml
+++ b/app/views/projects/commit/rapid_diffs.html.haml
@@ -13,5 +13,5 @@
 .container-fluid{ class: [container_class] }
   = render "commit_box"
   = render "ci_menu"
-  - args = { diffs_slice: @diffs_slice, reload_stream_url: @reload_stream_url, stream_url: @stream_url, show_whitespace: @show_whitespace_default, diff_view: @diff_view, update_user_endpoint: @update_current_user_path, metadata_endpoint: @endpoint_metadata_url, diff_files_endpoint: @diff_files_endpoint }
+  - args = { diffs_slice: @diffs_slice, reload_stream_url: @reload_stream_url, stream_url: @stream_url, show_whitespace: @show_whitespace_default, diff_view: @diff_view, update_user_endpoint: @update_current_user_path, metadata_endpoint: @endpoint_metadata_url, diff_files_endpoint: @diff_files_endpoint, empty_state: @empty_state }
   = render ::RapidDiffs::AppComponent.new(**args)
diff --git a/app/views/projects/merge_requests/creations/rapid_diffs.html.haml b/app/views/projects/merge_requests/creations/rapid_diffs.html.haml
index 469ef642658480..cc8f9090419c2f 100644
--- a/app/views/projects/merge_requests/creations/rapid_diffs.html.haml
+++ b/app/views/projects/merge_requests/creations/rapid_diffs.html.haml
@@ -3,5 +3,5 @@
 - add_page_specific_style 'page_bundles/merge_request_rapid_diffs'
 
 = render "page" do
-  - args = { diffs_slice: nil, reload_stream_url: @reload_stream_url, stream_url: @stream_url, show_whitespace: @show_whitespace_default, diff_view: diff_view, update_user_endpoint: expose_path(api_v4_user_preferences_path), metadata_endpoint: nil, diff_files_endpoint: @diff_files_endpoint, preload: false }
+  - args = { diffs_slice: nil, reload_stream_url: @reload_stream_url, stream_url: @stream_url, show_whitespace: @show_whitespace_default, diff_view: diff_view, update_user_endpoint: expose_path(api_v4_user_preferences_path), metadata_endpoint: nil, diff_files_endpoint: @diff_files_endpoint, preload: false, empty_state: @empty_state }
   = render ::RapidDiffs::AppComponent.new(**args)
diff --git a/app/views/projects/merge_requests/rapid_diffs.html.haml b/app/views/projects/merge_requests/rapid_diffs.html.haml
index a1e5c94d890973..af7b0989262452 100644
--- a/app/views/projects/merge_requests/rapid_diffs.html.haml
+++ b/app/views/projects/merge_requests/rapid_diffs.html.haml
@@ -3,7 +3,7 @@
 - @content_class = 'rd-page-container diffs-container-limited'
 
 = render 'page'
-- args = { diffs_slice: @diffs_slice, reload_stream_url: @reload_stream_url, stream_url: @stream_url, show_whitespace: @show_whitespace_default, diff_view: @diff_view, update_user_endpoint: @update_current_user_path, metadata_endpoint: @endpoint_metadata_url, diff_files_endpoint: @diff_files_endpoint }
+- args = { diffs_slice: @diffs_slice, reload_stream_url: @reload_stream_url, stream_url: @stream_url, show_whitespace: @show_whitespace_default, diff_view: @diff_view, update_user_endpoint: @update_current_user_path, metadata_endpoint: @endpoint_metadata_url, diff_files_endpoint: @diff_files_endpoint, empty_state: @empty_state }
 = render ::RapidDiffs::AppComponent.new(**args) do |c|
   - c.with_diffs_list do
     = render RapidDiffs::MergeRequestDiffFileComponent.with_collection(@diffs_slice, merge_request: @merge_request, parallel_view: @diff_view == :parallel)
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 085f5851c9cc5a..a5b9c613fff805 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -59754,6 +59754,9 @@ msgstr ""
 msgid "There are no changes"
 msgstr ""
 
+msgid "There are no changes yet"
+msgstr ""
+
 msgid "There are no charts configured for this page"
 msgstr ""
 
-- 
GitLab


From fea6d13062e38610e409a92adc6a1eb009e9bae6 Mon Sep 17 00:00:00 2001
From: Jacques <jerasmus@gitlab.com>
Date: Tue, 1 Apr 2025 15:46:30 +0200
Subject: [PATCH 4/5] Address code review comments

General cleanup of the implementation
---
 app/assets/javascripts/rapid_diffs/app/index.js       |  8 +++-----
 app/components/rapid_diffs/app_component.html.haml    |  9 +++++----
 app/components/rapid_diffs/app_component.rb           |  6 ++----
 app/components/rapid_diffs/empty_state_component.rb   |  2 +-
 app/controllers/concerns/stream_diffs.rb              | 11 +----------
 app/controllers/projects/commit_controller.rb         |  1 -
 .../projects/merge_requests/creations_controller.rb   |  1 -
 app/controllers/projects/merge_requests_controller.rb |  1 -
 app/views/projects/commit/rapid_diffs.html.haml       |  2 +-
 .../merge_requests/creations/rapid_diffs.html.haml    |  2 +-
 .../projects/merge_requests/rapid_diffs.html.haml     |  2 +-
 locale/gitlab.pot                                     |  3 ---
 12 files changed, 15 insertions(+), 33 deletions(-)

diff --git a/app/assets/javascripts/rapid_diffs/app/index.js b/app/assets/javascripts/rapid_diffs/app/index.js
index 28c0587224d907..8c0f57a194f524 100644
--- a/app/assets/javascripts/rapid_diffs/app/index.js
+++ b/app/assets/javascripts/rapid_diffs/app/index.js
@@ -1,5 +1,4 @@
 import { pinia } from '~/pinia/instance';
-import { parseBoolean } from '~/lib/utils/common_utils';
 import { initViewSettings } from '~/rapid_diffs/app/view_settings';
 import { DiffFile } from '~/rapid_diffs/diff_file';
 import { DiffFileMounted } from '~/rapid_diffs/diff_file_mounted';
@@ -20,11 +19,9 @@ class RapidDiffsFacade {
 
   init() {
     this.#registerCustomElements();
-    const { reloadStreamUrl, metadataEndpoint, diffFilesEndpoint, emptyState } =
+    const { reloadStreamUrl, metadataEndpoint, diffFilesEndpoint } =
       document.querySelector('[data-rapid-diffs]').dataset;
 
-    this.emptyState = parseBoolean(emptyState);
-
     useDiffsView(pinia).metadataEndpoint = metadataEndpoint;
     useDiffsView(pinia)
       .loadMetadata()
@@ -46,9 +43,10 @@ class RapidDiffsFacade {
     initViewSettings({ pinia, streamUrl: reloadStreamUrl });
   }
 
+  // eslint-disable-next-line class-methods-use-this
   streamRemainingDiffs() {
     const streamContainer = document.getElementById('js-stream-container');
-    if (!streamContainer || this.emptyState) return Promise.resolve();
+    if (!streamContainer) return Promise.resolve();
 
     return useDiffsList(pinia).streamRemainingDiffs(streamContainer.dataset.diffsStreamUrl);
   }
diff --git a/app/components/rapid_diffs/app_component.html.haml b/app/components/rapid_diffs/app_component.html.haml
index 3ec52bd3d878d9..8f0a086e6425a4 100644
--- a/app/components/rapid_diffs/app_component.html.haml
+++ b/app/components/rapid_diffs/app_component.html.haml
@@ -1,4 +1,4 @@
-- if @preload
+- if !@lazy
   - helpers.add_page_startup_api_call @metadata_endpoint
   - helpers.add_page_startup_api_call @diff_files_endpoint
   - if @stream_url
@@ -10,8 +10,9 @@
             controller: controller,
             streamRequest: fetch('#{Gitlab::UrlSanitizer.sanitize(@stream_url)}', { signal: controller.signal })
           }
+- empty_diff =  @diffs_slice.nil? || @diffs_slice.empty?
 
-.rd-app{ data: { rapid_diffs: true, reload_stream_url: @reload_stream_url, metadata_endpoint: @metadata_endpoint, diff_files_endpoint: @diff_files_endpoint, empty_state: @empty_state.to_json } }
+.rd-app{ data: { rapid_diffs: true, reload_stream_url: @reload_stream_url, metadata_endpoint: @metadata_endpoint, diff_files_endpoint: @diff_files_endpoint } }
   .rd-app-header
     .rd-app-file-browser-toggle
       %div{ data: { file_browser_toggle: true } }
@@ -24,7 +25,7 @@
     .rd-app-content
       .rd-app-content-header{ data: { hidden_files_warning: true } }
 
-      - if @empty_state && !@stream_url
+      - if empty_diff && !@lazy
         = render RapidDiffs::EmptyStateComponent.new
 
       .code{ class: helpers.user_color_scheme }
@@ -34,7 +35,7 @@
               requestAnimationFrame(() => { window.performance.mark('rapid-diffs-first-diff-file-shown') })
           - if diffs_list?
             = diffs_list
-          - elsif !@empty_state
+          - elsif !empty_diff
             = render RapidDiffs::DiffFileComponent.with_collection(@diffs_slice, parallel_view: @diff_view == :parallel)
           - if @stream_url
             #js-stream-container{ data: { diffs_stream_url: @stream_url } }
diff --git a/app/components/rapid_diffs/app_component.rb b/app/components/rapid_diffs/app_component.rb
index 2de1594dd65cd4..c626ea4560ef47 100644
--- a/app/components/rapid_diffs/app_component.rb
+++ b/app/components/rapid_diffs/app_component.rb
@@ -13,8 +13,7 @@ def initialize(
       update_user_endpoint:,
       metadata_endpoint:,
       diff_files_endpoint:,
-      empty_state: false,
-      preload: true
+      lazy: false
     )
       @diffs_slice = diffs_slice
       @reload_stream_url = reload_stream_url
@@ -24,8 +23,7 @@ def initialize(
       @update_user_endpoint = update_user_endpoint
       @metadata_endpoint = metadata_endpoint
       @diff_files_endpoint = diff_files_endpoint
-      @empty_state = empty_state
-      @preload = preload
+      @lazy = lazy
     end
 
     def browser_visible?
diff --git a/app/components/rapid_diffs/empty_state_component.rb b/app/components/rapid_diffs/empty_state_component.rb
index 47d5c68e452507..ddb1e48cad4a35 100644
--- a/app/components/rapid_diffs/empty_state_component.rb
+++ b/app/components/rapid_diffs/empty_state_component.rb
@@ -3,7 +3,7 @@
 module RapidDiffs
   class EmptyStateComponent < ViewComponent::Base
     def initialize(message: nil)
-      @message = message || _('There are no changes yet')
+      @message = message || _('There are no changes')
     end
 
     private
diff --git a/app/controllers/concerns/stream_diffs.rb b/app/controllers/concerns/stream_diffs.rb
index b9486295d48887..cd1a0260bd8d7e 100644
--- a/app/controllers/concerns/stream_diffs.rb
+++ b/app/controllers/concerns/stream_diffs.rb
@@ -59,7 +59,7 @@ def stream_diff_files(options)
 
     diffs = resource.diffs_for_streaming(options)
 
-    if diffs.diff_files.empty?
+    if params.permit(:offset)[:offset].blank? && diffs.diff_files.empty?
       empty_state_component = ::RapidDiffs::EmptyStateComponent.new
       response.stream.write empty_state_component.render_in(view_context)
       return
@@ -83,16 +83,7 @@ def render_diff_file(diff_file)
   end
 
   def stream_diff_blobs(options)
-    empty_state = true
-
     resource.diffs_for_streaming(options) do |diff_files_batch|
-      if diff_files_batch.empty? && empty_state
-        empty_state_component = ::RapidDiffs::EmptyStateComponent.new
-        response.stream.write empty_state_component.render_in(view_context)
-        next
-      end
-
-      empty_state = false
       diff_files_batch.each do |diff_file|
         response.stream.write(render_diff_file(diff_file))
       end
diff --git a/app/controllers/projects/commit_controller.rb b/app/controllers/projects/commit_controller.rb
index 4baec64d1606f6..cb577480f5b653 100644
--- a/app/controllers/projects/commit_controller.rb
+++ b/app/controllers/projects/commit_controller.rb
@@ -165,7 +165,6 @@ def rapid_diffs
     @stream_url = diffs_stream_url(@commit, streaming_offset, diff_view)
     @diffs_slice = @commit.first_diffs_slice(streaming_offset, commit_diff_options)
     @diff_files_endpoint = diff_files_metadata_namespace_project_commit_path
-    @empty_state = @commit.diffs(commit_diff_options).diff_files.empty?
 
     show
   end
diff --git a/app/controllers/projects/merge_requests/creations_controller.rb b/app/controllers/projects/merge_requests/creations_controller.rb
index 3395b0e420108e..6ec02a31cc60dd 100644
--- a/app/controllers/projects/merge_requests/creations_controller.rb
+++ b/app/controllers/projects/merge_requests/creations_controller.rb
@@ -70,7 +70,6 @@ def rapid_diffs
     @stream_url = project_new_merge_request_diffs_stream_path(@project, merge_request: merge_request)
     @reload_stream_url = project_new_merge_request_diffs_stream_path(@project, merge_request: merge_request)
     @diff_files_endpoint = project_new_merge_request_diff_files_metadata_path(@project, merge_request: merge_request)
-    @empty_state = @merge_request.diffs(diff_options).diff_files.empty?
 
     define_new_vars
   end
diff --git a/app/controllers/projects/merge_requests_controller.rb b/app/controllers/projects/merge_requests_controller.rb
index 9519fb941867ff..b6f97072979a4a 100644
--- a/app/controllers/projects/merge_requests_controller.rb
+++ b/app/controllers/projects/merge_requests_controller.rb
@@ -112,7 +112,6 @@ def rapid_diffs
     @stream_url = diffs_stream_url(@merge_request, streaming_offset, diff_view)
     @diffs_slice = @merge_request.first_diffs_slice(streaming_offset)
     @diff_files_endpoint = diff_files_metadata_namespace_project_merge_request_path
-    @empty_state = @merge_request.diffs.diff_files.empty?
 
     show_merge_request
   end
diff --git a/app/views/projects/commit/rapid_diffs.html.haml b/app/views/projects/commit/rapid_diffs.html.haml
index a1bb59c302cac2..f0e62bff58aeba 100644
--- a/app/views/projects/commit/rapid_diffs.html.haml
+++ b/app/views/projects/commit/rapid_diffs.html.haml
@@ -13,5 +13,5 @@
 .container-fluid{ class: [container_class] }
   = render "commit_box"
   = render "ci_menu"
-  - args = { diffs_slice: @diffs_slice, reload_stream_url: @reload_stream_url, stream_url: @stream_url, show_whitespace: @show_whitespace_default, diff_view: @diff_view, update_user_endpoint: @update_current_user_path, metadata_endpoint: @endpoint_metadata_url, diff_files_endpoint: @diff_files_endpoint, empty_state: @empty_state }
+  - args = { diffs_slice: @diffs_slice, reload_stream_url: @reload_stream_url, stream_url: @stream_url, show_whitespace: @show_whitespace_default, diff_view: @diff_view, update_user_endpoint: @update_current_user_path, metadata_endpoint: @endpoint_metadata_url, diff_files_endpoint: @diff_files_endpoint }
   = render ::RapidDiffs::AppComponent.new(**args)
diff --git a/app/views/projects/merge_requests/creations/rapid_diffs.html.haml b/app/views/projects/merge_requests/creations/rapid_diffs.html.haml
index cc8f9090419c2f..cd06311dcbd24f 100644
--- a/app/views/projects/merge_requests/creations/rapid_diffs.html.haml
+++ b/app/views/projects/merge_requests/creations/rapid_diffs.html.haml
@@ -3,5 +3,5 @@
 - add_page_specific_style 'page_bundles/merge_request_rapid_diffs'
 
 = render "page" do
-  - args = { diffs_slice: nil, reload_stream_url: @reload_stream_url, stream_url: @stream_url, show_whitespace: @show_whitespace_default, diff_view: diff_view, update_user_endpoint: expose_path(api_v4_user_preferences_path), metadata_endpoint: nil, diff_files_endpoint: @diff_files_endpoint, preload: false, empty_state: @empty_state }
+  - args = { diffs_slice: nil, reload_stream_url: @reload_stream_url, stream_url: @stream_url, show_whitespace: @show_whitespace_default, diff_view: diff_view, update_user_endpoint: expose_path(api_v4_user_preferences_path), metadata_endpoint: nil, diff_files_endpoint: @diff_files_endpoint, lazy: true }
   = render ::RapidDiffs::AppComponent.new(**args)
diff --git a/app/views/projects/merge_requests/rapid_diffs.html.haml b/app/views/projects/merge_requests/rapid_diffs.html.haml
index af7b0989262452..a1e5c94d890973 100644
--- a/app/views/projects/merge_requests/rapid_diffs.html.haml
+++ b/app/views/projects/merge_requests/rapid_diffs.html.haml
@@ -3,7 +3,7 @@
 - @content_class = 'rd-page-container diffs-container-limited'
 
 = render 'page'
-- args = { diffs_slice: @diffs_slice, reload_stream_url: @reload_stream_url, stream_url: @stream_url, show_whitespace: @show_whitespace_default, diff_view: @diff_view, update_user_endpoint: @update_current_user_path, metadata_endpoint: @endpoint_metadata_url, diff_files_endpoint: @diff_files_endpoint, empty_state: @empty_state }
+- args = { diffs_slice: @diffs_slice, reload_stream_url: @reload_stream_url, stream_url: @stream_url, show_whitespace: @show_whitespace_default, diff_view: @diff_view, update_user_endpoint: @update_current_user_path, metadata_endpoint: @endpoint_metadata_url, diff_files_endpoint: @diff_files_endpoint }
 = render ::RapidDiffs::AppComponent.new(**args) do |c|
   - c.with_diffs_list do
     = render RapidDiffs::MergeRequestDiffFileComponent.with_collection(@diffs_slice, merge_request: @merge_request, parallel_view: @diff_view == :parallel)
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index a5b9c613fff805..085f5851c9cc5a 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -59754,9 +59754,6 @@ msgstr ""
 msgid "There are no changes"
 msgstr ""
 
-msgid "There are no changes yet"
-msgstr ""
-
 msgid "There are no charts configured for this page"
 msgstr ""
 
-- 
GitLab


From f66bd062c67e06f393d929e95de826cb0fd59701 Mon Sep 17 00:00:00 2001
From: Jacques <jerasmus@gitlab.com>
Date: Wed, 2 Apr 2025 10:58:58 +0200
Subject: [PATCH 5/5] Add missing tests

Added tests for the empty state
---
 .../javascripts/rapid_diffs/app/index.js      |  2 -
 .../rapid_diffs/app_component.html.haml       |  5 +--
 app/components/rapid_diffs/app_component.rb   |  4 ++
 .../rapid_diffs/app_component_spec.rb         | 20 ++++++++-
 .../rapid_diffs/empty_state_component_spec.rb | 16 +++++++
 .../controllers/concerns/stream_diffs_spec.rb | 44 +++++++++++++++++++
 6 files changed, 84 insertions(+), 7 deletions(-)
 create mode 100644 spec/components/rapid_diffs/empty_state_component_spec.rb

diff --git a/app/assets/javascripts/rapid_diffs/app/index.js b/app/assets/javascripts/rapid_diffs/app/index.js
index 8c0f57a194f524..6822c892823b28 100644
--- a/app/assets/javascripts/rapid_diffs/app/index.js
+++ b/app/assets/javascripts/rapid_diffs/app/index.js
@@ -21,7 +21,6 @@ class RapidDiffsFacade {
     this.#registerCustomElements();
     const { reloadStreamUrl, metadataEndpoint, diffFilesEndpoint } =
       document.querySelector('[data-rapid-diffs]').dataset;
-
     useDiffsView(pinia).metadataEndpoint = metadataEndpoint;
     useDiffsView(pinia)
       .loadMetadata()
@@ -56,7 +55,6 @@ class RapidDiffsFacade {
     const { reloadStreamUrl } = document.querySelector('[data-rapid-diffs]').dataset;
 
     return useDiffsList(pinia).reloadDiffs(reloadStreamUrl);
-    // TODO: Handle empty state for reloadDiffs
   }
 
   #registerCustomElements() {
diff --git a/app/components/rapid_diffs/app_component.html.haml b/app/components/rapid_diffs/app_component.html.haml
index 8f0a086e6425a4..6f54260f250c12 100644
--- a/app/components/rapid_diffs/app_component.html.haml
+++ b/app/components/rapid_diffs/app_component.html.haml
@@ -10,7 +10,6 @@
             controller: controller,
             streamRequest: fetch('#{Gitlab::UrlSanitizer.sanitize(@stream_url)}', { signal: controller.signal })
           }
-- empty_diff =  @diffs_slice.nil? || @diffs_slice.empty?
 
 .rd-app{ data: { rapid_diffs: true, reload_stream_url: @reload_stream_url, metadata_endpoint: @metadata_endpoint, diff_files_endpoint: @diff_files_endpoint } }
   .rd-app-header
@@ -25,7 +24,7 @@
     .rd-app-content
       .rd-app-content-header{ data: { hidden_files_warning: true } }
 
-      - if empty_diff && !@lazy
+      - if empty_diff? && !@lazy
         = render RapidDiffs::EmptyStateComponent.new
 
       .code{ class: helpers.user_color_scheme }
@@ -35,7 +34,7 @@
               requestAnimationFrame(() => { window.performance.mark('rapid-diffs-first-diff-file-shown') })
           - if diffs_list?
             = diffs_list
-          - elsif !empty_diff
+          - elsif !empty_diff?
             = render RapidDiffs::DiffFileComponent.with_collection(@diffs_slice, parallel_view: @diff_view == :parallel)
           - if @stream_url
             #js-stream-container{ data: { diffs_stream_url: @stream_url } }
diff --git a/app/components/rapid_diffs/app_component.rb b/app/components/rapid_diffs/app_component.rb
index c626ea4560ef47..039249a772d084 100644
--- a/app/components/rapid_diffs/app_component.rb
+++ b/app/components/rapid_diffs/app_component.rb
@@ -26,6 +26,10 @@ def initialize(
       @lazy = lazy
     end
 
+    def empty_diff?
+      @diffs_slice.nil? || @diffs_slice.empty?
+    end
+
     def browser_visible?
       helpers.cookies[:file_browser_visible] != 'false'
     end
diff --git a/spec/components/rapid_diffs/app_component_spec.rb b/spec/components/rapid_diffs/app_component_spec.rb
index aea076136c0e76..ad541a351efeef 100644
--- a/spec/components/rapid_diffs/app_component_spec.rb
+++ b/spec/components/rapid_diffs/app_component_spec.rb
@@ -90,7 +90,22 @@
     expect(vc_test_controller.view_context.content_for?(:startup_js)).not_to be_nil
   end
 
-  def create_instance
+  context "when there are no diffs" do
+    let(:diffs_slice) { [] }
+
+    it "renders empty state component" do
+      render_component
+      expect(page).to have_text("There are no changes")
+    end
+
+    it "does not render empty state when lazy is true" do
+      instance = create_instance(lazy: true)
+      render_inline(instance)
+      expect(page).not_to have_text("There are no changes")
+    end
+  end
+
+  def create_instance(lazy: false)
     described_class.new(
       diffs_slice:,
       stream_url:,
@@ -99,7 +114,8 @@ def create_instance
       diff_view:,
       update_user_endpoint:,
       metadata_endpoint:,
-      diff_files_endpoint:
+      diff_files_endpoint:,
+      lazy:
     )
   end
 
diff --git a/spec/components/rapid_diffs/empty_state_component_spec.rb b/spec/components/rapid_diffs/empty_state_component_spec.rb
new file mode 100644
index 00000000000000..e3c1277552528e
--- /dev/null
+++ b/spec/components/rapid_diffs/empty_state_component_spec.rb
@@ -0,0 +1,16 @@
+# frozen_string_literal: true
+
+require "spec_helper"
+
+RSpec.describe RapidDiffs::EmptyStateComponent, type: :component, feature_category: :code_review_workflow do
+  it "renders with default message" do
+    render_inline(described_class.new)
+    expect(page).to have_text("There are no changes")
+  end
+
+  it "renders with custom message" do
+    custom_message = "No changes found in this merge request"
+    render_inline(described_class.new(message: custom_message))
+    expect(page).to have_text(custom_message)
+  end
+end
diff --git a/spec/controllers/concerns/stream_diffs_spec.rb b/spec/controllers/concerns/stream_diffs_spec.rb
index 8c29763bce9dc2..6a711357dc1ab7 100644
--- a/spec/controllers/concerns/stream_diffs_spec.rb
+++ b/spec/controllers/concerns/stream_diffs_spec.rb
@@ -48,4 +48,48 @@ def diff_options
       expect(controller.new.request.format.to_s).to eq('text/html')
     end
   end
+
+  describe '#stream_diff_files' do
+    let(:controller_instance) { controller.new }
+    let(:mock_resource) { instance_double(::Commit) }
+    let(:mock_diffs) { instance_double(Gitlab::Diff::FileCollection::Commit, diff_files: diff_files) }
+    let(:diff_files) { [] }
+    let(:response) do
+      instance_double(ActionDispatch::Response,
+        stream: instance_double(ActionDispatch::Response::Buffer, write: nil))
+    end
+
+    let(:empty_state_html) { '<empty-state>No changes</empty-state>' }
+
+    before do
+      allow(controller_instance).to receive_messages(resource: mock_resource, response: response)
+      allow(controller_instance).to receive(:view_context)
+      allow(mock_resource).to receive(:diffs_for_streaming).and_return(mock_diffs)
+    end
+
+    context 'when no diffs and no offset' do
+      before do
+        allow(controller_instance).to receive(:params).and_return(ActionController::Parameters.new)
+        allow(RapidDiffs::EmptyStateComponent).to receive_message_chain(:new, :render_in).and_return(empty_state_html)
+      end
+
+      it 'renders empty state' do
+        controller_instance.send(:stream_diff_files, {})
+
+        expect(response.stream).to have_received(:write).with(empty_state_html)
+      end
+    end
+
+    context 'when offset is provided' do
+      before do
+        allow(controller_instance).to receive(:params).and_return(ActionController::Parameters.new(offset: '5'))
+      end
+
+      it 'does not render empty state' do
+        expect(RapidDiffs::EmptyStateComponent).not_to receive(:new)
+
+        controller_instance.send(:stream_diff_files, {})
+      end
+    end
+  end
 end
-- 
GitLab