Code maintenance/59280 ensure that the new activity tab renders quickly also for work packages with over 100 comments

app/components/work_packages/activities_tab/index_component.html.erb

@@ -1,53 +1,59 @@
 <%=
-  content_tag("turbo-frame", id: "work-package-activities-tab-content") do
-    flex_layout(classes: "work-packages-activities-tab-index-component", mb: [5, 5, 5, 5, 0]) do |activties_tab_wrapper_container|
-      activties_tab_wrapper_container.with_row(classes: "work-packages-activities-tab-index-component--errors") do
-        render(
-          WorkPackages::ActivitiesTab::ErrorStreamComponent.new
-        )
-      end
-      activties_tab_wrapper_container.with_row do
-        component_wrapper(data: wrapper_data_attributes) do
-          flex_layout do |activties_tab_container|
-            activties_tab_container.with_row(mb: 2) do
-              render(
-                WorkPackages::ActivitiesTab::Journals::FilterAndSortingComponent.new(
-                  work_package:,
-                  filter:
-                )
-              )
-            end
-            activties_tab_container.with_row(flex_layout: true, mt: 3) do |journals_wrapper_container|
-              journals_wrapper_container.with_row(
-                classes: "work-packages-activities-tab-index-component--journals-container work-packages-activities-tab-index-component--journals-container_with-initial-input-compensation",
-                data: { "work-packages--activities-tab--index-target": "journalsContainer" }
-              ) do
+  unless deferred
+    content_tag("turbo-frame", id: "work-package-activities-tab-content") do
+      flex_layout(classes: "work-packages-activities-tab-index-component", mb: [5, 5, 5, 5, 0]) do |activties_tab_wrapper_container|
+        activties_tab_wrapper_container.with_row(classes: "work-packages-activities-tab-index-component--errors") do
+          render(
+            WorkPackages::ActivitiesTab::ErrorStreamComponent.new
+          )
+        end
+        activties_tab_wrapper_container.with_row do
+          component_wrapper(data: wrapper_data_attributes) do
+            flex_layout do |activties_tab_container|
+              activties_tab_container.with_row(mb: 2) do
                 render(
-                  WorkPackages::ActivitiesTab::Journals::IndexComponent.new(work_package:, filter:)
+                  WorkPackages::ActivitiesTab::Journals::FilterAndSortingComponent.new(
+                    work_package:,
+                    filter:
+                  )
                 )
               end
-              if adding_comment_allowed?
+              activties_tab_container.with_row(flex_layout: true, mt: 3) do |journals_wrapper_container|
                 journals_wrapper_container.with_row(
-                  classes: "work-packages-activities-tab-index-component--input-container work-packages-activities-tab-index-component--input-container_sort-#{journal_sorting}",
-                  mt: 3,
-                  mb: [3, nil, nil, nil, 0],
-                  pt: 2,
-                  pb: 2,
-                  pl: 3,
-                  pr: [3, nil, nil, nil, 2],
-                  border: [nil, nil, nil, nil, :top],
-                  border_radius: [2, nil, nil, nil, 0],
-                  bg: :subtle
+                  classes: "work-packages-activities-tab-index-component--journals-container work-packages-activities-tab-index-component--journals-container_with-initial-input-compensation",
+                  data: { "work-packages--activities-tab--index-target": "journalsContainer" }
                 ) do
                   render(
-                    WorkPackages::ActivitiesTab::Journals::NewComponent.new(work_package:)
+                    WorkPackages::ActivitiesTab::Journals::IndexComponent.new(work_package:, filter:)
                   )
                 end
+                if adding_comment_allowed?
+                  journals_wrapper_container.with_row(
+                    classes: "work-packages-activities-tab-index-component--input-container work-packages-activities-tab-index-component--input-container_sort-#{journal_sorting}",
+                    mt: 3,
+                    mb: [3, nil, nil, nil, 0],
+                    pt: 2,
+                    pb: 2,
+                    pl: 3,
+                    pr: [3, nil, nil, nil, 2],
+                    border: [nil, nil, nil, nil, :top],
+                    border_radius: [2, nil, nil, nil, 0],
+                    bg: :subtle
+                  ) do
+                    render(
+                      WorkPackages::ActivitiesTab::Journals::NewComponent.new(work_package:)
+                    )
+                  end
+                end
               end
             end
           end
         end
       end
     end
