Open modal before rendering the received html

This way we don't see a blank modal waiting for the content to load

app/views/admin/products_v3/_product_row.html.haml

@@ -40,4 +40,4 @@
         "data-modal-link-target-value": "product-delete-modal", "class": "delete",
         "data-modal-link-modal-dataset-value": {'data-delete-path': admin_product_destroy_path(product)}.to_json }
       = t('admin.products_page.actions.delete')
-    = link_to "Preview", admin_product_preview_path(product), {"data-turbo-stream": "",  "data-controller": "product-preview", "data-action": "click->product-preview#open" } # TODO move product-preview controller to table element ?
+    = link_to "Preview", admin_product_preview_path(product), {"data-turbo-stream": "" } 

app/views/admin/products_v3/_table.html.haml

@@ -13,7 +13,7 @@
   = hidden_field_tag :producer_id, @producer_id
   = hidden_field_tag :category_id, @category_id
 
-  %table.products{ 'data-column-preferences-target': "table" }
+  %table.products{ 'data-column-preferences-target': "table", 'data-controller': "product-preview" }
     %colgroup
       -# The `min-width` property works in Chrome but not Firefox so is considered progressive enhancement.
       %col.col-image{ width:"44px" }= # (image size + padding)

app/webpacker/controllers/product_preview_controller.js

@@ -1,7 +1,19 @@
 import { Controller } from "stimulus";
 
 export default class extends Controller {
-  open() {
+  connect() {
+    // open the modal before rendering the html to avoid opening a blank modal
+    // TODO other option is having a controller in the stream html that would dispatch the open element on connect
+    window.addEventListener("turbo:before-stream-render", this.#open.bind(this));
+  }
+
+  disconnect() {
+    window.removeEventListener("turbo:before-stream-render", this.#open.bind(this));
+  }
+
+  // private
+
+  #open() {
     // dispatch "product-preview:open" event to trigger modal->open action
     // see views/admin/product_v3/index.html.haml
     this.dispatch("open");