From 5d8c5b44f51e4376163bb7b66b57bc50b29a9774 Mon Sep 17 00:00:00 2001
From: scottkiener-at-safelite <scott.kiener@safelite.com>
Date: Wed, 24 Jun 2026 10:42:36 -0400
Subject: [PATCH 1/7] CASH-2880 | Add loader to date-picker for scheduling

---
 .../scheduling/date-picker/date-picker.vue    | 37 +++++++++++++++++--
 1 file changed, 34 insertions(+), 3 deletions(-)

diff --git a/src/layouts/scheduling/date-picker/date-picker.vue b/src/layouts/scheduling/date-picker/date-picker.vue
index 3ade2058e..a7f78cc2c 100644
--- a/src/layouts/scheduling/date-picker/date-picker.vue
+++ b/src/layouts/scheduling/date-picker/date-picker.vue
@@ -10,16 +10,21 @@
                 class="date-picker__nav-icon date-picker__nav-icon--flipped"
                 alt="" />
         </button>
-        <div class="date-picker__track d-flex flex-grow-1">
+        <div
+            class="date-picker__track d-flex flex-grow-1"
+            :class="{ 'date-picker__track--loading': isLoadingDates }"
+            :style="isLoadingDates ? { '--card-count': windowSize } : null">
             <button
-                v-for="date in visibleDates"
+                v-for="(date, index) in visibleDates"
                 :key="date.value"
                 class="date-picker__day-card d-flex flex-column align-items-center justify-content-center"
                 :class="{
                     'date-picker__day-card--selected': isSelected(date.value),
                     'date-picker__day-card--disabled': !date.isAvailable,
+                    'date-picker__day-card--loading': isLoadingDates,
                 }"
-                :disabled="!date.isAvailable"
+                :style="isLoadingDates ? { '--card-index': index } : null"
+                :disabled="!date.isAvailable || isLoadingDates"
                 :aria-pressed="isSelected(date.value)"
                 :aria-label="`${date.dayAbbr} ${date.monthAbbr} ${date.day}`"
                 @click="selectDate(date)">
@@ -308,6 +313,23 @@ export default {
                 color: $gray-300;
             }
         }
+
+        &--loading,
+        &--loading.date-picker__day-card--selected,
+        &--loading.date-picker__day-card--disabled {
+            border-color: $gray-200;
+            cursor: default;
+            background-color: $gray-200;
+            background-image: linear-gradient(90deg, $gray-200 25%, $gray-100 50%, $gray-200 75%);
+            background-repeat: no-repeat;
+            background-size: calc(var(--card-count) * 200%) 100%;
+            animation: date-picker-shimmer 1.5s ease-in-out infinite;
+
+            .date-picker__day-abbr,
+            .date-picker__day-date {
+                visibility: hidden;
+            }
+        }
     }
 
     &__day-abbr,
@@ -336,4 +358,13 @@ export default {
         }
     }
 }
+
+@keyframes date-picker-shimmer {
+    0% {
+        background-position-x: calc(var(--card-index) / (var(--card-count) - 1) * 100% + 100%);
+    }
+    100% {
+        background-position-x: calc(var(--card-index) / (var(--card-count) - 1) * 100% - 100%);
+    }
+}
 </style>

From d9b8c0906eae40c1800917a98c97c55d4e3299f3 Mon Sep 17 00:00:00 2001
From: scottkiener-at-safelite <scott.kiener@safelite.com>
Date: Wed, 24 Jun 2026 15:52:11 -0400
Subject: [PATCH 2/7] CASH-2880 | Make the loader show upon page load & Add
 loader to datepick

Reduce time that the spinner shows upon page load
Add a loading animation to date-picker
---
 .../scheduling/date-picker/date-picker.vue    | 53 ++++++----
 src/layouts/scheduling/scheduling.vue         | 97 +++++++++++--------
 2 files changed, 91 insertions(+), 59 deletions(-)

diff --git a/src/layouts/scheduling/date-picker/date-picker.vue b/src/layouts/scheduling/date-picker/date-picker.vue
index a7f78cc2c..39ecbded1 100644
--- a/src/layouts/scheduling/date-picker/date-picker.vue
+++ b/src/layouts/scheduling/date-picker/date-picker.vue
@@ -14,23 +14,39 @@
             class="date-picker__track d-flex flex-grow-1"
             :class="{ 'date-picker__track--loading': isLoadingDates }"
             :style="isLoadingDates ? { '--card-count': windowSize } : null">
