I’m working on an AngularJS project and have recently upgraded from ui-select2 to ui-select due to security concerns (XSS attacks). After this upgrade, I’m facing the following issues:

1. Loader Overlapping with Search Icon : The loader is overlapping with the search icon.
2. “No Matches Found” Message Appearing Prematurely : The “No matches found” message is displayed before the data is fully fetched.

Html

<!--<input type="hidden" class="padding-left-right-0 col-xs-2" ui-select2="IsinList" ng-model="searchIsin" data-placeholder="Select Scrip" />-->
                    <ui-select ng-model="searchIsin.Id" theme="select2" class="padding-left-right-0 col-xs-2" ng-class="{'loading': isLoading}">
                        <ui-select-match allow-clear="true" placeholder="Select Scrip">{{$select.selected.Name}}-{{$select.selected.ShortName}}</ui-select-match>
                        <ui-select-choices refresh="selectIsinList($select.search)" refresh-delay="1" repeat="item.Id as item in isinLists | filter: $select.search">
                            {{item.Name}}-{{item.ShortName}}
                        </ui-select-choices>
                        <div ui-select-no-choice class="no-match-message" ng-show="!isLoading">No matches found</div>
                    </ui-select>

css

    .no-match-message {
        color: #000000;
        padding: 0rem 0rem 0rem 0.575rem;
        background: #f4f4f4;
        border-radius: 0.125rem;
        margin: 0.45rem;
    }
    .loading .ui-select-search {
        background-color: #ffffff;
        background-image: url("https://www.xiconeditor.com/image/icons/loading.gif");
        background-size: 30px 30px;
        background-position: right; 
        background-repeat: no-repeat;  
    }

JavaScript

$scope.isLoading = false;
            $scope.selectIsinList = function (isin) {
                var iList = isin != null && angular.isDefined(isin) ? isin : "";
                $scope.isLoading = true;  // Start loading
                $.ajax({
                    url: "/CommonControls/InstrumentDropDown/GetIsin?query=" + (iList),
                    data: {
                        //query: iList,
                        format: 'json'
                    },
                    type: 'GET',
                    async: true,
                    error: function (error) {
                        log(error);
                        $scope.isLoading = false;
                        $scope.$apply();
                    },
                    success: function (data) {
                        //if (angular.isDefined(data)) {
                        //    // Use $scope.$apply to ensure AngularJS updates the scope
                        //    $scope.$apply(function () {
                        //        $scope.isinLists = data;
                        //    });
                        //}
                        if (angular.isDefined(data)) {
                            $scope.$apply(function () {
                                $scope.isinLists = data;
                                $scope.isLoading = false; // Hide loader after data is fetched
                            });
                        } else {
                            $scope.isLoading = false; // Hide loader if no data
                        }
                    }
                });
            }

Dropdown image

What I Have Tried and What I Expect

1.Loader Overlapping with Search Icon: The loader works as expected but overlaps with the search icon. I want the loader and search icon to be properly aligned without overlap.

2.Premature “No Matches Found” Message: The “No matches found” message appears before the data has been completely fetched. I want this message to only display if there are truly no matches after the data is fetched.