show loader on the minicart

Question

When I click on the + - sign on the minicart, it increases or decrease the quantity correctly.

I just want add loader, When customer click on the + or - sign it shows the loader then update the quantity

My template app/design/frontend/vednor/themes/Magento_Checkout/web/template/minicart/item/default.html

<li class="item product-item cart-item d-flex align-items-center" data-role="product-item">
    <!-- ko if: product_has_url -->
    <div class="product-item-photo product-img">
        <a data-bind="attr: {href: product_url, title: product_name}" tabindex="-1" class="product-item-photo">
            <!-- ko foreach: $parent.getRegion('itemImage') -->
            <!-- ko template: {name: getTemplate(), data: item.product_image} --><!-- /ko -->
            <!-- /ko -->
        </a>
    </div>
    <!-- /ko -->
    <!-- ko ifnot: product_has_url -->
    <div class="product-item-photo product-img">
        <!-- ko foreach: $parent.getRegion('itemImage') -->
        <!-- ko template: {name: getTemplate(), data: item.product_image} --><!-- /ko -->
        <!-- /ko -->
    </div>
    <!-- /ko -->

    <div class="product-item-details product-text">
        <!-- ko if: product_has_url -->
        <a class="product-description" data-bind="attr: {href: product_url}, text: product_name"></a>
        <!-- /ko -->
        <!-- ko ifnot: product_has_url -->
        <!-- ko text: product_name --><!-- /ko -->
        <!-- /ko -->

        <!-- Display Total Waste Cost for Quantity -->
        <div data-bind="text: 'Total Waste Cost: ' + (waste_cost ? (parseFloat(waste_cost) * qty).toFixed(2) : 'N/A')"></div>

        <!-- Quantity Controls -->
        <div class="details-qty qty d-flex align-items-center product-quantity-box">
            <button class="decrease-qty" data-bind="click: function() { $parent.decreaseQty(item_id) }, enable: qty > 1">-</button>
            <input data-bind="attr: {
                           id: 'cart-item-'+item_id+'-qty',
                           'data-cart-item': item_id,
                           'data-item-qty': qty,
                           'data-cart-item-id': product_sku
                           }, value: qty"
                   type="number"
                   size="4"
                   class="item-qty cart-item-qty" style="width: 35px; text-align: center" readonly/>
            <button class="increase-qty" data-bind="click: function() { $parent.increaseQty(item_id) }">+</button>

  
        </div>

        <!-- ko if: options.length -->
        <div class="options product-description" data-mage-init='{"collapsible":{"openedState": "active", "saveState": false}}'>
            <span data-role="title" class="toggle"><!-- ko i18n: 'See Details' --><!-- /ko --></span>
            <div data-role="content" class="content product-description">
                <strong class="subtitle"><!-- ko i18n: 'Options Details' --><!-- /ko --></strong>
                <dl class="options list">
                    <!-- ko foreach: { data: options, as: 'option' } -->
                    <dt class="label"><!-- ko text: option.label --><!-- /ko --></dt>
                    <dd class="values">
                        <!-- ko if: Array.isArray(option.value) -->
                        <span data-bind="html: option.value.join('<br>')"></span>
                        <!-- /ko -->
                        <!-- ko ifnot: Array.isArray(option.value) -->
                        <span data-bind="html: option.value"></span>
                        <!-- /ko -->
                    </dd>
                    <!-- /ko -->
                </dl>
            </div>
        </div>
        <!-- /ko -->

        <div class="product-item-pricing product-price d-flex justify-content-between">
            <!-- ko if: canApplyMsrp -->
            <div class="details-map product-price">
                <span class="label" data-bind="i18n: 'Price'"></span>
                <span class="value" data-bind="i18n: 'See price before order confirmation.'"></span>
            </div>
            <!-- /ko -->
            <!-- ko ifnot: canApplyMsrp -->
            <!-- ko foreach: $parent.getRegion('priceSidebar') -->
            <!-- ko template: {name: getTemplate(), data: item.product_price, as: 'price'} --><!-- /ko -->
            <!-- /ko -->
            <!-- /ko -->
        </div>

        <div class="actions">
            <!-- ko if: is_visible_in_site_visibility -->
            <div class="primary">
                <a data-bind="attr: {href: configure_url, title: $t('Edit item')}" class="action edit">
                    <span data-bind="i18n: 'Edit'"></span>
                </a>
            </div>
            <!-- /ko -->
            <div class="secondary">
                <a href="#" data-bind="attr: {'data-cart-item': item_id, title: $t('Remove item')}" class="action delete">
                    <span data-bind="i18n: 'Remove'"></span>
                </a>
            </div>
        </div>
    </div>
</li>
<div class="message notice" data-bind="visible: $data.message">
    <div data-bind="text: $data.message"></div>
</div>

Answer 1

@Rana Zain

Hey,

In your javascript file , you can use $("body").trigger("processStart") and $("body").trigger("processStop") in your increment and decrement function.

Thank You!