Merge pull request #2615 from tugcekucukoglu/loadiang-icon

Refactor #2542

src/components/autocomplete/AutoComplete.vue

@@ -14,7 +14,7 @@
                     role="searchbox" aria-autocomplete="list" :aria-controls="listId">
             </li>
         </ul>
-        <i :class="computedIconClasses" v-if="searching"></i>
+        <i :class="loadingIconClass" v-if="searching"></i>
         <Button ref="dropdownButton" type="button" icon="pi pi-chevron-down" class="p-autocomplete-dropdown" :disabled="$attrs.disabled" @click="onDropdownClick" v-if="dropdown"/>
         <Portal :appendTo="appendTo">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
@@ -575,9 +575,6 @@ export default {
         }
     },
     computed: {
-        loadingIconClass() {
-            return ['p-autocomplete-loader', 'pi-spin', this.loadingIcon];
-        },
         containerClass() {
             return ['p-autocomplete p-component p-inputwrapper', this.class, {
                 'p-autocomplete-dd': this.dropdown,
@@ -605,6 +602,9 @@ export default {
                 'p-ripple-disabled': this.$primevue.config.ripple === false
             }];
         },
+        loadingIconClass() {
+            return ['p-autocomplete-loader pi-spin', this.loadingIcon];
+        },
         inputValue() {
             if (this.modelValue) {
                 if (this.field && typeof this.modelValue === 'object') {

src/views/autocomplete/AutoCompleteDemo.vue

@@ -24,7 +24,7 @@
                 </AutoComplete>
 
                 <h5>Dropdown, Templating and Force Selection</h5>
-                <AutoComplete v-model="selectedCountry2" :suggestions="filteredCountries" @complete="searchCountry($event)" :dropdown="true" field="name" forceSelection>
+                <AutoComplete v-model="selectedCountry2" loadingIcon="pi pi-discord" :suggestions="filteredCountries" @complete="searchCountry($event)" :dropdown="true" field="name" forceSelection>
                     <template #item="slotProps">
                         <div class="country-item">
                             <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.item.code.toLowerCase()" />

src/views/autocomplete/AutoCompleteDoc.vue

@@ -268,17 +268,17 @@ export default {
                         <td>null</td>
                         <td>Style class of the overlay panel.</td>
                     </tr>
-                    <tr>
-                        <td>virtualScrollerOptions</td>
-                        <td>object</td>
-                        <td>null</td>
-                        <td>Whether to use the virtualScroller feature. The properties of <router-link to="/virtualscroller">VirtualScroller</router-link> component can be used like an object in it.</td>
-                    </tr>
                     <tr>
                         <td>loadingIcon</td>
                         <td>string</td>
                         <td>pi pi-spinner</td>
                         <td>Icon class used when loading</td>
+                    </tr>
+                    <tr>
+                        <td>virtualScrollerOptions</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Whether to use the virtualScroller feature. The properties of <router-link to="/virtualscroller">VirtualScroller</router-link> component can be used like an object in it.</td>
                     </tr>
 				</tbody>
 			</table>