diff --git a/src/components/cascadeselect/CascadeSelect.d.ts b/src/components/cascadeselect/CascadeSelect.d.ts
index 29459e58e..c26ef6da5 100644
--- a/src/components/cascadeselect/CascadeSelect.d.ts
+++ b/src/components/cascadeselect/CascadeSelect.d.ts
@@ -15,6 +15,8 @@ interface CascadeSelectProps {
     ariaLabelledBy?: string;
     appendTo?: string;
     panelClass?: string;
+    loading?: boolean;
+    loadingIcon?: string;
 }
 
 declare class CascadeSelect {
diff --git a/src/components/cascadeselect/CascadeSelect.vue b/src/components/cascadeselect/CascadeSelect.vue
index a16c89221..932e77a8a 100644
--- a/src/components/cascadeselect/CascadeSelect.vue
+++ b/src/components/cascadeselect/CascadeSelect.vue
@@ -10,7 +10,7 @@
             </slot>
         </span>
         <div class="p-cascadeselect-trigger" role="button" aria-haspopup="listbox" :aria-expanded="overlayVisible">
-            <span class="p-cascadeselect-trigger-icon pi pi-chevron-down"></span>
+            <span :class="dropdownIconClass"></span>
         </div>
         <Teleport :to="appendTarget" :disabled="appendDisabled">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
@@ -60,7 +60,15 @@ export default {
             type: String,
             default: 'body'
         },
-        panelClass: null
+        panelClass: null,
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        loadingIcon: {
+            type: String,
+            default: 'pi pi-spinner pi-spin'
+        }
     },
     outsideClickListener: null,
     scrollHandler: null,
