Font Awesome loading icon not showing in WooCommerce admin list

Question

Updating inventory quantity in WooCommerce managed product list based on custom input field, this is my previous answer to one of my questions.

The following code adds a custom button to the quantity column. When the button is pressed, the quantity will be updated and the current quantity will be refreshed. Tried adding a loading spinner after pressing the button but it doesn't load.

This is the code in the functions.php file:

// Add input fields to stock status column// change default stock
add_filter('woocommerce_admin_stock_html', 'filter_woocommerce_admin_stock_html', 10, 2 );
function filter_woocommerce_admin_stock_html($stock_html, $product) {
    if ( $product->managing_stock() ) {
        return '';
    }
    return $stock_html;
}

// Add input fields to stock status column
add_action( 'manage_product_posts_custom_column', 'product_stock_quantity_column_content', 10, 2 );
function product_stock_quantity_column_content( $column, $product_id ) {
    if ( $column === 'is_in_stock' ) {
        global $product;

        if ( $product->managing_stock() ) {
            $stock_html = sprintf('<div style="margin-bottom:5px;width:120px">
            <input type="text" name="stock_qty-%d" value="%d" style="width:35px; padding: 5px; text-align: center; height: 30px;" inputmode="numeric">
            <button type="button" class="update-qty button button-primary" data-id="%d">&#8635;</button>
            </div><div class="stock-%d">', 
            $product_id, $product->get_stock_quantity('edit'), $product_id, $product_id, $product_id);

            if ( $product->is_on_backorder() ) {
                $stock_html .= '<mark class="onbackorder">' . __( 'On backorder', 'woocommerce' ) . '</mark>';
            } elseif ( $product->is_in_stock() ) {
                $stock_html .= '<mark class="instock">' . __( 'In stock', 'woocommerce' ) . '</mark>';
            } else {
                $stock_html .= '<mark class="outofstock">' . __( 'Out of stock', 'woocommerce' ) . '</mark>';
            }
            echo $stock_html .' (' . wc_stock_amount( $product->get_stock_quantity() ) . ')</div>';
        }
    }     
}

// WP Admin Ajax receiver
add_action('wp_ajax_update_stock_quantity', 'update_stock_quantity_ajax');
function update_stock_quantity_ajax() {
    if (isset($_POST['product_id']) && isset($_POST['update_qty'])) {
        $product = wc_get_product(intval($_POST['product_id']));

        $product->set_stock_quantity(intval($_POST['update_qty']));
        $id = $product->save();

        if ( $product->is_on_backorder() ) {
            $stock_html = '<mark class="onbackorder">' . __( 'On backorder', 'woocommerce' ) . '</mark>';
        } elseif ( $product->is_in_stock() ) {
            $stock_html = '<mark class="instock">' . __( 'In stock', 'woocommerce' ) . '</mark>';
        } else {
            $stock_html = '<mark class="outofstock">' . __( 'Out of stock', 'woocommerce' ) . '</mark>';
        }
        $stock_html .= ' (' . wc_stock_amount( $product->get_stock_quantity() ) . ')';

        echo $stock_html;
    }
    wp_die(); // Exit silently (Always at the end to avoid an Error 500)
}

// jQuery Ajax
add_action('admin_footer', 'update_stock_quantity_js');
function update_stock_quantity_js() {
    global $pagenow, $typenow;

    if( 'edit.php' === $pagenow && 'product' === $typenow ) :
    ?>
    <script id="update-stock-qty" type="text/javascript">
        jQuery(function($) {
            $('body').on('click', 'button.update-qty', function() {
                const productID = $(this).data('id'),
                      updateQty = $('input[name=stock_qty-'+productID+']').val();
            
                // Add spinner icon to the button
                $(this).html('<i class="fa-solid fa-spinner fa-spin"></i>');
            
                $.ajax({
                    url:  '<?php echo admin_url( 'admin-ajax.php' ); ?>',
                    type: 'POST',
                    data: {
                        'action':     'update_stock_quantity',
                        'product_id': productID,
                        'update_qty': updateQty,
                    },
                    success: function(response) {
                        if ( response ) {
                            const message = '<div class="message-'+productID+'">Success !</div>';
                            $('.stock-'+productID).html(response).after();
                            $('.stock-'+productID).prepend(message);
                            setTimeout(function(){
                                $('.message-'+productID).remove();
                            }, 5000);
                        }
                    },
                    error: function(error) {
                        if ( error ) {
                            const message = '<div class="message-'+productID+'">Error !</div>';
                            $('.stock-'+productID).prepend(message);
                            setTimeout(function(){
                                $('.message-'+productID).remove();
                            }, 5000);
                        }
                    },
                    complete: function() {
                        // Restore the button text (remove spinner icon)
                        $('button.update-qty').html('&#8635;');
                    }
                });
            });
        });
    </script>
    <?php
    endif;
}

function enqueue_font_awesome() {
    wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.0-beta3/css/all.min.css');
}
add_action('admin_enqueue_scripts', 'enqueue_font_awesome');

The font Awesome library has also been imported. Now when the button is pressed, the button will disappear and an empty box will appear.

Answer 1

You are not using the correct CSS library link, and you should also limit the functionality to only manage product lists. Replace the last function with:

add_action('admin_enqueue_scripts', 'enqueue_font_awesome_free6');
function enqueue_font_awesome_free6() {
    global $pagenow, $typenow;
    if ( $pagenow === 'edit.php' && $typenow === 'product' ) {
        wp_enqueue_style('font-awesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css');
    }
}

Tested and valid.

Here are the correct links to all CDNs for Font Awesome.