New reusable loading spinner: 3 cases needs to be checked

[jibees]

Description

From #2772 (and its PR: #6640), loading spinner is a "reusable" component. There are 3 cases that are missing. This aim of this issue is to complete these 3 missing cases, and finish the work.

Expected Behavior

In each 3 cases we must see the loading spinner.

Actual Behaviour

We cannot see the loading spinner:

Steps to Reproduce

Scenario 1: Bulk invoice printing

1. Go to /admin/orders?q[s]=completed_at+desc
2. Select orders and hit print invoices button

Scenario 2: Capturing or Shipping an order from orders page.

1. Go to /admin/orders?q[s]=completed_at+desc Press on

2. before the green check is displayed there was a spinner the button now looks like Pressing this one should have the same behavior (spinner before green check button)

Scenario 3: Use the image upload modal

1. Go to the product list page: admin/products
2. By clicking on image of a product, image upload modal opens
3. Upload a new image. During the upload, there must be a loading spinner.

Scenario 4: Load all variants for incoming or outgoing product in a order cycle edition

1. Go to /admin/order_cycles/[ORDER_CYCLE_ID]/incoming
2. Click on a product that had a lot of variants
3. Click on "Load all variants" to (not) see the spinner

Animated Gif/Screenshot

Scenario 1

Scenario 3

Severity

bug-s4: it's annoying, but you can use it

Your Environment

• Version used: last
• Browser name and version: Chrome
• Operating System and version (desktop or mobile): Desktop

[jibees]

Concerning files in app/assets/javascripts (like bulk_invoice.html.haml, image_upload.html.haml, exchange_products_panel_footer.html.haml)

Quote from @Matt-Yorkley:

Ah... the slightly weird files under assets/javascript/templates are loaded dynamically by Angular in some cases and don't really work like regular Rails views. They work via the angular-rails-templates gem. Hopefully some day that whole directory will be deleted 🙈 I'm not sure if rendering normal partials will work in those templates, so we might have to leave that for now...

context: https://github.com/openfoodfoundation/openfoodnetwork/pull/6640#issuecomment-758129824

All this files seems to lead to an unreachable svg. coopcircuits.fr: https://coopcircuits.fr/assets/spinning-circles.svg returns a 404 Not Found by nginx.

[filipefurtad0]

Hey @jibees ,

I've found another occurrence, on order cycles, in the Incoming Products and Outgoing Products tabs: