From 7fff72237704fe36c8f2c650734c1aaeb0b7a7f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=8Carodej?= <peterpapp@makingcg.com>
Date: Thu, 23 Jun 2022 12:25:10 +0200
Subject: [PATCH] Added spinner when pdf is loading

---
 changelog.md                                  |  1 +
 .../components/FilePreview/Media/PdfFile.vue  | 26 +++++++++++++------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/changelog.md b/changelog.md
index f8b06c0c..d9cd8441 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,6 @@
 ## Version 2.2.0.9
 #### Release date: 22. Jun 2022
+- Added spinner when pdf is loading
 - Set sandbox/live mode in PayPal key configuration setup form
 - Fixed issue when after deleting user, the related subscription wasn't deleted
 - Fixed issue when you perform composer update with private repository
diff --git a/resources/js/components/FilePreview/Media/PdfFile.vue b/resources/js/components/FilePreview/Media/PdfFile.vue
index 05ec4903..70c4a087 100644
--- a/resources/js/components/FilePreview/Media/PdfFile.vue
+++ b/resources/js/components/FilePreview/Media/PdfFile.vue
@@ -3,6 +3,12 @@
         class="absolute bottom-0 top-0 left-0 right-0 z-10 mx-auto overflow-y-auto rounded-xl md:p-5"
         :style="{ width: documentSize + '%' }"
     >
+		<div
+			v-if="isLoading"
+			class="mx-auto fixed left-0 right-0 top-1/2 translate-y-5 w-full z-10"
+		>
+			<Spinner />
+		</div>
         <pdf
             :src="pdfData"
             v-for="i in numPages"
@@ -12,39 +18,43 @@
             scale="page-width"
             id="printable-file"
             class="mx-auto mb-6 w-full overflow-hidden md:rounded-xl md:shadow-lg"
-        >
-            <template slot="loading">
-                <b>
-                    {{ $t('loading_content') }}
-                </b>
-            </template>
-        </pdf>
+			@loading="documentLoaded"
+        />
     </div>
 </template>
 
 <script>
+import Spinner from "../../UI/Others/Spinner"
 import { events } from '../../../bus'
 import pdf from 'pdfvuer'
 
 export default {
     name: 'PdfFile',
     components: {
+		Spinner,
         pdf,
     },
-    props: ['file'],
+    props: [
+		'file'
+	],
     watch: {
         file() {
             this.getPdf()
+			this.isLoading = true
         },
     },
     data() {
         return {
             pdfData: undefined,
             documentSize: 50,
+			isLoading: true,
             numPages: 0,
         }
     },
     methods: {
+		documentLoaded() {
+			this.isLoading = false
+		},
         getPdf() {
             this.pdfData = undefined
             this.numPages = 0