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')

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

@@ -1,5 +1,8 @@
-<%# 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| %>
     <% menu.with_show_button { "Menu with deferred content" } %>