From 526485bcaf381edafde55f85d62f1bb21cd0b295 Mon Sep 17 00:00:00 2001
From: David Bomba <turbo124@gmail.com>
Date: Sun, 16 Jul 2023 14:28:56 +1000
Subject: [PATCH] Fixes for loader re-displaying inappropriately

---
 app/Http/Livewire/PdfSlot.php                 |  2 --
 .../components/livewire/pdf-slot.blade.php    | 19 +++++++++++--------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/app/Http/Livewire/PdfSlot.php b/app/Http/Livewire/PdfSlot.php
index 52736fb4e90b..c0f29b517a00 100644
--- a/app/Http/Livewire/PdfSlot.php
+++ b/app/Http/Livewire/PdfSlot.php
@@ -48,8 +48,6 @@ class PdfSlot extends Component
 
     private $entity_type;
 
-    protected $listeners = ['viewportChanged' => 'getPdf'];
-
     public $show_cost = true;
 
     public $show_quantity = true;
diff --git a/resources/views/portal/ninja2020/components/livewire/pdf-slot.blade.php b/resources/views/portal/ninja2020/components/livewire/pdf-slot.blade.php
index bfff352725a0..895624523532 100644
--- a/resources/views/portal/ninja2020/components/livewire/pdf-slot.blade.php
+++ b/resources/views/portal/ninja2020/components/livewire/pdf-slot.blade.php
@@ -1,20 +1,19 @@
 <div>
-  <div class="flex flex-col items-end mb-2">
-    <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">
+  <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" type="button">
         <span>{{ ctrans('texts.download_pdf') }}</span>
         <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">
                 <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>
-
         </div>
     </button>
   </div>
   <div class="hidden lg:block">
     <div wire:init="getPdf()">
-        <div class="flex mt-4 place-items-center">
-            <span class="loader m-auto" id="loader"></span>
+        <div class="flex mt-4 place-items-center" id="loader" wire:ignore>
+            <span class="loader m-auto" wire:ignore></span>
             <style type="text/css">
             .loader {
             width: 48px;
@@ -48,10 +47,10 @@
               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)}
           }
-            </style>
+          </style>
         </div>
-        <!-- <iframe id="pdf-iframe" src="{!! $pdf !!}" class="h-screen w-full border-0 mt-4"></iframe> -->
         @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>
         @endif
     </div>
@@ -69,7 +68,10 @@
     const iframe = document.getElementById("pdf-iframe");
 
     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();
     }, timeout);
   });
+
 }
 
 </script>
\ No newline at end of file