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: