diff --git a/resources/assets/vue/components/bookings/sections/SupplierPendingOrderPaymentSectionComponent.vue b/resources/assets/vue/components/bookings/sections/SupplierPendingOrderPaymentSectionComponent.vue
index ac26c286..7b8ccab6 100644
--- a/resources/assets/vue/components/bookings/sections/SupplierPendingOrderPaymentSectionComponent.vue
+++ b/resources/assets/vue/components/bookings/sections/SupplierPendingOrderPaymentSectionComponent.vue
@@ -9,7 +9,7 @@
                                 <div class="col">
                                     <div class="row m-b-5">
                                         <div class="col p-r-0">
-                                            <div class="btn btn-xs btn-outline-primary btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" @click="dropdownOpen = !dropdownOpen">
+                                            <div class="btn btn-xs btn-outline-primary btn-block text-left b-rad-none p-t-0 p-b-0 p-l-15 p-r-15" :class="{'disabled': sectionLoading}" @click="!sectionLoading && (dropdownOpen = !dropdownOpen)">
                                                 <div class="row">
                                                     <div class="col p-t-5 p-b-5 fs-9">
                                                         {{selectedSupplier.name}} - {{selectedSupplier.reference}}
@@ -70,11 +70,15 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, computed, onMounted } from 'vue';
 import route from '@/general/functions/router';
+import { useUiStore } from '@/stores/ui';
 import { useRequest } from '@/composables/useRequest';
 
 const { submit } = useRequest();
+const uiStore = useUiStore();
+
+const sectionLoading = computed(() => uiStore.isLoading('transactionGroupsListPaymentSection'));
 
 const suppliers = ref<any[]>([]);
 const dropdownOpen = ref(false);