@@ -156,7 +164,7 @@ export default {
             this.focused = false;
         },
         onClick(event) {
-            if (this.disabled) {
+            if (this.disabled || this.loading) {
                 return;
             }
 
@@ -318,6 +326,9 @@ export default {
         },
         appendTarget() {
             return this.appendDisabled ? null : this.appendTo;
+        },
+        dropdownIconClass() {
+            return ['p-cascadeselect-trigger-icon', this.loading ? this.loadingIcon : 'pi pi-chevron-down'];
         }
     },
     components: {
diff --git a/src/components/dropdown/Dropdown.d.ts b/src/components/dropdown/Dropdown.d.ts
index 437f0242b..4d3bb4be0 100755
--- a/src/components/dropdown/Dropdown.d.ts
+++ b/src/components/dropdown/Dropdown.d.ts
@@ -26,6 +26,8 @@ interface DropdownProps {
     emptyFilterMessage?: string;
     emptyMessage?: string;
     panelClass?: string;
+    loading?: boolean;
+    loadingIcon?: string;
 }
 
 declare class Dropdown {
diff --git a/src/components/dropdown/Dropdown.vue b/src/components/dropdown/Dropdown.vue
index eab1af4e1..1f8ccf04c 100755
--- a/src/components/dropdown/Dropdown.vue
+++ b/src/components/dropdown/Dropdown.vue
@@ -11,7 +11,7 @@
         </span>
         <i v-if="showClear && modelValue != null" class="p-dropdown-clear-icon pi pi-times" @click="onClearClick($event)"></i>
         <div class="p-dropdown-trigger" role="button" aria-haspopup="listbox" :aria-expanded="overlayVisible">
-            <span class="p-dropdown-trigger-icon pi pi-chevron-down"></span>
+            <span :class="dropdownIconClass"></span>
         </div>
         <Teleport :to="appendTarget" :disabled="appendDisabled">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
@@ -109,7 +109,15 @@ export default {
             type: String,
             default: null
         },
-        panelClass: null
+        panelClass: null,
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        loadingIcon: {
+            type: String,
+            default: 'pi pi-spinner pi-spin'
+        }
     },
     data() {
         return {
@@ -365,7 +373,7 @@ export default {
             this.updateModel(event, null);
         },
         onClick(event) {
-            if (this.disabled) {
+            if (this.disabled || this.loading) {
                 return;
             }
 
@@ -665,6 +673,9 @@ export default {
         },
         appendTarget() {
             return this.appendDisabled ? null : this.appendTo;
+        },
+        dropdownIconClass() {
+            return ['p-dropdown-trigger-icon', this.loading ? this.loadingIcon : 'pi pi-chevron-down'];
         }
     },
     directives: {
diff --git a/src/components/multiselect/MultiSelect.d.ts b/src/components/multiselect/MultiSelect.d.ts
index 6b87abcf5..58420e1c0 100755
--- a/src/components/multiselect/MultiSelect.d.ts
+++ b/src/components/multiselect/MultiSelect.d.ts
@@ -27,6 +27,8 @@ interface MultiSelectProps {
     panelClass?: string;
     selectionLimit?: number;
     showToggleAll?: boolean;
+    loading?: boolean;
+    loadingIcon?: string;
 }
 
 declare class MultiSelect {
diff --git a/src/components/multiselect/MultiSelect.vue b/src/components/multiselect/MultiSelect.vue
index 85903f08e..606277c09 100755
--- a/src/components/multiselect/MultiSelect.vue
+++ b/src/components/multiselect/MultiSelect.vue
@@ -21,7 +21,7 @@
             </div>
         </div>
         <div class="p-multiselect-trigger">
-            <span class="p-multiselect-trigger-icon pi pi-chevron-down"></span>
+            <span :class="dropdownIconClass"></span>
         </div>
         <Teleport :to="appendTarget" :disabled="appendDisabled">
             <transition name="p-connected-overlay" @enter="onOverlayEnter" @leave="onOverlayLeave" @after-leave="onOverlayAfterLeave">
@@ -154,6 +154,14 @@ export default {
         showToggleAll: {
             type: Boolean,
             default: true
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        loadingIcon: {
+            type: String,
+            default: 'pi pi-spinner pi-spin'
         }
     },
     data() {
@@ -244,7 +252,11 @@ export default {
             this.headerCheckboxFocused = false;
         },
         onClick(event) {
-            if (!this.disabled && (!this.overlay || !this.overlay.contains(event.target)) && !DomHandler.hasClass(event.target, 'p-multiselect-close')) {
+            if (this.disabled || this.loading) {
+                return;
+            }
+
+            if ((!this.overlay || !this.overlay.contains(event.target)) && !DomHandler.hasClass(event.target, 'p-multiselect-close')) {
                 DomHandler.hasClass(event.target, 'p-multiselect-close');
                 if (this.overlayVisible)
                     this.hide();
@@ -631,6 +643,9 @@ export default {
         },
         maxSelectionLimitReached() {
             return this.selectionLimit && (this.modelValue && this.modelValue.length === this.selectionLimit);
+        },
+        dropdownIconClass() {
+            return ['p-multiselect-trigger-icon', this.loading ? this.loadingIcon : 'pi pi-chevron-down'];
         }
     },
     directives: {
diff --git a/src/views/cascadeselect/CascadeSelectDemo.vue b/src/views/cascadeselect/CascadeSelectDemo.vue
index b1eeb30ff..337f6a41d 100644
--- a/src/views/cascadeselect/CascadeSelectDemo.vue
+++ b/src/views/cascadeselect/CascadeSelectDemo.vue
@@ -26,6 +26,9 @@
                         </div>
                     </template>
                 </CascadeSelect>
+
+                <h5>Loading State</h5>
+                <CascadeSelect placeholder="Loading..." loading style="minWidth: 14rem"></CascadeSelect>
             </div>
         </div>
 
diff --git a/src/views/cascadeselect/CascadeSelectDoc.vue b/src/views/cascadeselect/CascadeSelectDoc.vue
index c606bf073..4f939c20b 100644
--- a/src/views/cascadeselect/CascadeSelectDoc.vue
+++ b/src/views/cascadeselect/CascadeSelectDoc.vue
@@ -219,6 +219,18 @@ data() {
                         <td>string</td>
                         <td>null</td>
                         <td>Style class of the overlay panel.</td>
+                    </tr>
+                    <tr>
+                        <td>loading</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether the dropdown is in loading state.</td>
+                    </tr>
+                    <tr>
+                        <td>loadingIcon</td>
+                        <td>string</td>
+                        <td>pi pi-spinner pi-spin</td>
+                        <td>Icon to display in loading state.</td>
                     </tr>
 				</tbody>
 			</table>
@@ -368,6 +380,9 @@ export default {
                 </div>
             </template>
         </CascadeSelect>
+
+        <h5>Loading State</h5>
+        <CascadeSelect placeholder="Loading..." loading style="minWidth: 14rem"></CascadeSelect>
     </div>
 </template>
 
@@ -487,6 +502,9 @@ img {
                 </div>
             </template>
         </CascadeSelect>
+
+        <h5>Loading State</h5>
+        <CascadeSelect placeholder="Loading..." loading style="minWidth: 14rem"></CascadeSelect>
     </div>
 </template>
 
diff --git a/src/views/dropdown/DropdownDemo.vue b/src/views/dropdown/DropdownDemo.vue
index dcc53eb0f..b63e97daa 100755
--- a/src/views/dropdown/DropdownDemo.vue
+++ b/src/views/dropdown/DropdownDemo.vue
@@ -44,6 +44,9 @@
                         </div>
                     </template>
                 </Dropdown>
+
+                <h5>Loading State</h5>
+                <Dropdown placeholder="Loading..." loading></Dropdown>
             </div>
         </div>
 
diff --git a/src/views/dropdown/DropdownDoc.vue b/src/views/dropdown/DropdownDoc.vue
index 2365d8e3e..42a671a8b 100755
--- a/src/views/dropdown/DropdownDoc.vue
+++ b/src/views/dropdown/DropdownDoc.vue
@@ -275,6 +275,18 @@ export default {
                         <td>string</td>
                         <td>null</td>
                         <td>Style class of the overlay panel.</td>
+                    </tr>
+                    <tr>
+                        <td>loading</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether the dropdown is in loading state.</td>
+                    </tr>
+                    <tr>
+                        <td>loadingIcon</td>
+                        <td>string</td>
+                        <td>pi pi-spinner pi-spin</td>
+                        <td>Icon to display in loading state.</td>
                     </tr>
 				</tbody>
 			</table>
@@ -508,6 +520,9 @@ export default {
                 </div>
             </template>
         </Dropdown>
+
+        <h5>Loading State</h5>
+        <Dropdown placeholder="Loading..." loading></Dropdown>
     </div>
 </template>
 
@@ -622,6 +637,9 @@ export default {
                 </div>
             </template>
         </Dropdown>
+
+        <h5>Loading State</h5>
+        <Dropdown placeholder="Loading..." loading></Dropdown>
     </div>
 </template>
 
diff --git a/src/views/multiselect/MultiSelectDemo.vue b/src/views/multiselect/MultiSelectDemo.vue
index 9096296c5..025f7bab2 100755
--- a/src/views/multiselect/MultiSelectDemo.vue
+++ b/src/views/multiselect/MultiSelectDemo.vue
@@ -44,6 +44,9 @@
                         </div>
                     </template>
                 </MultiSelect>
+
+                <h5>Loading State</h5>
+                <MultiSelect placeholder="Loading..." loading></MultiSelect>
             </div>
         </div>
 
diff --git a/src/views/multiselect/MultiSelectDoc.vue b/src/views/multiselect/MultiSelectDoc.vue
index 43061c32a..2d3d65bb9 100755
--- a/src/views/multiselect/MultiSelectDoc.vue
+++ b/src/views/multiselect/MultiSelectDoc.vue
@@ -289,6 +289,18 @@ export default {
                         <td>boolean</td>
                         <td>true</td>
                         <td>Whether to show the header checkbox to toggle the selection of all items at once.</td>
+                    </tr>
+                    <tr>
+                        <td>loading</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>Whether the multiselect is in loading state.</td>
+                    </tr>
+                    <tr>
+                        <td>loadingIcon</td>
+                        <td>string</td>
+                        <td>pi pi-spinner pi-spin</td>
+                        <td>Icon to display in loading state.</td>
                     </tr>
 				</tbody>
 			</table>
@@ -509,6 +521,9 @@ export default {
                 </div>
             </template>
         </MultiSelect>
+
+        <h5>Loading State</h5>
+        <MultiSelect placeholder="Loading..." loading></MultiSelect>
     </div>
 </template>
 
@@ -642,6 +657,9 @@ export default {
                 </div>
             </template>
         </MultiSelect>
+
+        <h5>Loading State</h5>
+        <MultiSelect placeholder="Loading..." loading></MultiSelect>
     </div>
 </template>