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

Fixes for loader re-displaying inappropriately

Browse Source
This commit is contained in:
David Bomba 2023-07-16 14:28:56 +10:00
parent 5e6b4f35ec
commit 526485bcaf
2 changed files with 11 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/Http/Livewire/PdfSlot.php
View File

@ -48,8 +48,6 @@ class PdfSlot extends Component
private $entity_type; private $entity_type;
protected $listeners = ['viewportChanged' => 'getPdf'];
public $show_cost = true; public $show_cost = true;
public $show_quantity = true; public $show_quantity = true;

19
resources/views/portal/ninja2020/components/livewire/pdf-slot.blade.php
View File

@ -1,20 +1,19 @@
<div> <div>
<div class="flex flex-col items-end mb-2"> <div class="flex flex-col items-end mb-2" x-data>
<button wire:loading.attr="disabled" wire:click="downloadPdf" class="bg-gray-100 hover:bg-gray-200 text-gray-800 font-bold px-2 rounded inline-flex"> <button wire:loading.attr="disabled" wire:click="downloadPdf" class="bg-gray-100 hover:bg-gray-200 text-gray-800 font-bold px-2 rounded inline-flex" type="button">
<span>{{ ctrans('texts.download_pdf') }}</span> <span>{{ ctrans('texts.download_pdf') }}</span>
<div wire:loading wire:target="downloadPdf"> <div wire:loading wire:target="downloadPdf">
<svg class="animate-spin h-5 w-5 text-blue" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> <svg class="animate-spin h-5 w-5 text-blue" 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>
</div> </div>
</button> </button>
</div> </div>
<div class="hidden lg:block"> <div class="hidden lg:block">
<div wire:init="getPdf()"> <div wire:init="getPdf()">
<div class="flex mt-4 place-items-center"> <div class="flex mt-4 place-items-center" id="loader" wire:ignore>
<span class="loader m-auto" id="loader"></span> <span class="loader m-auto" wire:ignore></span>
<style type="text/css"> <style type="text/css">
.loader { .loader {
width: 48px; width: 48px;
@ -48,10 +47,10 @@
75% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)} 75% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)} 100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
} }
</style> </style>
</div> </div>
<!-- <iframe id="pdf-iframe" src="{!! $pdf !!}" class="h-screen w-full border-0 mt-4"></iframe> -->
@if($pdf) @if($pdf)
<!-- <iframe id="pdf-iframe" src="{!! $pdf !!}" class="h-screen w-full border-0 mt-4"></iframe> -->
<iframe id="pdf-iframe" src="/{{ $route_entity }}/showBlob/{{ $pdf }}" class="h-screen w-full border-0 mt-4"></iframe> <iframe id="pdf-iframe" src="/{{ $route_entity }}/showBlob/{{ $pdf }}" class="h-screen w-full border-0 mt-4"></iframe>
@endif @endif
</div> </div>
@ -69,7 +68,10 @@
const iframe = document.getElementById("pdf-iframe"); const iframe = document.getElementById("pdf-iframe");
iframe.addEventListener("load", function () { iframe.addEventListener("load", function () {
const loader = document.getElementById("loader").hidden = "true"; const loader = document.getElementById("loader")
loader.classList.add("hidden");
// loader.hidden=true;
// loader.remove();
}); });
}); });
@ -94,6 +96,7 @@ function waitForElement(querySelector, timeout){
reject(); reject();
}, timeout); }, timeout);
}); });
} }
</script> </script>