Mirrors/invoiceninja
1
0
Fork 0
mirror of https://github.com/invoiceninja/invoiceninja.git synced 2024-11-10 13:12:50 +01:00
Code Issues Releases Activity

Updates for loader in client portal

Browse Source
This commit is contained in:
David Bomba 2023-07-16 13:12:45 +10:00
parent c4a205ff0f
commit 5e6b4f35ec
1 changed files with 41 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -13,12 +13,8 @@
</div> </div>
<div class="hidden lg:block"> <div class="hidden lg:block">
<div wire:init="getPdf()"> <div wire:init="getPdf()">
@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>
@else
<div class="flex mt-4 place-items-center"> <div class="flex mt-4 place-items-center">
<span class="loader m-auto"></span> <span class="loader m-auto" id="loader"></span>
<style type="text/css"> <style type="text/css">
.loader { .loader {
width: 48px; width: 48px;
@ -54,6 +50,9 @@
} }
</style> </style>
</div> </div>
<!-- <iframe id="pdf-iframe" src="{!! $pdf !!}" class="h-screen w-full border-0 mt-4"></iframe> -->
@if($pdf)
<iframe id="pdf-iframe" src="/{{ $route_entity }}/showBlob/{{ $pdf }}" class="h-screen w-full border-0 mt-4"></iframe>
@endif @endif
</div> </div>
</div> </div>
@ -62,3 +61,39 @@
@include('portal.ninja2020.components.html-viewer') @include('portal.ninja2020.components.html-viewer')
</div> </div>
</div> </div>
<script type="text/javascript">
waitForElement("#pdf-iframe", 0).then(function(){
const iframe = document.getElementById("pdf-iframe");
iframe.addEventListener("load", function () {
const loader = document.getElementById("loader").hidden = "true";
});
});
function waitForElement(querySelector, timeout){
return new Promise((resolve, reject)=>{
var timer = false;
if(document.querySelectorAll(querySelector).length) return resolve();
const observer = new MutationObserver(()=>{
if(document.querySelectorAll(querySelector).length){
observer.disconnect();
if(timer !== false) clearTimeout(timer);
return resolve();
}
});
observer.observe(document.body, {
childList: true,
subtree: true
});
if(timeout) timer = setTimeout(()=>{
observer.disconnect();
reject();
}, timeout);
});
}
</script>