ui-select Multiple Dropdown Search Input Spinner Not Showing

I am working with an AngularJS project, where I upgraded the library from ui-select2 to ui-select. After the upgrade, I’m having issues with the search input spinner not showing for multiple select dropdowns, although it works fine for single select dropdowns.

Html

<ui-select multiple ng-if="list.edit" ng-model="list.EmployeeList" theme="select2" class="col-xs-12">
   <ui-select-match allow-clear="true" placeholder="Select People for Delivery">{{$item.Name}}-{{$item.EmployeeCode}}</ui-select-match>
    <ui-select-choices refresh="selectOptionsEmployeeWithoutRelievingPromise($select.search)" refresh-delay="500" repeat="item in EmployeesWithoutRelieving">
       {{item.Name}}
    </ui-select-choices>
   <div ui-select-no-choice class="no-match-message">No matches found</div>
</ui-select>

Css

/*Custom css gif loader for search input*/
.ui_select_input_spinner .ui-select-search{
    background-image: url('../../areas/commoncontrols/scripts/fileviwer/content/css/select2-spinner.gif');
    background: url('../../areas/commoncontrols/scripts/fileviwer/content/css/select2-spinner.gif') no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee));
    background: url('../../areas/commoncontrols/scripts/fileviwer/content/css/select2-spinner.gif') no-repeat 100%, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%);
    background: url('../../areas/commoncontrols/scripts/fileviwer/content/css/select2-spinner.gif') no-repeat 100%, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%);
    background: url('../../areas/commoncontrols/scripts/fileviwer/content/css/select2-spinner.gif') no-repeat 100%, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0;
}
/* Hide the search icon when loading */
.ui_select_input_spinner div.search-container.select2-search::after {
    visibility: hidden; /* or display: none; */
}

Problem Description

The above CSS works fine for a single dropdown, but it doesn’t work for the multiple dropdown. I suspect the issue lies in how the class is applied, and I need to generalize it so that it works for both single and multiple select dropdowns.

JavaScript (select.js)

ctrl.refresh = function (refreshAttr) {
    if (refreshAttr !== undefined) {
        // Debounce
        if (_refreshDelayPromise) {
            $timeout.cancel(_refreshDelayPromise);
        }
        // Automatically add the 'loading' class
        $element.addClass('ui_select_input_spinner'); // Add the 'loading' class
        _refreshDelayPromise = $timeout(function () {
            if ($scope.$select.search.length >= $scope.$select.minimumInputLength) {
                var refreshPromise = $scope.$eval(refreshAttr);
                if (refreshPromise && angular.isFunction(refreshPromise.then) && !ctrl.refreshing) {
                    ctrl.refreshing = true;
                    refreshPromise.finally(function () {
                        ctrl.refreshing = false;
                        $element.removeClass('ui_select_input_spinner'); // Remove the 'loading' class when refresh completes
                    });
                } else {
                    $element.removeClass('ui_select_input_spinner'); // Remove the class if there's no promise
                }
            } else {
                $element.removeClass('ui_select_input_spinner'); // Remove the class if input length is not met
            }
        }, ctrl.refreshDelay);
    }
};

Expected Outcome

I expect the spinner to show while fetching the results in both single and multiple ui-select dropdowns. Currently, the spinner only appears for single dropdowns, but not for multiple dropdowns.