From 508ebab75b239c6cd5734245fcccab41bd208c05 Mon Sep 17 00:00:00 2001
From: David Cook <david@redcliffs.net>
Date: Thu, 11 Apr 2024 15:19:28 +1000
Subject: [PATCH] Add loading spinner to turbo frame

That was surprisingly easy. Note that it's still shared with SR.

It hides a bit early though: when the web response returns, but before the DOM has been rendered. Something to optimise in the future.
---
 app/views/admin/products_v3/_content.html.haml     | 4 ++++
 app/views/admin/products_v3/index.html.haml        | 5 -----
 app/webpacker/css/admin_v3/components/spinner.scss | 9 ++++++++-
 config/locales/en.yml                              | 1 +
 4 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/app/views/admin/products_v3/_content.html.haml b/app/views/admin/products_v3/_content.html.haml
index 3f8f206cbc..40e22e4bc5 100644
--- a/app/views/admin/products_v3/_content.html.haml
+++ b/app/views/admin/products_v3/_content.html.haml
@@ -1,4 +1,8 @@
 %turbo-frame#products-content
+  .spinner-overlay{ "data-controller": "loading", "data-products-target": "loading", class: "hidden" }
+    .spinner-container
+      .spinner
+      = t('.loading')
   .container
     .sixteen.columns
       = render partial: 'admin/shared/flashes', locals: { flashes: } if defined? flashes
diff --git a/app/views/admin/products_v3/index.html.haml b/app/views/admin/products_v3/index.html.haml
index dd3034ca42..4200cd0176 100644
--- a/app/views/admin/products_v3/index.html.haml
+++ b/app/views/admin/products_v3/index.html.haml
@@ -12,11 +12,6 @@
 = render partial: 'spree/admin/shared/product_sub_menu'
 
 #products_v3_page{ "data-controller": "products", 'data-turbo': true }
-  .spinner-overlay{ "data-controller": "loading", "data-products-target": "loading", class: "hidden" }
-    .spinner-container
-      .spinner
-      = t('.loading')
-
   = render partial: "content", locals: { products: @products, pagy: @pagy, search_term: @search_term,
                                producer_options: producers, producer_id: @producer_id,
                                category_options: categories, category_id: @category_id,
diff --git a/app/webpacker/css/admin_v3/components/spinner.scss b/app/webpacker/css/admin_v3/components/spinner.scss
index fd7235ffe3..9f8d8a15e6 100644
--- a/app/webpacker/css/admin_v3/components/spinner.scss
+++ b/app/webpacker/css/admin_v3/components/spinner.scss
@@ -6,6 +6,11 @@
   min-height: 200px;
   background: rgba(255, 255, 255, 0.8);
   z-index: 2;
+
+  // Show when inside a loading Turbo Frame
+  turbo-frame[aria-busy="true"] > & {
+    display: flex;
+  }
 }
 
 .spinner-container {
@@ -28,7 +33,9 @@
     height: 56px;
     border-radius: 50%;
     border: 9px solid $teal;
-    animation: spinner-bulqg1 0.8s infinite linear alternate, spinner-oaa3wk 1.6s infinite linear;
+    animation:
+      spinner-bulqg1 0.8s infinite linear alternate,
+      spinner-oaa3wk 1.6s infinite linear;
   }
 }
 
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 662b5fe984..2777dab7ad 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -844,6 +844,7 @@ en:
       index:
         header:
           title: Bulk Edit Products
+      content:
         loading: Loading your products
       delete_modal:
         delete_product_modal: