From da134a4f761af665537f9e396833b9aa0e6f79b5 Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Tue, 21 Nov 2023 13:07:55 +0100
Subject: [PATCH] Set fullscreen-overlay type to the spinner component

---
 resources/js_vue3/assets/app.scss        |  3 +++
 resources/js_vue3/components/Spinner.vue | 16 +++++++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/resources/js_vue3/assets/app.scss b/resources/js_vue3/assets/app.scss
index 114f506b..c53b80bc 100644
--- a/resources/js_vue3/assets/app.scss
+++ b/resources/js_vue3/assets/app.scss
@@ -1099,6 +1099,9 @@ footer.main .field.is-grouped {
         color: $light;
     }
 }
+.spinner-overlay-container {
+    background-color: none;
+}
 
 .fadeInOut-enter-active {
   animation: fadeIn 500ms
diff --git a/resources/js_vue3/components/Spinner.vue b/resources/js_vue3/components/Spinner.vue
index 009eb34f..88bf758f 100644
--- a/resources/js_vue3/components/Spinner.vue
+++ b/resources/js_vue3/components/Spinner.vue
@@ -22,6 +22,14 @@
                 <span>{{ $t(message) }}</span>
             </div>
         </div>
+        <div v-if="type == 'fullscreen-overlay'" class="spinner-overlay-container">
+            <div class="spinner-wrapper">
+                <span id="icnSpinnerFull" class="is-size-1 spinner">
+                    <FontAwesomeIcon :icon="['fas', 'spinner']" spin />
+                </span>
+                <span>{{ $t(message) }}</span>
+            </div>
+        </div>
         <FontAwesomeIcon v-else-if="type == 'raw'" :icon="['fas', 'spinner']" spin />
         <div v-else class="has-text-centered mt-6">
             <span id="icnSpinner" class="is-size-4">
@@ -32,7 +40,8 @@
 </template>
 
 <style scoped>
-.spinner-container {
+.spinner-container,
+.spinner-overlay-container {
     text-align: center;
     z-index: 100000;
     position: absolute;
@@ -44,6 +53,11 @@
     align-items: center;
     justify-content: center;
 }
+.spinner-container,
+.spinner-overlay-container {
+    top: 25%;
+    height: 50%;
+}
 .spinner {
     display: block;
 }