+  else
+    render(
+      WorkPackages::ActivitiesTab::Journals::IndexComponent.new(work_package:, filter:, deferred:)
+    )
   end
 %>

app/components/work_packages/activities_tab/index_component.rb

@@ -36,17 +36,18 @@ class IndexComponent < ApplicationComponent
       include OpTurbo::Streamable
       include WorkPackages::ActivitiesTab::SharedHelpers
 
-      def initialize(work_package:, last_server_timestamp:, filter: :all)
+      def initialize(work_package:, last_server_timestamp:, filter: :all, deferred: false)
         super
 
         @work_package = work_package
         @filter = filter
         @last_server_timestamp = last_server_timestamp
+        @deferred = deferred
       end
 
       private
 
-      attr_reader :work_package, :filter, :last_server_timestamp
+      attr_reader :work_package, :filter, :last_server_timestamp, :deferred
 
       def wrapper_data_attributes
         stimulus_controller = "work-packages--activities-tab--index"

app/components/work_packages/activities_tab/journals/index_component.html.erb

@@ -1,34 +1,61 @@
 <%=
-  component_wrapper(class: "work-packages-activities-tab-journals-index-component") do
-    flex_layout(data: { test_selector: "op-wp-journals-#{filter}-#{journal_sorting}" }) do |journals_index_wrapper_container|
-      journals_index_wrapper_container.with_row(
-        classes: "work-packages-activities-tab-journals-index-component--journals-inner-container",
-        mb: inner_container_margin_bottom
-      ) do
-        flex_layout(id: insert_target_modifier_id,
-                    data: { test_selector: "op-wp-journals-container" }) do |journals_index_container|
-          if empty_state?
-            journals_index_container.with_row(mt: 2, mb: 3) do
-              render(
-                WorkPackages::ActivitiesTab::Journals::EmptyComponent.new
-              )
+  unless deferred
+    component_wrapper(class: "work-packages-activities-tab-journals-index-component") do
+      flex_layout(data: { test_selector: "op-wp-journals-#{filter}-#{journal_sorting}" }) do |journals_index_wrapper_container|
+        journals_index_wrapper_container.with_row(
+          classes: "work-packages-activities-tab-journals-index-component--journals-inner-container",
+          mb: inner_container_margin_bottom
+        ) do
+          flex_layout(id: insert_target_modifier_id,
+                      data: { test_selector: "op-wp-journals-container" }) do |journals_index_container|
+            if empty_state?
+              journals_index_container.with_row(mt: 2, mb: 3) do
+                render(
+                  WorkPackages::ActivitiesTab::Journals::EmptyComponent.new
+                )
+              end
+            end
+
+            if !journal_sorting_desc? && journals.count > MAX_RECENT_JOURNALS
+              journals_index_container.with_row do
+                helpers.turbo_frame_tag("work-package-activities-tab-content-older-journals", src: work_package_activities_path(work_package, filter:, deferred: true))
+              end
             end
-          end
 
-          journals.each do |journal|
-            journals_index_container.with_row do
-              render(WorkPackages::ActivitiesTab::Journals::ItemComponent.new(
-                      journal:, filter:,
-                      grouped_emoji_reactions: wp_journals_grouped_emoji_reactions[journal.id]
-                    ))
+            recent_journals.each do |journal|
+              journals_index_container.with_row do
+                render(WorkPackages::ActivitiesTab::Journals::ItemComponent.new(
+                        journal:, filter:,
+                        grouped_emoji_reactions: wp_journals_grouped_emoji_reactions[journal.id]
+                      ))
+              end
+            end
+
+            if journal_sorting_desc? && journals.count > MAX_RECENT_JOURNALS
+              journals_index_container.with_row do
+                helpers.turbo_frame_tag("work-package-activities-tab-content-older-journals", src: work_package_activities_path(work_package, filter:, deferred: true))
+              end
             end
           end
         end
-      end
 
