From 27dd5def575325743838cd42d0cdc2eb9c5bb611 Mon Sep 17 00:00:00 2001
From: Gaetan Craig-Riou <gaetan.riou@gmail.com>
Date: Wed, 28 Aug 2024 11:47:35 +1000
Subject: [PATCH] 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 |  2 +-
 app/views/admin/products_v3/_table.html.haml       |  2 +-
 .../controllers/product_preview_controller.js      | 14 +++++++++++++-
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/app/views/admin/products_v3/_product_row.html.haml b/app/views/admin/products_v3/_product_row.html.haml
index b35fb32472..5fda009479 100644
--- a/app/views/admin/products_v3/_product_row.html.haml
+++ b/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": "" } 
diff --git a/app/views/admin/products_v3/_table.html.haml b/app/views/admin/products_v3/_table.html.haml
index b45eabab72..40a6858f34 100644
--- a/app/views/admin/products_v3/_table.html.haml
+++ b/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)
diff --git a/app/webpacker/controllers/product_preview_controller.js b/app/webpacker/controllers/product_preview_controller.js
index 496b54eaaf..cbb1551f01 100644
--- a/app/webpacker/controllers/product_preview_controller.js
+++ b/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");