Cutlery/invoiceninja
1
0
Fork 0
mirror of https://github.com/invoiceninja/invoiceninja.git synced 2025-07-09 03:14:30 -04:00
Code Issues Packages Projects Releases Wiki Activity

Improve spinners between loads

Browse Source
This commit is contained in:
David Bomba 2024-07-02 12:35:28 +10:00
parent 4a3f8278ea
commit e1be33314e
2 changed files with 19 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/Livewire/Flow2/PaymentMethod.php
View File

@ -52,8 +52,10 @@ class PaymentMethod extends Component
if(count($this->methods) == 1) { 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->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);
} }
else {
$this->isLoading=false; $this->isLoading = false;
$this->dispatch('loadingCompleted');
}
} }
@ -61,9 +63,7 @@ class PaymentMethod extends Component
public function render() public function render()
{ {
//If there is only one payment method, skip display and push straight to the form!! //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]); return render('components.livewire.payment_method-flow2', ['methods' => $this->methods, 'amount' => $this->invoice->balance]);
} }
} }

24
resources/views/portal/ninja2020/components/livewire/payment_method-flow2.blade.php
View File

@ -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"> <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"> <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) @foreach($methods as $index => $method)
<button <button
class="button button-primary bg-primary payment-method flex items-center justify-center relative py-4" 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 }} })"> @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"> <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> <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> <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> </svg>
<span>{{ $method['label'] }}</span> <span>{{ $method['label'] }}</span>
</button> </button>
@endforeach @endforeach
@ -25,6 +25,10 @@
@script @script
<script> <script>
Livewire.on('loadingCompleted', () => {
isLoading = false;
});
const buttons = document.querySelectorAll('.payment-method'); const buttons = document.querySelectorAll('.payment-method');
buttons.forEach(button => { buttons.forEach(button => {