1 files changed, 23 insertions, 4 deletions

diff --git a/app/views/projects/blame/show.html.haml b/app/views/projects/blame/show.html.haml
index 74b85a93c8e..ee7ca9cd351 100644
--- a/app/views/projects/blame/show.html.haml
+++ b/app/views/projects/blame/show.html.haml
@@ -1,6 +1,15 @@
 - page_title _("Blame"), @blob.path, @ref
 - add_page_specific_style 'page_bundles/tree'
-- dataset = { testid: 'blob-content-holder', qa_selector: 'blame_file_content', per_page: @blame_per_page }
+- if @streaming_enabled && total_extra_pages > 0
+  - content_for :startup_js do
+    = javascript_tag do
+      :plain
+        window.blamePageStream = (() => {
+          const url = new URL("#{@blame_pages_url}");
+          url.searchParams.set('page', 2);
+          return fetch(url).then(response => response.body);
+        })();
+- dataset = { testid: 'blob-content-holder', qa_selector: 'blame_file_content', per_page: @blame_per_page, total_extra_pages: total_extra_pages - 1, pages_url: @blame_pages_url }
 
 #blob-content-holder.tree-holder.js-per-page{ data: dataset }
   = render "projects/blob/breadcrumb", blob: @blob, blame: true
@@ -26,11 +35,21 @@
       .blame-table-wrapper
         = render partial: 'page'
 
+        - if @streaming_enabled
+          #blame-stream-container.blame-stream-container
+
     - if @blame_pagination && @blame_pagination.total_pages > 1
       .gl-display-flex.gl-justify-content-center.gl-flex-direction-column.gl-align-items-center.gl-p-3.gl-bg-gray-50.gl-border-t-solid.gl-border-t-1.gl-border-gray-100
-        = _('For faster browsing, not all history is shown.')
-        = render Pajamas::ButtonComponent.new(href: namespace_project_blame_path(namespace_id: @project.namespace, project_id: @project, id: @id, no_pagination: true), size: :small, button_options: { class: 'gl-mt-3' }) do |c|
-          = _('View entire blame')
+        = render Pajamas::ButtonComponent.new(href: @entire_blame_path, size: :small, button_options: { class: 'gl-mt-3' }) do |c|
+          = _('Show full blame')
+
+    - if @streaming_enabled
+      #blame-stream-loading.blame-stream-loading
+        .gradient
+        = gl_loading_icon(size: 'sm')
+        %span.gl-mx-2
+          = _('Loading full blame...')
 
   - if @blame_pagination
     = paginate(@blame_pagination, theme: "gitlab")
+