diff --git a/app/Livewire/Flow2/PaymentMethod.php b/app/Livewire/Flow2/PaymentMethod.php
index 796eabb3e773..2879b6cb91c6 100644
--- a/app/Livewire/Flow2/PaymentMethod.php
+++ b/app/Livewire/Flow2/PaymentMethod.php
@@ -52,18 +52,18 @@ class PaymentMethod extends Component
         if(count($this->methods) == 1) {
             $this->dispatch('payment-method-selected', company_gateway_id: $this->methods[0]['company_gateway_id'], gateway_type_id: $this->methods[0]['gateway_type_id'], amount: $this->invoice->balance);
         }
-
-        $this->isLoading=false;
-
+        else {
+            $this->isLoading = false;
+            $this->dispatch('loadingCompleted');
+        }
+      
     }
 
 
     public function render()
     {
                 
-    
         //If there is only one payment method, skip display and push straight to the form!!
-
         return render('components.livewire.payment_method-flow2', ['methods' => $this->methods, 'amount' => $this->invoice->balance]);
     }
 }
diff --git a/resources/views/portal/ninja2020/components/livewire/payment_method-flow2.blade.php b/resources/views/portal/ninja2020/components/livewire/payment_method-flow2.blade.php
index 4d2418971b56..09afec9c68a0 100644
--- a/resources/views/portal/ninja2020/components/livewire/payment_method-flow2.blade.php
+++ b/resources/views/portal/ninja2020/components/livewire/payment_method-flow2.blade.php
@@ -1,4 +1,4 @@
-<div class="flex flex-col space-y-4 p-4" x-data="{ isLoading: true }">
+<div class="flex flex-col space-y-4 p-4" x-data="{ isLoading: @entangle('isLoading') }">
      
     <div x-show="isLoading" class="flex items-center justify-center min-h-screen">
         <svg class="animate-spin h-10 w-10 text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
@@ -9,15 +9,15 @@
     
     @foreach($methods as $index => $method)
 
-            <button 
-                class="button button-primary bg-primary payment-method flex items-center justify-center relative py-4" 
-                @click="$wire.dispatch('payment-method-selected', { company_gateway_id: {{ $method['company_gateway_id'] }}, gateway_type_id: {{ $method['gateway_type_id'] }}, amount: {{ $amount }} })">
-                <svg class="animate-spin h-5 w-5 text-white hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-                    <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-                    <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-                </svg>
-                <span>{{ $method['label'] }}</span>
-            </button>
+        <button 
+            class="button button-primary bg-primary payment-method flex items-center justify-center relative py-4" 
+            @click="$wire.dispatch('payment-method-selected', { company_gateway_id: {{ $method['company_gateway_id'] }}, gateway_type_id: {{ $method['gateway_type_id'] }}, amount: {{ $amount }} })">
+            <svg class="animate-spin h-5 w-5 text-white hidden" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+            </svg>
+            <span>{{ $method['label'] }}</span>
+        </button>
 
     @endforeach
     
@@ -25,6 +25,10 @@
     @script
     <script>
 
+        Livewire.on('loadingCompleted', () => {
+            isLoading = false;
+        });
+
         const buttons = document.querySelectorAll('.payment-method');
 
         buttons.forEach(button => {