defer

Author: dombesz

app/components/primer/alpha/action_menu/action_menu_element.ts

@@ -472,7 +472,7 @@ export class ActionMenuElement extends HTMLElement {
   #handleIncludeFragmentReplaced() {
     this.#firstItem?.focus()
     this.#softDisableItems()
-    this.overlay?.update()
+    // this.overlay?.update()
 
     // async items have loaded, so component is ready
     this.setAttribute('data-ready', 'true')

app/controllers/primer/view_components/action_menu_controller.rb

@@ -10,6 +10,7 @@ class ActionMenuController < ApplicationController
       def landing; end
 
       def deferred
+        sleep params[:delay].to_f if params[:delay].present?
         render "primer/view_components/action_menu/deferred"
       end
 

previews/primer/alpha/action_menu_preview/with_deferred_content_near_bottom_of_viewport.html.erb

@@ -1,7 +1,10 @@
-<%# The invoker is pinned to the bottom of the viewport so the overlay has no room to grow %>
-<%# downward once its deferred content loads, reproducing the scenario from DREAM-729. %>
+<%# The invoker is pinned near the bottom of the viewport, leaving enough room for the loading %>
+<%# spinner placeholder to fit below it but not enough for the full deferred content, reproducing %>
+<%# the scenario from DREAM-729. The `delay` param forces the fragment response to arrive after the %>
+<%# overlay has already been positioned using the placeholder's size, instead of racing the fetch %>
+<%# against the initial position calculation. %>
 <div style="position: fixed; bottom: 100px; right: 0;">
-  <%= render(Primer::Alpha::ActionMenu.new(menu_id: "deferred-bottom", src: primer_view_components.action_menu_deferred_path)) do |menu| %>
+  <%= render(Primer::Alpha::ActionMenu.new(menu_id: "deferred-bottom", src: primer_view_components.action_menu_deferred_path(delay: 0.3))) do |menu| %>
     <% menu.with_show_button { "Menu with deferred content" } %>
   <% end %>
 </div>

test/system/alpha/action_menu_test.rb

@@ -893,19 +893,12 @@ def test_deferred_loading_on_keydown
     def test_deferred_loading_overlay_positioned_within_viewport
       visit_preview(:with_deferred_content_near_bottom_of_viewport)
       click_on_invoker_button
-
+      binding.irb
       # Wait for lazy content to load
       assert_selector "action-menu ul li", text: "Copy link"
 
-      overlay_in_viewport = page.evaluate_script(<<~JS)
-        (function() {
-          var el = document.querySelector('anchored-position')
-          var rect = el.getBoundingClientRect()
-          return rect.bottom <= (window.innerHeight || document.documentElement.clientHeight)
-        })()
-      JS
-
-      assert overlay_in_viewport, "Overlay should be positioned within the viewport after deferred content loads"
+      overlay = find("anchored-position").native.node
+      assert overlay.in_viewport?, "Overlay should be positioned within the viewport after deferred content loads"
     end
 
     def test_deferred_dialog_opens