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

@@ -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

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,

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;
   }
 }
 

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: