Added spinner when pdf is loading

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

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"
-        >
+			@loading="documentLoaded"
-            <template slot="loading">
+        />
-                <b>
-                    {{ $t('loading_content') }}
-                </b>
-            </template>
-        </pdf>
     </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