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>