Merge branch 'develop' into feature/INSR-2206

src/iss-components/loading-modal/loading-modal.vue

@@ -2,20 +2,24 @@
     <div
         v-if="showModalContent"
         class="container-fluid modal-loader">
-        <div class="row g-2 h-100 d-flex align-items-center">
+        <div class="modal-loader-background"></div>
-            <div class="container-fluid overflow-hidden">
+        <div class="modal-loader-content">
-                <div class="row h-100">
+            <div class="modal-loader-content-container">
-                    <div class="col text-center tagbg mb-4">
+                <div class="modal-loader-spinner-container">
-                        <div
+                    <div class="modal-loader-text">
-                            class="spinner-border text-danger"
+                        Processing...
-                            role="status">
-                            <span class="visually-hidden">Loading...</span>
                     </div>
+                    <div
+                        class="modal-loader-spinner"
+                        role="status">
+                        <img
+                            src="~@/assets/img/heritage-loader-blue.gif"
+                            alt="Loading spinner" />
                     </div>
                 </div>
                 <div
                     v-if="showTextCarouselContent"
-                    class="row">
+                    class="row modal-loader-text-container">
                     <div class="col">
                         <div class="text-container slide">
                             <p
@@ -94,18 +98,68 @@ export default {
 @import "@/styles/ux-variables-svg-strings.scss";
 
 .modal-loader {
+    .modal-loader-background,
+    .modal-loader-content {
         position: fixed;
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
-    z-index: 1057;
         width: 100%;
         height: 100%;
         overflow-x: hidden;
         overflow-y: auto;
         outline: 0;
-    background: $gray-100;
+    }
+
+    .modal-loader-background {
+        z-index: 1057;
+        background: #000;
+        opacity: 0.5;
+    }
+
+    .modal-loader-content {
+        z-index: 1058;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-direction: column;
+        @include media-breakpoint-up(xs) {
+            padding-top: 5rem;
+        }
+
+        @include media-breakpoint-up(md) {
+            padding-top: 7rem;
+        }
+
+        .modal-loader-content-container {
+            min-width: 15rem; // 240px
+            min-height: 15rem; // 240px
+            font-weight: 600;
+            padding: 1rem 0;
+            display: flex;
+            align-items: flex-start;
+            justify-content: center;
+            background-color: #fff;
+            background-clip: padding-box;
+            outline: 0;
+            border: 1px solid rgba(0, 0, 0, .2);
+            border-radius: 0.375rem;
+            box-shadow: 0 .375rem 11rem rgba(0, 0, 0, .5);
+
+            .modal-loader-spinner-container {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                color: #1574a1;
+                font-weight: 600;
+
+                .modal-loader-spinner {
+                    margin-top: 0.75rem;
+                }
+            }
+        }
 
         .tagbg {
             background-image: url($svg-loading-modal-image);
@@ -117,13 +171,6 @@ export default {
             align-items: center;
         }
 
-    .spinner-border {
-        width: 6.5rem;
-        height: 6.5rem;
-        border: 0.45em solid currentColor;
-        border-right-color: transparent;
-    }
-
         .text-container {
             display: flex;
             width: 350px;
@@ -161,4 +208,6 @@ export default {
             }
         }
     }
+
+}
 </style>

src/iss-components/site-footer/site-footer.vue

@@ -49,6 +49,7 @@
 <script>
 import textLink from '@/ux-components/text-link/text-link.vue';
 import buttonMain from '@/ux-components/button-main/button-main.vue';
+import showIssLoadingModal from '@/helpers/loading-modal-helper';
 
 export default {
     name: 'site-footer',
@@ -97,6 +98,10 @@ export default {
         buttonClick() {
             // prevent keyboard input after button click
             document.onkeydown = () => false;
+
+            if ((!this.disableForwardAction && !this.isForwardActionDisabled)) {
+                showIssLoadingModal(true);
+            }
             this.$emit('forwardClicked');
         },
         linkClick() {