-            <button
-                v-for="(date, index) in visibleDates"
-                :key="date.value"
-                class="date-picker__day-card d-flex flex-column align-items-center justify-content-center"
-                :class="{
-                    'date-picker__day-card--selected': isSelected(date.value),
-                    'date-picker__day-card--disabled': !date.isAvailable,
-                    'date-picker__day-card--loading': isLoadingDates,
-                }"
-                :style="isLoadingDates ? { '--card-index': index } : null"
-                :disabled="!date.isAvailable || isLoadingDates"
-                :aria-pressed="isSelected(date.value)"
-                :aria-label="`${date.dayAbbr} ${date.monthAbbr} ${date.day}`"
-                @click="selectDate(date)">
-                <span class="date-picker__day-abbr">{{ date.dayAbbr }}</span>
-                <span class="date-picker__day-date">{{ date.monthAbbr }} {{ date.day }}</span>
-            </button>
+            <template v-if="showLoadingPlaceholders">
+                <div
+                    v-for="index in windowSize"
+                    :key="index"
+                    class="date-picker__day-card date-picker__day-card--loading d-flex flex-column align-items-center justify-content-center"
+                    :style="{ '--card-index': index - 1 }"
+                    aria-hidden="true">
+                    <!-- Placeholder text is intentionally non-empty so the spans occupy the
+                         same height as real content. The --loading CSS hides them via
+                         visibility:hidden, so they are never visible to users. -->
+                    <span class="date-picker__day-abbr">MON</span>
+                    <span class="date-picker__day-date">Jan 00</span>
+                </div>
+            </template>
+            <template v-else>
+                <button
+                    v-for="(date, index) in visibleDates"
+                    :key="date.value"
+                    class="date-picker__day-card d-flex flex-column align-items-center justify-content-center"
+                    :class="{
+                        'date-picker__day-card--selected': isSelected(date.value),
+                        'date-picker__day-card--disabled': !date.isAvailable,
+                        'date-picker__day-card--loading': isLoadingDates,
+                    }"
+                    :style="isLoadingDates ? { '--card-index': index } : null"
+                    :disabled="!date.isAvailable || isLoadingDates"
+                    :aria-pressed="isSelected(date.value)"
+                    :aria-label="`${date.dayAbbr} ${date.monthAbbr} ${date.day}`"
+                    @click="selectDate(date)">
+                    <span class="date-picker__day-abbr">{{ date.dayAbbr }}</span>
+                    <span class="date-picker__day-date">{{ date.monthAbbr }} {{ date.day }}</span>
+                </button>
+            </template>
         </div>
         <button
             class="date-picker__nav-btn"
