Overlapping of the search icon with the loader

Question

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("http://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.