# Quantilus_CheckoutLoader

Replaces the small spinner shown while Magento fetches shipping rates
with a full skeleton-style loading mask over the **Shipping Methods**
section of checkout (the "grey animated bars" look).

## How it works

- `Magento_Checkout/js/view/shipping` already exposes an `isLoading`
  knockout observable that becomes `true` while shipping rates are
  being estimated/fetched (e.g. after address, state, or zip changes)
  and `false` once the response comes back.
- `view/frontend/web/js/shipping-mask-mixin.js` is registered as a
  RequireJS mixin on that component (see `requirejs-config.js`) and
  subscribes to `isLoading`.
- When `isLoading` becomes `true`, the mixin injects a skeleton
  overlay (`.quantilus-shipping-skeleton`) into the
  `.checkout-shipping-method` container and hides the real content
  (`visibility: hidden`, not removed from the DOM — avoids layout
  jump).
- When `isLoading` becomes `false`, the overlay is removed and the
  real shipping-methods markup becomes visible again.
- No core template is overridden — only a JS mixin + CSS + layout XML
  that loads that CSS. This keeps the module upgrade-safe.

## Installation

1. Copy the `app/code/Quantilus/CheckoutLoader` folder into your
   Magento root at `app/code/Quantilus/CheckoutLoader`.
2. Run:
   ```bash
   bin/magento module:enable Quantilus_CheckoutLoader
   bin/magento setup:upgrade
   bin/magento setup:di:compile        # if you run compiled mode
   bin/magento setup:static-content:deploy -f   # production mode
   bin/magento cache:flush
   ```
3. Open Checkout, fill in the address form so the "Estimate shipping
   methods" AJAX call fires — the shipping methods section will show
   the skeleton mask while it loads.

## Customizing

- **Number of skeleton rows**: change `skeletonBarCount` in
  `shipping-mask-mixin.js`.
- **Colors / shimmer speed**: edit the gradient and `animation`
  duration in `view/frontend/web/css/skeleton.css`.
- **Different container**: if your theme wraps shipping methods in a
  different element, change `maskSelector` in the mixin (default:
  `.checkout-shipping-method`).
- **Apply to other checkout steps** (e.g. payment section) the same
  pattern can be reused by adding another mixin targeting
  `Magento_Checkout/js/view/payment` (or the relevant component) and
  its own `isLoading`/equivalent observable.

## Compatibility

Targets Magento Open Source / Adobe Commerce 2.4.x (PHP 7.4–8.3).
Only depends on `Magento_Checkout` and `Magento_Shipping`, both of
which are always present on a working checkout.