-      unless empty_state? || journal_sorting_desc?
-        journals_index_wrapper_container
-          .with_row(classes: "work-packages-activities-tab-journals-index-component--stem-connection")
+        unless empty_state? || journal_sorting_desc?
+          journals_index_wrapper_container
+            .with_row(classes: "work-packages-activities-tab-journals-index-component--stem-connection")
+        end
+      end
+    end
+  else
+    helpers.turbo_frame_tag("work-package-activities-tab-content-older-journals") do
+      flex_layout do |older_journals_container|
+        older_journals.each do |journal|
+          older_journals_container.with_row do
+          render(WorkPackages::ActivitiesTab::Journals::ItemComponent.new(
+                  journal:, filter:,
+                  grouped_emoji_reactions: wp_journals_grouped_emoji_reactions[journal.id]
+                ))
+          end
+        end
       end
     end
   end

app/components/work_packages/activities_tab/journals/index_component.rb

@@ -32,21 +32,24 @@ module WorkPackages
   module ActivitiesTab
     module Journals
       class IndexComponent < ApplicationComponent
+        MAX_RECENT_JOURNALS = 30
+
         include ApplicationHelper
         include OpPrimer::ComponentHelpers
         include OpTurbo::Streamable
         include WorkPackages::ActivitiesTab::SharedHelpers
 
-        def initialize(work_package:, filter: :all)
+        def initialize(work_package:, filter: :all, deferred: false)
           super
 
           @work_package = work_package
           @filter = filter
+          @deferred = deferred
         end
 
         private
 
-        attr_reader :work_package, :filter
+        attr_reader :work_package, :filter, :deferred
 
         def insert_target_modified?
           true
@@ -68,6 +71,24 @@ def journals
             .with_sequence_version
         end
 
+        def recent_journals
+          if journal_sorting_desc?
+            journals.first(MAX_RECENT_JOURNALS)
+          else
+            journals.last(MAX_RECENT_JOURNALS)
+          end
+        end
+
+        def older_journals
+          if journal_sorting_desc?
+            journals.offset(MAX_RECENT_JOURNALS)
+          else
+            total = journals.count
+            limit = [total - MAX_RECENT_JOURNALS, 0].max
+            journals.limit(limit)
+          end
+        end
+
         def journal_with_notes
           journals.where.not(notes: "")
         end

app/components/work_packages/activities_tab/journals/item_component/details.html.erb

@@ -20,17 +20,12 @@
         end
       else
         if journal.details.any?
-          if journal.notes.present?
-            render_details(details_container)
-          else
-            render_details_header(details_container)
-            render_details(details_container)
-          end
-        elsif journal.notes.present?
+          render_details_header(details_container) unless journal.notes.present?
           render_details(details_container)
-        else
-          # empty row to render the flex layout with its minimal height
+        elsif !journal.notes.present?
           render_empty_line(details_container)
+        else
+          render_details(details_container)
         end
       end
     end

app/controllers/work_packages/activities_tab_controller.rb

@@ -43,7 +43,8 @@ def index
       WorkPackages::ActivitiesTab::IndexComponent.new(
         work_package: @work_package,
         filter: @filter,
-        last_server_timestamp: get_current_server_timestamp
+        last_server_timestamp: get_current_server_timestamp,
+        deferred: params[:deferred] == "true"
       ),
       layout: false
     )

frontend/src/stimulus/controllers/dynamic/work-packages/activities-tab/index.controller.ts

@@ -355,15 +355,22 @@ export default class IndexController extends Controller {
     }
   }
 
-  private scrollToActivity(activityId:string) {
+  private tryScroll(activityId:string, attempts:number, maxAttempts:number) {
     const scrollableContainer = this.getScrollableContainer();
     const activityElement = document.getElementById(`activity-anchor-${activityId}`);
 
     if (activityElement && scrollableContainer) {
-      scrollableContainer.scrollTop = activityElement.offsetTop-70;
+      scrollableContainer.scrollTop = activityElement.offsetTop - 70;
+    } else if (attempts < maxAttempts) {
+      setTimeout(() => this.tryScroll(activityId, attempts + 1, maxAttempts), 1000);
     }
   }
 
+  private scrollToActivity(activityId:string) {
+    const maxAttempts = 20; // wait max 20 seconds for the activity to be rendered
+    this.tryScroll(activityId, 0, maxAttempts);
+  }
+
   private scrollToBottom() {
     const scrollableContainer = this.getScrollableContainer();
     if (scrollableContainer) {