@@ -115,6 +131,9 @@ export default {
         };
     },
     computed: {
+        showLoadingPlaceholders() {
+            return this.isLoadingDates && !this.allDates.length;
+        },
         allDates() {
             if (this.availableDates === null) return [];
 
diff --git a/src/layouts/scheduling/scheduling.vue b/src/layouts/scheduling/scheduling.vue
index 9b63dd88e..41512f411 100644
--- a/src/layouts/scheduling/scheduling.vue
+++ b/src/layouts/scheduling/scheduling.vue
@@ -34,7 +34,7 @@
                         @zip-code-clicked="onMobileZipCodeClicked" />
                     <inshopSchedulingCard
                         v-for="{ provider } in inShopProvidersAndTimeslots"
-                        v-show="selectedDate"
+                        v-show="showInshopSchedulingCards"
                         :key="provider.providerNumber"
                         class="mt-4"
                         v-model="selectedScheduling"
@@ -138,17 +138,6 @@ export default {
     async beforeRouteEnter(to, from, next) {
         const serviceZipCode = store.getters.order.serviceLocation.zipCode;
 
-        const shopProviderData = await store.dispatch("getProviders", {
-            payload: { serviceZipCode },
-            pageNameToLog: to.name,
-        });
-        // Get the first 3 providers from the shopProviderData
-        const providers = shopProviderData?.data?.shopProviders?.slice(0, 3) ?? [];
-        const mobileProviderNumber = shopProviderData?.data?.mobileProviderNumber ?? null;
-
-        const startDate = toDateString(0);
-        const endDate = toDateString(SCHEDULE_FETCH_DAYS - 1);
-
         const promiseResultMap = [
             {
                 resultKey: "cmsContent",
@@ -160,45 +149,64 @@ export default {
                     pageNameToLog: to.name,
                 }),
             },
-            ...providers.map((provider, i) => ({
-                resultKey: `inshopTimeSlots_${i}`,
-                promise: fetchInshopTimeSlots({
-                    startDate,
-                    endDate,
-                    providerNumber: provider.providerNumber,
+            {
+                resultKey: "providers",
+                promise: store.dispatch("getProviders", {
+                    payload: { serviceZipCode },
                     pageNameToLog: to.name,
                 }),
-            })),
-            // Get the mobile time slots if a mobile provider number is available
-            ...(mobileProviderNumber
-                ? [
-                      {
-                          resultKey: "mobileTimeSlots",
-                          promise: fetchMobileTimeSlots({
-                              startDate,
-                              endDate,
-                              zipCode: serviceZipCode,
-                              pageNameToLog: to.name,
-                          }),
-                      },
-                  ]
-                : []),
+            },
         ];
         const resultMap = await settleAllPromises(promiseResultMap);
-        next((vm) => {
+        // Get the first 3 providers from the shopProviderData
+        const providers = resultMap.providers?.shopProviders?.slice(0, 3) ?? [];
+        const mobileProviderNumber = resultMap.providers?.mobileProviderNumber ?? null;
+        next(async (vm) => {
             vm.setCmsContent(resultMap.cmsContent);
-            vm.inShopProvidersAndTimeslots = providers.map((provider, i) => ({
+            vm.inShopProvidersAndTimeslots = providers.map((provider) => ({
                 provider,
-                timeSlots: resultMap[`inshopTimeSlots_${i}`] ?? null,
+                timeSlots: null,
             }));
             vm.mobileProviderAndTimeSlot = mobileProviderNumber
-                ? {
-                      providerNumber: mobileProviderNumber,
-                      timeSlots: resultMap.mobileTimeSlots ?? null,
-                  }
+                ? { providerNumber: mobileProviderNumber, timeSlots: null }
                 : null;
+            const startDate = toDateString(0);
+            const endDate = toDateString(SCHEDULE_FETCH_DAYS - 1);
+            const timeSlotsPromiseResultMap = [
+                ...providers.map((provider, i) => ({
+                    resultKey: `inshopTimeSlots_${i}`,
+                    promise: fetchInshopTimeSlots({
+                        startDate,
+                        endDate,
+                        providerNumber: provider.providerNumber,
+                        pageNameToLog: to.name,
+                    }),
+                })),
+                // Get the mobile time slots if a mobile provider number is available
+                ...(mobileProviderNumber
+                    ? [
+                          {
+                              resultKey: "mobileTimeSlots",
+                              promise: fetchMobileTimeSlots({
+                                  startDate,
+                                  endDate,
+                                  zipCode: serviceZipCode,
+                                  pageNameToLog: to.name,
+                              }),
+                          },
+                      ]
+                    : []),
+            ];
+            const timeSlotsResultMap = await settleAllPromises(timeSlotsPromiseResultMap);
+            vm.inShopProvidersAndTimeslots.forEach((entry, i) => {
+                entry.timeSlots = timeSlotsResultMap[`inshopTimeSlots_${i}`] ?? null;
+            });
+            if (vm.mobileProviderAndTimeSlot) {
+                vm.mobileProviderAndTimeSlot.timeSlots = timeSlotsResultMap.mobileTimeSlots ?? null;
+            }
             vm.datesLoaded = true;
             vm.mobilePremiumAppointmentFee = resultMap.mobilePremiumFee ?? null;
+            vm.isLoadingDates = false;
         });
     },
     watch: {
@@ -217,7 +225,12 @@ export default {
             return store.getters.order.serviceLocation.zipCode;
         },
         showMobileSchedulingCard() {
-            return Boolean(this.mobileProviderAndTimeSlot && this.selectedDate);
+            return Boolean(
+                this.mobileProviderAndTimeSlot && (this.selectedDate || this.isLoadingDates)
+            );
+        },
+        showInshopSchedulingCards() {
+            return this.selectedDate || this.isLoadingDates;
         },
         mobileTimeSlotsForSelectedDate() {
             if (!this.selectedDate) {
@@ -251,7 +264,7 @@ export default {
     data() {
         return {
             selectedDate: null,
-            isLoadingDates: false,
+            isLoadingDates: true,
             datesLoaded: false,
             datePickerStartDate: toDateString(0),
             datePickerEndDate: toDateString(SCHEDULE_FETCH_DAYS - 1),

From 0adec758dd474f6922d954df0a1c954f03237419 Mon Sep 17 00:00:00 2001
From: scottkiener-at-safelite <scott.kiener@safelite.com>
Date: Thu, 25 Jun 2026 10:14:44 -0400
Subject: [PATCH 3/7] CASH-2880 | Add in selected date change animation

---
 src/layouts/scheduling/scheduling.vue | 68 ++++++++++++++++++---------
 1 file changed, 45 insertions(+), 23 deletions(-)

diff --git a/src/layouts/scheduling/scheduling.vue b/src/layouts/scheduling/scheduling.vue
index 41512f411..b23312331 100644
--- a/src/layouts/scheduling/scheduling.vue
+++ b/src/layouts/scheduling/scheduling.vue
@@ -20,29 +20,35 @@
                         :availableDates="availableDates"
                         :isLoadingDates="isLoadingDates"
                         @requestMoreDates="handleRequestMoreDates" />
-                    <mobileSchedulingCard
-                        v-if="showMobileSchedulingCard"
-                        class="mt-4"
-                        v-model="selectedScheduling"
-                        :providerNumber="mobileProviderAndTimeSlot.providerNumber"
-                        :timeSlots="mobileTimeSlotsForSelectedDate"
-                        :premiumTimeSlotPrice="premiumTimeSlotPrice"
-                        :zipCode="serviceZipCode"
-                        :showFreeFlag="showMobileFreeFlag"
-                        :radioGroupName="schedulingRadioGroupName"
-                        :isLoading="isLoadingDates"
-                        @zip-code-clicked="onMobileZipCodeClicked" />
-                    <inshopSchedulingCard
-                        v-for="{ provider } in inShopProvidersAndTimeslots"
-                        v-show="showInshopSchedulingCards"
-                        :key="provider.providerNumber"
-                        class="mt-4"
-                        v-model="selectedScheduling"
-                        :provider="provider"
-                        :timeSlots="getInshopTimeSlotsForSelectedDate(provider.providerNumber)"
-                        :radioGroupName="schedulingRadioGroupName"
-                        :isLoading="isLoadingDates"
-                        @address-clicked="onInshopAddressClicked(provider)" />
+                    <Transition name="card-slide" mode="out-in">
+                        <div :key="selectedDate">
+                            <mobileSchedulingCard
+                                v-if="showMobileSchedulingCard"
+                                class="mt-4"
+                                v-model="selectedScheduling"
+                                :providerNumber="mobileProviderAndTimeSlot.providerNumber"
+                                :timeSlots="mobileTimeSlotsForSelectedDate"
+                                :premiumTimeSlotPrice="premiumTimeSlotPrice"
+                                :zipCode="serviceZipCode"
+                                :showFreeFlag="showMobileFreeFlag"
+                                :radioGroupName="schedulingRadioGroupName"
+                                :isLoading="isLoadingDates"
+                                @zip-code-clicked="onMobileZipCodeClicked" />
+                            <inshopSchedulingCard
+                                v-for="{ provider } in inShopProvidersAndTimeslots"
+                                v-show="showInshopSchedulingCards"
+                                :key="provider.providerNumber"
+                                class="mt-4"
+                                v-model="selectedScheduling"
+                                :provider="provider"
+                                :timeSlots="
+                                    getInshopTimeSlotsForSelectedDate(provider.providerNumber)
+                                "
+                                :radioGroupName="schedulingRadioGroupName"
+                                :isLoading="isLoadingDates"
+                                @address-clicked="onInshopAddressClicked(provider)" />
+                        </div>
+                    </Transition>
                     <navbar
                         cmsWidgetName="FunnelFooterWidget"
                         ref="navbar"
@@ -404,4 +410,20 @@ h5 {
     line-height: 32px;
     font-size: 1.25rem;
 }
+
+.card-slide-enter-active {
+    transition:
+        opacity 0.3s ease-out,
+        transform 0.3s ease-out;
+}
+.card-slide-leave-active {
+    transition: opacity 0.32s ease-in;
+}
+.card-slide-enter-from {
+    opacity: 0;
+    transform: translateX(24px);
+}
+.card-slide-leave-to {
+    opacity: 0;
+}
 </style>

From edff5b752842d84b7bca87ef50644ee7146d773c Mon Sep 17 00:00:00 2001
From: scottkiener-at-safelite <scott.kiener@safelite.com>
Date: Thu, 25 Jun 2026 11:07:18 -0400
Subject: [PATCH 4/7] Remove unused class

---
 src/layouts/scheduling/date-picker/date-picker.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/layouts/scheduling/date-picker/date-picker.vue b/src/layouts/scheduling/date-picker/date-picker.vue
index 39ecbded1..5e7caf089 100644
--- a/src/layouts/scheduling/date-picker/date-picker.vue
+++ b/src/layouts/scheduling/date-picker/date-picker.vue
@@ -12,7 +12,6 @@
         </button>
         <div
             class="date-picker__track d-flex flex-grow-1"
-            :class="{ 'date-picker__track--loading': isLoadingDates }"
             :style="isLoadingDates ? { '--card-count': windowSize } : null">
             <template v-if="showLoadingPlaceholders">
                 <div

From 2a22e8f5b33c2be31d10e4e67a742fb31e8f3c64 Mon Sep 17 00:00:00 2001
From: scottkiener-at-safelite <scott.kiener@safelite.com>
Date: Mon, 29 Jun 2026 08:22:14 -0400
Subject: [PATCH 5/7] CASH-2880 | Remove unused loader

---
 .../mobile-scheduling-card/mobile-scheduling-card.vue          | 1 +
 src/layouts/scheduling/scheduling.vue                          | 3 ---
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/layouts/scheduling/mobile-scheduling-card/mobile-scheduling-card.vue b/src/layouts/scheduling/mobile-scheduling-card/mobile-scheduling-card.vue
index 51ac7a8c5..b1e2586c1 100644
--- a/src/layouts/scheduling/mobile-scheduling-card/mobile-scheduling-card.vue
+++ b/src/layouts/scheduling/mobile-scheduling-card/mobile-scheduling-card.vue
@@ -91,6 +91,7 @@
 import { PREMIUM_TIME_SLOT_ID_FLAG, AppointmentTypeStrings } from "@/constants/schedule-constants";
 import { militaryToTwelveHourTime } from "@/layouts/schedule/helpers/schedule-helper";
 import schedulingCardLoader from "@/layouts/scheduling/scheduling-card-loader/scheduling-card-loader.vue";
+
 export default {
     name: "mobile-scheduling-card",
     emits: ["update:modelValue", "zip-code-clicked"],
diff --git a/src/layouts/scheduling/scheduling.vue b/src/layouts/scheduling/scheduling.vue
index b23312331..7fa45f056 100644
--- a/src/layouts/scheduling/scheduling.vue
+++ b/src/layouts/scheduling/scheduling.vue
@@ -1,7 +1,6 @@
 <template>
     <Form @submit="onSubmit" @invalid-submit="onInvalidSubmit" ref="theForm">
         <interceptOverlay v-if="isLoadingDates" />
-        <loadingModal notFullScreen ref="loadingModal" />
         <funnelHeader cmsWidgetName="FunnelHeaderWidget" ref="funnelHeader" />
         <div class="container page-container-grouped-styles">
             <div class="row">
@@ -68,7 +67,6 @@ import { Form } from "vee-validate";
 import datePicker from "@/layouts/scheduling/date-picker/date-picker";
 import mobileSchedulingCard from "@/layouts/scheduling/mobile-scheduling-card/mobile-scheduling-card";
 import inshopSchedulingCard from "@/layouts/scheduling/inshop-scheduling-card/inshop-scheduling-card";
-import loadingModal from "@/fmg-components/loading-modal/loading-modal.vue";
 import interceptOverlay from "@/ux-components/intercept-overlay/intercept-overlay";
 import store from "@/store";
 import { AppointmentTypeStrings, PREMIUM_FEE_PART_TYPE } from "@/constants/schedule-constants";
@@ -397,7 +395,6 @@ export default {
         datePicker,
         mobileSchedulingCard,
         inshopSchedulingCard,
-        loadingModal,
         interceptOverlay,
     },
 };

From 8e6e717a84c16878ed4c33baa2ce1161a29d9cdf Mon Sep 17 00:00:00 2001
From: scottkiener-at-safelite <scott.kiener@safelite.com>
Date: Mon, 29 Jun 2026 09:25:57 -0400
Subject: [PATCH 6/7] Fix unit test now that loading status is true on page
 load

---
 src/layouts/scheduling/scheduling.spec.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/layouts/scheduling/scheduling.spec.js b/src/layouts/scheduling/scheduling.spec.js
index a7a97a3a2..788c93281 100644
--- a/src/layouts/scheduling/scheduling.spec.js
+++ b/src/layouts/scheduling/scheduling.spec.js
@@ -63,8 +63,9 @@ function setupMocks() {
 
 describe("scheduling.vue", () => {
     describe("intercept overlay", () => {
-        test("does not render interceptOverlay when isLoadingDates is false", () => {
+        test("does not render interceptOverlay when isLoadingDates is false", async () => {
             const { wrapper } = setupMocks();
+            await wrapper.setData({ isLoadingDates: false });
             expect(wrapper.find("intercept-overlay-stub").exists()).toBe(false);
             wrapper.unmount();
         });

From 480b3ab1488bf69f3397f3f094a6b6d8b9585482 Mon Sep 17 00:00:00 2001
From: scottkiener-at-safelite <scott.kiener@safelite.com>
Date: Mon, 29 Jun 2026 09:32:03 -0400
Subject: [PATCH 7/7] Intercept keystrokes via overlay

---
 .../intercept-overlay.spec.js                 | 29 +++++++++++++++++++
 .../intercept-overlay/intercept-overlay.vue   | 14 ++++++++-
 2 files changed, 42 insertions(+), 1 deletion(-)

diff --git a/src/ux-components/intercept-overlay/intercept-overlay.spec.js b/src/ux-components/intercept-overlay/intercept-overlay.spec.js
index f3854a47a..0a282b93d 100644
--- a/src/ux-components/intercept-overlay/intercept-overlay.spec.js
+++ b/src/ux-components/intercept-overlay/intercept-overlay.spec.js
@@ -14,4 +14,33 @@ describe("intercept-overlay.vue", () => {
         expect(wrapper.text()).toBe("");
         wrapper.unmount();
     });
+
+    describe("keyboard interception", () => {
+        test("adds a capturing keydown listener on mount and removes it on unmount", () => {
+            const addSpy = jest.spyOn(document, "addEventListener");
+            const removeSpy = jest.spyOn(document, "removeEventListener");
+
+            const wrapper = shallowMount(interceptOverlay);
+            expect(addSpy).toHaveBeenCalledWith("keydown", expect.any(Function), true);
+
+            const [, handler] = addSpy.mock.calls.find(
+                ([type, , capture]) => type === "keydown" && capture === true
+            );
+
+            wrapper.unmount();
+            expect(removeSpy).toHaveBeenCalledWith("keydown", handler, true);
+
+            addSpy.mockRestore();
+            removeSpy.mockRestore();
+        });
+
+        test("blockKey prevents default and stops immediate propagation", () => {
+            const wrapper = shallowMount(interceptOverlay);
+            const event = { preventDefault: jest.fn(), stopImmediatePropagation: jest.fn() };
+            wrapper.vm.blockKey(event);
+            expect(event.preventDefault).toHaveBeenCalled();
+            expect(event.stopImmediatePropagation).toHaveBeenCalled();
+            wrapper.unmount();
+        });
+    });
 });
diff --git a/src/ux-components/intercept-overlay/intercept-overlay.vue b/src/ux-components/intercept-overlay/intercept-overlay.vue
index 1a101589a..1269ccb9d 100644
--- a/src/ux-components/intercept-overlay/intercept-overlay.vue
+++ b/src/ux-components/intercept-overlay/intercept-overlay.vue
@@ -1,10 +1,22 @@
 <template>
-    <div class="intercept-overlay" aria-hidden="true"></div>
+    <div class="intercept-overlay" aria-hidden="true" @keydown.capture="blockKey"></div>
 </template>
 
 <script>
 export default {
     name: "intercept-overlay",
+    mounted() {
+        document.addEventListener("keydown", this.blockKey, true);
+    },
+    beforeUnmount() {
+        document.removeEventListener("keydown", this.blockKey, true);
+    },
+    methods: {
+        blockKey(event) {
+            event.preventDefault();
+            event.stopImmediatePropagation();
+        },
+    },
 };
 </script>