From 0236bb87c7f65de43d4331fe459be1b278f54553 Mon Sep 17 00:00:00 2001
From: Bill Richardson <william.richardson@safelite.com>
Date: Wed, 10 Dec 2025 14:49:52 -0500
Subject: [PATCH] remove button loader

---
 .../date-picker/date-picker.vue               | 162 +++++++-----------
 .../continue-modal/continue-modal.vue         |  10 --
 .../shop-list-button/shop-list-button.spec.js | 107 ------------
 .../shop-list-button/shop-list-button.vue     |  25 +--
 .../site-footer/site-footer.vue               |   4 -
 .../address-lookup/address-lookup.spec.js     |   9 +-
 src/layouts/address-lookup/address-lookup.vue |  15 +-
 .../address-vehicles/address-vehicles.spec.js |   5 +-
 .../address-vehicles/address-vehicles.vue     |   9 +-
 .../cancel-claim-modal.spec.js.snap           |   1 -
 .../cancel-claim-modal/cancel-claim-modal.vue |   9 -
 .../license-plate-lookup.spec.js              |   5 +-
 .../license-plate-lookup.vue                  |   9 +-
 .../policy-holder-details.spec.js             |   1 -
 .../policy-vehicles/policy-vehicles.spec.js   |   1 -
 .../provider-preference.vue                   |   1 -
 src/layouts/vehicle-damage/vehicle-damage.vue |   1 -
 .../vehicle-parts/vehicle-parts.spec.js       |   1 -
 src/layouts/vehicle-parts/vehicle-parts.vue   |   1 -
 src/layouts/vin-lookup/vin-lookup.vue         |   4 -
 src/layouts/welcome-page/welcome-page.spec.js |   1 -
 src/layouts/welcome-page/welcome-page.vue     |   4 -
 .../button-main/button-main.spec.js           |  24 ---
 .../modal-button-main.spec.js                 |  91 ----------
 .../modal-button-main/modal-button-main.vue   |  31 ----
 25 files changed, 82 insertions(+), 449 deletions(-)

diff --git a/src/digital-components/date-picker/date-picker.vue b/src/digital-components/date-picker/date-picker.vue
index c5567180..954451f6 100644
--- a/src/digital-components/date-picker/date-picker.vue
+++ b/src/digital-components/date-picker/date-picker.vue
@@ -2,8 +2,12 @@
     <div
         class="date-picker text-center"
         :class="[calendarViewDirection, { 'has-error': errors.length > 0 }]">
-        <fieldset id="date-picker-fieldset" ref="datePickerFieldset">
-            <legend class="sr-only">Select a day and time</legend>
+        <fieldset
+            id="date-picker-fieldset"
+            ref="datePickerFieldset">
+            <legend class="sr-only">
+                Select a day and time
+            </legend>
             <div
                 v-for="month in months"
                 :id="`${month.monthLabel}-${month.yearNum?.toString()}`"
@@ -80,12 +84,12 @@
                     </label>
                 </div>
             </div>
-            <loader
-                :class="[!isLoading ? 'date-picker-hidden' : '']"
-                loaderColor="blue"
-                loaderPosition="center" />
-            <div id="date-of-month-error" class="row form-test-error">
-                <ErrorMessage :name="customComponentId" class="small mt-1">
+            <div
+                id="date-of-month-error"
+                class="row form-test-error">
+                <ErrorMessage
+                    :name="customComponentId"
+                    class="small mt-1">
                 </ErrorMessage>
             </div>
             <button
@@ -106,7 +110,6 @@
 
 <script>
 // Supporting files
-import loader from '@/ux-components/loader/loader.vue';
 import { useMainStore } from '@/store';
 import { useField, ErrorMessage } from 'vee-validate';
 import { deepClone } from '@/helpers/object-helper';
@@ -124,7 +127,6 @@ import { selectableDaysOptions, requiredParameter } from './mixins/helpers';
 export default {
     name: 'date-picker',
     components: {
-        loader,
         ErrorMessage
     },
     props: {
@@ -206,8 +208,8 @@ export default {
     computed: {
         todayString() {
             return (
-                this.todayOverrideDateString ||
-                convertDateToDateString(new Date())
+                this.todayOverrideDateString
+                || convertDateToDateString(new Date())
             );
         },
         todayDayIndex() {
@@ -307,9 +309,7 @@ export default {
             let weekEndDate = this.getWeekEndDate(todayString);
 
             if (preSelectedDateString) {
-                const preSelectedDateMonthEnd = this.getMonthEnd(
-                    preSelectedDateString
-                );
+                const preSelectedDateMonthEnd = this.getMonthEnd(preSelectedDateString);
                 let weekIncludesPreSelectedMonthEnd = false;
                 let i = 0;
                 while (!weekIncludesPreSelectedMonthEnd) {
@@ -318,10 +318,10 @@ export default {
                         weekEndDate = this.getWeekEndDate(weekStartDate);
 
                         if (
-                            (preSelectedDateMonthEnd > weekStartDate &&
-                                preSelectedDateMonthEnd < weekEndDate) ||
-                            preSelectedDateMonthEnd === weekStartDate ||
-                            preSelectedDateMonthEnd === weekEndDate
+                            (preSelectedDateMonthEnd > weekStartDate
+                                && preSelectedDateMonthEnd < weekEndDate)
+                            || preSelectedDateMonthEnd === weekStartDate
+                            || preSelectedDateMonthEnd === weekEndDate
                         ) {
                             weekEndDate = preSelectedDateMonthEnd;
                             weekIncludesPreSelectedMonthEnd = true;
@@ -349,8 +349,8 @@ export default {
                 // If any of these weeks is split between two months, then make them 2 separate "weeks"
                 // (a week split between two months is considered 2 weeks per business requirements)
                 const hasSplitWeek = (week) =>
-                    week.weekStartDate.split('-')[1] !==
-                    week.weekEndDate.split('-')[1];
+                    week.weekStartDate.split('-')[1]
+                    !== week.weekEndDate.split('-')[1];
                 const splitWeekIndex = weeks.findIndex(hasSplitWeek);
 
                 if (splitWeekIndex > -1) {
@@ -359,9 +359,7 @@ export default {
                     let switchToWeek2 = false;
 
                     for (let j = 0; j < 7; j++) {
-                        const newDate = convertDateStringToDate(
-                            weeks[splitWeekIndex].weekStartDate
-                        );
+                        const newDate = convertDateStringToDate(weeks[splitWeekIndex].weekStartDate);
                         newDate.setDate(newDate.getDate() + j);
                         if (newDate.getDate() === 1) switchToWeek2 = true;
                         if (switchToWeek2) {
@@ -412,10 +410,8 @@ export default {
             } else {
                 todayDateString = convertDateToDateString(new Date());
             }
-            if (config.selectableDatesSetting === 'past')
-                calendarViewDirection = 'past';
-            if (config.selectableDatesSetting === 'custom')
-                calendarViewDirection = 'future';
+            if (config.selectableDatesSetting === 'past') calendarViewDirection = 'past';
+            if (config.selectableDatesSetting === 'custom') calendarViewDirection = 'future';
 
             const currentMonthEnd = this.getMonthEnd(todayDateString);
             // TODO - set up currentMonthStart if direction is PAST:
@@ -484,11 +480,9 @@ export default {
             const direction = config.calendarViewDirection;
             const monthsAfterToLoadOffset = 6;
             const monthsBeforeToLoadOffset = 36;
-            config.initialShopTimeSlotsResponse.days.forEach(
-                (selectableDate) => {
-                    this.selectableDatesData.push(selectableDate);
-                }
-            );
+            config.initialShopTimeSlotsResponse.days.forEach((selectableDate) => {
+                this.selectableDatesData.push(selectableDate);
+            });
 
             // GENERATE MONTHS AND PUSH THEM INTO ARRAY
             const months = [];
@@ -524,11 +518,10 @@ export default {
                 this.$nextTick(() => {
                     // Advance to month
                     const monthToShow = this.months.find((month) =>
-                        month.monthClass.includes('month-preselected')
-                    );
+                        month.monthClass.includes('month-preselected'));
                     if (
-                        monthToShow.monthClass.includes('month-preselected') &&
-                        monthToShow.monthClass.includes('last-available-month')
+                        monthToShow.monthClass.includes('month-preselected')
+                        && monthToShow.monthClass.includes('last-available-month')
                     ) {
                         // disable View More dates button if the preSelectedDate in the last available month
                         this.disableViewMoreDatesButton = true;
@@ -553,12 +546,10 @@ export default {
             */
 
             let monthNum =
-                convertDateStringToDate(this.todayString).getMonth() +
-                offset +
-                1;
-            let yearNum = convertDateStringToDate(
-                this.todayString
-            ).getFullYear();
+                convertDateStringToDate(this.todayString).getMonth()
+                + offset
+                + 1;
+            let yearNum = convertDateStringToDate(this.todayString).getFullYear();
             const { calendarViewDirection } = options;
             if (calendarViewDirection === 'future' && offset > 0) {
                 while (monthNum > 12) {
@@ -595,18 +586,18 @@ export default {
             let monthEndDateNum = monthEndDate.getDate();
 
             if (
-                offset === 0 &&
-                calendarViewDirection === 'past' &&
-                monthEndDateNum > this.currentWeekEndDateNum
+                offset === 0
+                && calendarViewDirection === 'past'
+                && monthEndDateNum > this.currentWeekEndDateNum
             ) {
                 monthEndDateNum = this.currentWeekEndDateNum;
             }
 
             if (options.preSelectedDate) {
                 if (
-                    monthStartDate.getFullYear() ===
-                        preSelectedDateObj.getFullYear() &&
-                    monthStartDate.getMonth() === preSelectedDateObj.getMonth()
+                    monthStartDate.getFullYear()
+                        === preSelectedDateObj.getFullYear()
+                    && monthStartDate.getMonth() === preSelectedDateObj.getMonth()
                 ) {
                     monthClass += ' month-preselected';
                 } else if (monthStartDate > preSelectedDateObj) {
@@ -619,14 +610,14 @@ export default {
             }
 
             if (
-                Math.abs(offset) === options.monthsAfterToLoadOffset &&
-                calendarViewDirection === 'future'
+                Math.abs(offset) === options.monthsAfterToLoadOffset
+                && calendarViewDirection === 'future'
             ) {
                 monthClass += ' last-available-month';
             }
             if (
-                Math.abs(offset) === options.monthsBeforeToLoadOffset &&
-                calendarViewDirection === 'past'
+                Math.abs(offset) === options.monthsBeforeToLoadOffset
+                && calendarViewDirection === 'past'
             ) {
                 // TODO - re-check this logic if past direction
                 monthClass += ' last-available-month';
@@ -635,24 +626,22 @@ export default {
             // populate dates array
             for (let i = monthStartDateNum; i <= monthEndDateNum; i++) {
                 let dayClasses = '';
-                const dateString = `${yearNum.toString()}-${`0${monthNum}`.slice(
-                    -2
-                )}-${`0${i}`.slice(-2)}`;
+                const dateString = `${yearNum.toString()}-${`0${monthNum}`.slice(-2)}-${`0${i}`.slice(-2)}`;
 
                 if (offset === 0 && i === this.todayDateNum) {
                     dayClasses += ' current-day';
                 }
                 if (
-                    offset === 0 &&
-                    i < this.todayDateNum &&
-                    calendarViewDirection === 'future'
+                    offset === 0
+                    && i < this.todayDateNum
+                    && calendarViewDirection === 'future'
                 ) {
                     dayClasses += ' unavailable-day';
                 }
                 if (
-                    offset === 0 &&
-                    i > this.todayDateNum &&
-                    calendarViewDirection === 'past'
+                    offset === 0
+                    && i > this.todayDateNum
+                    && calendarViewDirection === 'past'
                 ) {
                     dayClasses += ' unavailable-day';
                 }
@@ -660,11 +649,11 @@ export default {
                     dayClasses += ' sunday';
                 }
                 if (
-                    this.hideSomeDaysForInitialView &&
-                    convertDateStringToDate(initialViewEndDate).getMonth() +
-                        1 ===
-                        monthNum &&
-                    convertDateStringToDate(initialViewEndDate).getDate() < i
+                    this.hideSomeDaysForInitialView
+                    && convertDateStringToDate(initialViewEndDate).getMonth()
+                        + 1
+                        === monthNum
+                    && convertDateStringToDate(initialViewEndDate).getDate() < i
                 ) {
                     dayClasses += ' day-hidden';
                     isMonthThatHidesSomeDaysForInitialView = true;
@@ -674,9 +663,7 @@ export default {
                     dayClasses,
                     inputValue: dateString,
                     isSelectable:
-                        this.selectableDatesData.findIndex(
-                            (date) => date.date === dateString
-                        ) > -1
+                        this.selectableDatesData.findIndex((date) => date.date === dateString) > -1
                 };
                 dates.push(dateObject);
             }
@@ -701,26 +688,21 @@ export default {
             let monthStartDateNum = 0;
 
             if (this.hideSomeDaysForInitialView) {
-                monthToShow = this.months.find(
-                    ({ isMonthThatHidesSomeDaysForInitialView }) =>
-                        isMonthThatHidesSomeDaysForInitialView
-                );
+                monthToShow = this.months.find(({ isMonthThatHidesSomeDaysForInitialView }) =>
+                    isMonthThatHidesSomeDaysForInitialView);
                 // find the first day-hidden to become the next api call start date
                 monthStartDateNum =
                     monthToShow.dates.find(({ dayClasses }) =>
-                        dayClasses.includes('day-hidden')
-                    ).dateNum - 1;
+                        dayClasses.includes('day-hidden')).dateNum - 1;
             } else {
                 if (this.calendarViewDirection === 'future') {
                     monthToShow = this.months.find((month) =>
-                        month.monthClass.includes('month-hidden')
-                    );
+                        month.monthClass.includes('month-hidden'));
                 }
                 if (this.calendarViewDirection === 'past') {
                     // TODO: UPDATE THIS WITH CORRECT PAST LOOKING LOGIC
                     monthToShow = this.months.find((month) =>
-                        month.monthClass.includes('month-hidden')
-                    );
+                        month.monthClass.includes('month-hidden'));
                 }
             }
             if (monthToShow) {
@@ -737,8 +719,7 @@ export default {
                 );
                 this.scrollToElement(monthToShow.monthString);
 
-                if (monthToShow.monthClass.includes('last-available-month'))
-                    this.disableViewMoreDatesButton = true;
+                if (monthToShow.monthClass.includes('last-available-month')) this.disableViewMoreDatesButton = true;
             }
         },
         async updateSelectableDates(monthStart, monthEnd) {
@@ -751,9 +732,7 @@ export default {
                 );
 
             moreSelectableDates.days.forEach((selectableDate) => {
-                const index = this.selectableDatesData.findIndex(
-                    (dateObj) => dateObj.date === selectableDate.date
-                );
+                const index = this.selectableDatesData.findIndex((dateObj) => dateObj.date === selectableDate.date);
                 if (index === -1) this.selectableDatesData.push(selectableDate);
                 this.months.forEach((month) => {
                     // TODO: avoid checking all calendar dates; maybe only ones between monthStart and monthEnd as defined above?
@@ -821,19 +800,6 @@ export default {
         flex-grow: 1;
         position: relative;
     }
-    .loader {
-        height: 2rem;
-        width: 100%;
-        display: flex;
-        justify-content: center;
-        transform: unset;
-        right: unset;
-
-        &::after {
-            width: 1.5rem;
-            height: 1.5rem;
-        }
-    }
     .calendar-grid-container {
         margin: 0 auto 2rem auto;
         max-width: 414px;
diff --git a/src/iss-components/continue-modal/continue-modal.vue b/src/iss-components/continue-modal/continue-modal.vue
index 1f8314ca..15c0fbb2 100644
--- a/src/iss-components/continue-modal/continue-modal.vue
+++ b/src/iss-components/continue-modal/continue-modal.vue
@@ -19,9 +19,6 @@
                     align-items-center justify-content-center d-inline-flex mt-2 py-3 px-4 delay w-100"
                     @click="continueReferral">
                     {{ modalBodyText }}
-                    <loader
-                        v-if="isLoaderDisplayed"
-                        class="ms-2 button-loader" />
                 </button>
             </modal>
         </div>
@@ -29,20 +26,17 @@
 </template>
 
 <script>
-import loader from '@/ux-components/loader/loader.vue';
 import modal from '@/digital-components/modal/modal.vue';
 import { getISSCookie } from '@/helpers/cookie-helper.js';
 
 export default {
     name: 'continue-modal',
     components: {
-        loader,
         modal
     },
     emits: ['continue-previous-referral', 'start-new-referral'],
     data() {
         return {
-            isLoaderDisplayed: false,
             isModalOpened: false
         };
     },
@@ -69,9 +63,6 @@ export default {
         openModal() {
             this.$refs.continueModal.openModal();
         },
-        removeLoader() {
-            this.isLoaderDisplayed = false;
-        },
         setModalStatus(isOpened) {
             this.isModalOpened = isOpened;
         },
@@ -79,7 +70,6 @@ export default {
             this.$refs.continueModal.closeModal();
         },
         continueReferral() {
-            this.isLoaderDisplayed = true;
             this.$emit('continue-previous-referral');
         },
         startNewReferral() {
diff --git a/src/iss-components/shop-list-button/shop-list-button.spec.js b/src/iss-components/shop-list-button/shop-list-button.spec.js
index a1b32665..bece89c1 100644
--- a/src/iss-components/shop-list-button/shop-list-button.spec.js
+++ b/src/iss-components/shop-list-button/shop-list-button.spec.js
@@ -294,32 +294,6 @@ describe('Shop list button', () => {
             expect(availabilityIndicatorBlock.classes()).toContain('availability-indicator');
             expect(availabilityIndicatorBlock.classes()).toContain('rounded-pill');
         });
-        test('availability indicator loader when displayAvailabilityIndicators', async () => {
-            // Arrange
-            const additionalButtonData = {
-                displayAvailabilityIndicators: true,
-                availabilityRatingCallback: () => Promise.resolve(null)
-            };
-            const wrapper = mount(shopListButton, {
-                propsData: {
-                    value: 1234,
-                    modelValue: 'value of modal',
-                    groupName: 'name of group',
-                    buttonLabel: 'label of button',
-                    additionalButtonData
-                },
-                mixins: [inputButtonWrapperMixin]
-            });
-            await wrapper.vm.$nextTick();
-
-            // Act
-            const availabilityIndicatorLoader = wrapper.findComponent(loaderReference);
-
-            // Assert
-            expect(availabilityIndicatorLoader.exists()).toBeTruthy();
-            expect(availabilityIndicatorLoader.props().loaderPosition).toBe('left');
-            expect(availabilityIndicatorLoader.props().allowPageInteraction).toBe(true);
-        });
         describe('availability badge when displayAvailabilityIndicators true', () => {
             test('and "availabilityRating" is "high"', async () => {
                 // Arrange
@@ -437,60 +411,6 @@ describe('Shop list button', () => {
         });
     });
     describe('should not render', () => {
-        test.each([false, null, undefined])(
-            'availability indicator block when displayAvailabilityIndicators falsy',
-            async (displayAvailabilityIndicators) => {
-                // Arrange
-                const additionalButtonData = {
-                    displayAvailabilityIndicators,
-                    availabilityRatingCallback: () => Promise.resolve({})
-                };
-                const wrapper = mount(shopListButton, {
-                    propsData: {
-                        value: 1234,
-                        modelValue: 'value of modal',
-                        groupName: 'name of group',
-                        buttonLabel: 'label of button',
-                        additionalButtonData
-                    },
-                    mixins: [inputButtonWrapperMixin]
-                });
-                await wrapper.vm.$nextTick();
-
-                // Act
-                const availabilityIndicatorBlock = wrapper.find(availabilityIndicatorBlockReference);
-
-                // Assert
-                expect(availabilityIndicatorBlock.exists()).toBeFalsy();
-            }
-        );
-        test.each([null, undefined])(
-            'availability badge when displayAvailabilityIndicators true and "availabilityRating" is null',
-            async (availabilityRating) => {
-                // Arrange
-                const additionalButtonData = {
-                    displayAvailabilityIndicators: true,
-                    availabilityRatingCallback: () => Promise.resolve(availabilityRating)
-                };
-                const wrapper = mount(shopListButton, {
-                    propsData: {
-                        value: 1234,
-                        modelValue: 'value of modal',
-                        groupName: 'name of group',
-                        buttonLabel: 'label of button',
-                        additionalButtonData
-                    },
-                    mixins: [inputButtonWrapperMixin]
-                });
-                await wrapper.vm.$nextTick();
-
-                // Act
-                const availabilityBadge = wrapper.find(availabilityBadgeReference);
-
-                // Assert
-                expect(availabilityBadge.exists()).toBeFalsy();
-            }
-        );
         test('button body copy when buttonBodyCopy not provided', async () => {
             // Arrange
             const additionalButtonData = {
@@ -542,33 +462,6 @@ describe('Shop list button', () => {
     });
     describe('computed', () => {
         describe('isLoaderDisplayed', () => {
-            test.each([null, undefined])(
-                'should return true when availabilityRating is null or undefined',
-                async (availabilityRating) => {
-                    // Arrange
-                    const additionalButtonData = {
-                        displayAvailabilityIndicators: true,
-                        availabilityRatingCallback: () => Promise.resolve(availabilityRating)
-                    };
-                    const wrapper = mount(shopListButton, {
-                        propsData: {
-                            value: 1234,
-                            modelValue: 'value of modal',
-                            groupName: 'name of group',
-                            buttonLabel: 'label of button',
-                            additionalButtonData
-                        },
-                        mixins: [inputButtonWrapperMixin]
-                    });
-                    await wrapper.vm.$nextTick();
-
-                    // Act
-                    const result = wrapper.vm.isLoaderDisplayed;
-
-                    // Assert
-                    expect(result).toBeTruthy();
-                }
-            );
             test('should return false when availabilityRating is empty string', async () => {
                 // Arrange
                 const availabilityRating = '';
diff --git a/src/iss-components/shop-list-button/shop-list-button.vue b/src/iss-components/shop-list-button/shop-list-button.vue
index 74997b54..041fa184 100644
--- a/src/iss-components/shop-list-button/shop-list-button.vue
+++ b/src/iss-components/shop-list-button/shop-list-button.vue
@@ -25,13 +25,7 @@
                         id="availabilityIndicatorBlock"
                         class="availability-indicator rounded-pill"
                         :class="availabilityRatingClass">
-                        <loader
-                            v-if="isLoaderDisplayed"
-                            ref="availabilityIndicatorLoader"
-                            loaderPosition="left"
-                            :allowPageInteraction="true" />
                         <div
-                            v-else
                             id="availabilityIndicator"
                             class="d-flex align-items-center">
                             <div
@@ -64,13 +58,11 @@
 <script>
 import baseInputButton from '@/digital-components/base-input-button/base-input-button.vue';
 import inputButtonWrapperMixin from '@/mixins/input-button-wrapper-mixin';
-import loader from '@/ux-components/loader/loader.vue';
 
 export default {
     name: 'shop-list-button',
     components: {
-        baseInputButton,
-        loader
+        baseInputButton
     },
     mixins: [inputButtonWrapperMixin],
     data() {
@@ -80,9 +72,6 @@ export default {
         };
     },
     computed: {
-        isLoaderDisplayed() {
-            return this.availabilityRating == null;
-        },
         availabilityRatingClass() {
             if (this.availabilityRating != null) {
                 return this.availabilityRating === 'high' ? 'green' : 'orange';
@@ -203,18 +192,6 @@ export default {
               align-items: center;
           }
 
-          .loader {
-              padding: 0 0.25rem 0 0.25rem;
-              padding-top: 0.125rem;
-              padding-bottom: 0.125rem;
-          }
-
-          .loader:after {
-              background-color: $gray-550;
-              height: 1rem;
-              width: 1rem;
-          }
-
           &.green {
               color: $green-700;
               background-color: $green-100;
diff --git a/src/iss-components/site-footer/site-footer.vue b/src/iss-components/site-footer/site-footer.vue
index 1c600cef..b3a1aa99 100644
--- a/src/iss-components/site-footer/site-footer.vue
+++ b/src/iss-components/site-footer/site-footer.vue
@@ -94,10 +94,6 @@ export default {
         updateButtonText(newText) {
             this.customButtontext = newText;
         },
-        removeLoader() {
-            this.$refs.buttonMain.removeLoader();
-            document.onkeydown = () => true;
-        },
         buttonClick() {
             // prevent keyboard input after button click
             document.onkeydown = () => false;
diff --git a/src/layouts/address-lookup/address-lookup.spec.js b/src/layouts/address-lookup/address-lookup.spec.js
index dfbb7159..1bae7462 100644
--- a/src/layouts/address-lookup/address-lookup.spec.js
+++ b/src/layouts/address-lookup/address-lookup.spec.js
@@ -88,7 +88,6 @@ function setupMocks({
     wrapper.vm.$router.navigateWithSpinner = jest.fn();
     wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
     wrapper.vm.$refs.siteFooter.updateButtonText = jest.fn();
-    wrapper.vm.$refs.siteFooter.removeLoader = jest.fn();
     wrapper.vm.$refs.siteFooter.disableForwardButton = jest.fn();
     wrapper.vm.$refs.siteFooter.enableForwardAction = jest.fn();
 
@@ -483,7 +482,7 @@ describe('address-lookup.vue', () => {
 
             const { wrapper } = setupMocks({
                 vinVehicles: [
-                    { 
+                    {
                         vehicle: {
                             carId: 'BIGTRUCKCARID',
                             isBigTruck: true,
@@ -498,7 +497,7 @@ describe('address-lookup.vue', () => {
             await wrapper.setData({
                 customerQuestions: {
                     addressQuestions: mockRegistrationAddress
-                },
+                }
             });
 
             // Act
@@ -518,7 +517,7 @@ describe('address-lookup.vue', () => {
 
             const { wrapper } = setupMocks({
                 vinVehicles: [
-                    { 
+                    {
                         vehicle: {
                             carId: 'BIGTRUCKCARID2',
                             isBigTruck: true,
@@ -533,7 +532,7 @@ describe('address-lookup.vue', () => {
             await wrapper.setData({
                 customerQuestions: {
                     addressQuestions: mockRegistrationAddress
-                },
+                }
             });
 
             // Act
diff --git a/src/layouts/address-lookup/address-lookup.vue b/src/layouts/address-lookup/address-lookup.vue
index 315621e8..764c2c53 100644
--- a/src/layouts/address-lookup/address-lookup.vue
+++ b/src/layouts/address-lookup/address-lookup.vue
@@ -250,8 +250,7 @@ export default {
             if (!resultMap.vinLookupResponse.isStatePermissible) {
                 // State Restrictions forbid lookup by address
                 this.displayVinLookupByHomeAddressNotAllowedAlert = true;
-                this.$refs.siteFooter.disableForwardButton();
-                return this.$refs.siteFooter.removeLoader();
+                return this.$refs.siteFooter.disableForwardButton();
             }
 
             const carsFound = resultMap.vinLookupResponse.vinVehicles;
@@ -263,12 +262,10 @@ export default {
 
                 if (!carFound.canSafeliteService) {
                     this.displayNoServiceAlert = true;
-                    this.$refs.siteFooter.disableForwardButton();
-                    return this.$refs.siteFooter.removeLoader();
+                    return this.$refs.siteFooter.disableForwardButton();
                 }
 
-                this.isCarIdDifferent =
-                    carFound.carId !== useMainStore().order.vehicle.carId;
+                this.isCarIdDifferent = carFound.carId !== useMainStore().order.vehicle.carId;
                 if (this.isCarIdDifferent && carFound.carId !== this.previouslyEnteredCarId) {
                     // Display Alert
                     this.previouslyEnteredCarId = carFound.carId;
@@ -284,10 +281,9 @@ export default {
                         await isGlassAvailableForCarId(carFound.carId);
 
                     // Update button "Continue with..."
-                    this.$refs.siteFooter
+                    return this.$refs.siteFooter
                         // eslint-disable-next-line max-len
                         .updateButtonText(`Continue with ${carFound.year} ${carFound.make} ${carFound.model} ${this.forwardButtonCarStyle}`);
-                    return this.$refs.siteFooter.removeLoader();
                 }
 
                 // update data
@@ -310,8 +306,7 @@ export default {
             } else {
                 // No VINS found.
                 this.displayVinNotFoundAlert = true;
-                this.$refs.siteFooter.disableForwardButton();
-                return this.$refs.siteFooter.removeLoader();
+                return this.$refs.siteFooter.disableForwardButton();
             }
 
             // Save vehicle, customer, service and registration information
diff --git a/src/layouts/address-vehicles/address-vehicles.spec.js b/src/layouts/address-vehicles/address-vehicles.spec.js
index 1235b376..1986e0a4 100644
--- a/src/layouts/address-vehicles/address-vehicles.spec.js
+++ b/src/layouts/address-vehicles/address-vehicles.spec.js
@@ -119,7 +119,6 @@ function setupMocks({
     wrapper.vm.$router.navigateWithSpinner = jest.fn();
     wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
     wrapper.vm.$refs.siteFooter.updateButtonText = jest.fn();
-    wrapper.vm.$refs.siteFooter.removeLoader = jest.fn();
     wrapper.vm.$refs.siteFooter.disableForwardButton = jest.fn();
 
     return { wrapper };
@@ -147,7 +146,6 @@ describe('address-vehicles.vue', () => {
         };
 
         wrapper.vm.$refs.siteFooter.updateButtonText = jest.fn();
-        wrapper.vm.$refs.siteFooter.removeLoader = jest.fn();
         wrapper.vm.lookupVin = jest.fn(() => Promise.resolve(lookupVinResponse));
         wrapper.vm.$router.navigate = jest.fn();
         wrapper.vm.saveVin = jest.fn().mockImplementation(() => {});
@@ -176,7 +174,6 @@ describe('address-vehicles.vue', () => {
         };
 
         wrapper.vm.$refs.siteFooter.updateButtonText = jest.fn();
-        wrapper.vm.$refs.siteFooter.removeLoader = jest.fn();
         wrapper.vm.lookupVin = jest.fn(() => Promise.reject(lookupVinResponse));
         wrapper.vm.$router.navigate = jest.fn();
         wrapper.vm.saveVin = jest.fn().mockImplementation(() => {});
@@ -323,7 +320,7 @@ describe('address-vehicles.vue', () => {
             selectedVehicleVin: 'BIGTRUCKVIN2',
             previouslyEnteredCarId: 'BIGTRUCKCARID2'
         });
-2
+        2;
         wrapper.vm.selectedVehicle = {
             vin: 'BIGTRUCKVIN2',
             vehicle: {
diff --git a/src/layouts/address-vehicles/address-vehicles.vue b/src/layouts/address-vehicles/address-vehicles.vue
index 0510ad5f..e247ce15 100644
--- a/src/layouts/address-vehicles/address-vehicles.vue
+++ b/src/layouts/address-vehicles/address-vehicles.vue
@@ -259,16 +259,11 @@ export default {
             return false;
         },
         async forwardButtonAction() {
-            const vinLookup = await useMainStore()
-                .lookupVehicleByVin(this.selectedVehicle.vin)
-                .catch(() => {
-                    this.$refs.siteFooter.removeLoader();
-                });
+            const vinLookup = await useMainStore().lookupVehicleByVin(this.selectedVehicle.vin);
             if (!vinLookup) {
                 return;
             }
-            this.isSelectedGlassAvailableForVehicle =
-                await isGlassAvailableForCarId(vinLookup.data.carId);
+            this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(vinLookup.data.carId);
             await useMainStore().saveVin(
                 {
                     vehicleInfo: Object.assign(this.selectedVehicle.vehicle, {
diff --git a/src/layouts/coverage-statement/cancel-claim-modal/__snapshots__/cancel-claim-modal.spec.js.snap b/src/layouts/coverage-statement/cancel-claim-modal/__snapshots__/cancel-claim-modal.spec.js.snap
index 0efddf79..71040c2b 100644
--- a/src/layouts/coverage-statement/cancel-claim-modal/__snapshots__/cancel-claim-modal.spec.js.snap
+++ b/src/layouts/coverage-statement/cancel-claim-modal/__snapshots__/cancel-claim-modal.spec.js.snap
@@ -2,7 +2,6 @@
 
 exports[`returns the initial data 1`] = `
 Object {
-  "isLoaderDisplayed": false,
   "isModalOpened": false,
 }
 `;
diff --git a/src/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.vue b/src/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.vue
index cdc19315..7997c5ac 100644
--- a/src/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.vue
+++ b/src/layouts/coverage-statement/cancel-claim-modal/cancel-claim-modal.vue
@@ -21,9 +21,6 @@
                     align-items-center justify-content-center d-inline-flex mt-4 py-3 px-4 delay w-100"
                     @click="returnToClaim">
                     {{ modalBodyText2 }}
-                    <loader
-                        v-if="isLoaderDisplayed"
-                        class="ms-2 button-loader" />
                 </button>
             </modal>
         </div>
@@ -31,19 +28,16 @@
 </template>
 
 <script>
-import loader from '@/ux-components/loader/loader.vue';
 import modal from '@/digital-components/modal/modal.vue';
 
 export default {
     name: 'cancel-claim-modal',
     components: {
-        loader,
         modal
     },
     emits: ['cancel-claim-confirmation', 'return-to-claim'],
     data() {
         return {
-            isLoaderDisplayed: false,
             isModalOpened: false
         };
     },
@@ -65,9 +59,6 @@ export default {
         openModal() {
             this.$refs.cancelClaimModal.openModal();
         },
-        removeLoader() {
-            this.isLoaderDisplayed = false;
-        },
         setModalStatus(isOpened) {
             this.isModalOpened = isOpened;
         },
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.spec.js b/src/layouts/license-plate-lookup/license-plate-lookup.spec.js
index c70789ab..df95785b 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.spec.js
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.spec.js
@@ -76,7 +76,6 @@ function setupMocks({
     wrapper.vm.$router.navigateWithSpinner = jest.fn();
     wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
     wrapper.vm.$refs.siteFooter.updateButtonText = jest.fn();
-    wrapper.vm.$refs.siteFooter.removeLoader = jest.fn();
     wrapper.vm.$refs.siteFooter.disableForwardButton = jest.fn();
     wrapper.vm.$refs.siteFooter.enableForwardAction = jest.fn();
 
@@ -156,7 +155,7 @@ describe('license-plate-lookup.vue', () => {
             // Arrange
             const mockRegistrationLicensePlate = {
                 licensePlate: 'BIGTRUCKTEST'
-            };  
+            };
 
             const { wrapper } = setupMocks({
                 lookupVinByPlateResponse: {
@@ -187,7 +186,7 @@ describe('license-plate-lookup.vue', () => {
             // Arrange
             const mockRegistrationLicensePlate = {
                 licensePlate: 'BIGTRUCKTEST2'
-            };  
+            };
 
             const { wrapper } = setupMocks({
                 lookupVinByPlateResponse: {
diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue
index 1bcfbc1d..bb2ec53e 100644
--- a/src/layouts/license-plate-lookup/license-plate-lookup.vue
+++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue
@@ -266,8 +266,7 @@ export default {
             if (vinLookupResponse.error) {
                 this.displayVinNotFoundAlert = true;
                 this.previouslyEnteredCarId = null;
-                this.$refs.siteFooter.disableForwardButton();
-                return this.$refs.siteFooter.removeLoader();
+                return this.$refs.siteFooter.disableForwardButton();
             }
 
             // Vehicle found from VIN lookup
@@ -275,8 +274,7 @@ export default {
 
             if (!vehicleFromLookup.canSafeliteService) {
                 this.displayNoServiceAlert = true;
-                this.$refs.siteFooter.disableForwardButton();
-                return this.$refs.siteFooter.removeLoader();
+                return this.$refs.siteFooter.disableForwardButton();
             }
 
             // Check if the CarId has changed
@@ -299,10 +297,9 @@ export default {
                 this.isSelectedGlassAvailableForVehicle = await isGlassAvailableForCarId(vehicleFromLookup.carId);
 
                 // Update button "Continue with..."
-                this.$refs.siteFooter
+                return this.$refs.siteFooter
                     // eslint-disable-next-line max-len
                     .updateButtonText(`Continue with ${vehicleFromLookup.year} ${vehicleFromLookup.make} ${vehicleFromLookup.model} ${this.forwardButtonCarStyle}`);
-                return this.$refs.siteFooter.removeLoader();
             }
 
             // Save vehicle, license plate, and registration information
diff --git a/src/layouts/policy-holder-details/policy-holder-details.spec.js b/src/layouts/policy-holder-details/policy-holder-details.spec.js
index c1f1f998..2f0c9faa 100644
--- a/src/layouts/policy-holder-details/policy-holder-details.spec.js
+++ b/src/layouts/policy-holder-details/policy-holder-details.spec.js
@@ -63,7 +63,6 @@ function setupMocks() {
     wrapper.vm.$router.navigateWithSpinner = jest.fn();
     wrapper.vm.navigateBack = baseMixin.methods.navigateBack;
     wrapper.vm.$refs.siteFooter.updateButtonText = jest.fn();
-    wrapper.vm.$refs.siteFooter.removeLoader = jest.fn();
     wrapper.vm.$refs.siteFooter.disableForwardButton = jest.fn();
     wrapper.vm.$refs.siteFooter.enableForwardAction = jest.fn();
 
diff --git a/src/layouts/policy-vehicles/policy-vehicles.spec.js b/src/layouts/policy-vehicles/policy-vehicles.spec.js
index 7e98f9ca..8f1e60c1 100644
--- a/src/layouts/policy-vehicles/policy-vehicles.spec.js
+++ b/src/layouts/policy-vehicles/policy-vehicles.spec.js
@@ -72,7 +72,6 @@ function setupMocks() {
     wrapper.vm.setCmsContent = jest.fn();
     wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
     wrapper.vm.$refs.siteFooter.updateButtonText = jest.fn();
-    wrapper.vm.$refs.siteFooter.removeLoader = jest.fn();
     wrapper.vm.$refs.siteFooter.disableForwardButton = jest.fn();
     return { wrapper };
 }
diff --git a/src/layouts/provider-preference/provider-preference.vue b/src/layouts/provider-preference/provider-preference.vue
index ca3b7593..e3647c47 100644
--- a/src/layouts/provider-preference/provider-preference.vue
+++ b/src/layouts/provider-preference/provider-preference.vue
@@ -232,7 +232,6 @@ export default {
                         if (this.mainStore.issConfig.enableTPAFlow) {
                             if (this.mainStore.hasRecalibrationPart) {
                                 this.$refs[TPA_RECAL_MODAL_REF_NAME].openModal();
-                                this.$refs[SITE_FOOTER_REF_NAME].removeLoader();
                                 return;
                             }
                             scenario =
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index 8578a90d..85608c37 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -426,7 +426,6 @@ export default {
                 if (partsOrQuestionsResponse.error) {
                     this.mainStore.setBailout(bailoutMessage.PartsServiceError(partsOrQuestionsResponse.error.data));
                     window.console.error('Error on retrieving PartsOrQuestions');
-                    this.$refs.siteFooter.removeLoader();
                     this.hasBailedOut = true;
                     this.$router.navigate(
                         this.navigationScenarios.CLICKED_FORWARD_WITH_BAILOUT,
diff --git a/src/layouts/vehicle-parts/vehicle-parts.spec.js b/src/layouts/vehicle-parts/vehicle-parts.spec.js
index cd7d01e9..e05f2298 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.spec.js
+++ b/src/layouts/vehicle-parts/vehicle-parts.spec.js
@@ -91,7 +91,6 @@ function setupMocks({ pageHeaderWidgetHeaderText = {}, mountOptionsMockData = {}
     partQuestionRearWrapper.vm.initializeComponent = glassPartQuestion.methods.initializeComponent;
 
     wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
-    wrapper.vm.$refs.siteFooter.removeLoader = jest.fn();
 
     return { wrapper, apiPromise };
 }
diff --git a/src/layouts/vehicle-parts/vehicle-parts.vue b/src/layouts/vehicle-parts/vehicle-parts.vue
index 101e3771..5ceefd0d 100644
--- a/src/layouts/vehicle-parts/vehicle-parts.vue
+++ b/src/layouts/vehicle-parts/vehicle-parts.vue
@@ -194,7 +194,6 @@ export default {
             }
             // If no parts could be matched, throw an error (isForwardActionDisabled is based off of matchedParts)
             if (this.isForwardActionDisabled) {
-                this.$refs.siteFooter.removeLoader();
                 throw new Error('Could not match any parts to the selected parts');
             }
 
diff --git a/src/layouts/vin-lookup/vin-lookup.vue b/src/layouts/vin-lookup/vin-lookup.vue
index 15831aca..bb18e1e4 100644
--- a/src/layouts/vin-lookup/vin-lookup.vue
+++ b/src/layouts/vin-lookup/vin-lookup.vue
@@ -179,7 +179,6 @@ export default {
                     this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NOT_FOUND;
                     this.mainStore.setBailout(bailoutMessage.vehicleNotFound(this.vin));
                     this.resetVehicleFromLookup();
-                    this.$refs.siteFooter.removeLoader();
                     // Temp solution to turn on 'disabled' style on the Continue button
                     //  because the form itself actually passes its client-side validation.
                     //  SSR-189 Scenario #4.
@@ -191,7 +190,6 @@ export default {
                     this.activeVehicleLookupAlertType = vehicleLookupAlertTypes.NO_SERVICE;
                     this.resetVehicleFromLookup();
                     this.$refs.siteFooter.disableForwardButton();
-                    this.$refs.siteFooter.removeLoader();
                     return;
                 }
 
@@ -218,8 +216,6 @@ export default {
                     // eslint-disable-next-line max-len
                     `${this.vehicleFromLookup.year} ${this.vehicleFromLookup.make} ${this.vehicleFromLookup.model} ${this.forwardButtonCarStyle}`;
                 this.$refs.siteFooter.updateButtonText(`Continue with ${vehicleYearMakeModelStyle}`);
-                this.$refs.siteFooter.removeLoader();
-
                 this.needToLookupVehicle = false;
 
                 return null;
diff --git a/src/layouts/welcome-page/welcome-page.spec.js b/src/layouts/welcome-page/welcome-page.spec.js
index ca071640..c4698bdc 100644
--- a/src/layouts/welcome-page/welcome-page.spec.js
+++ b/src/layouts/welcome-page/welcome-page.spec.js
@@ -87,7 +87,6 @@ function setupMocks({
 
     wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
     wrapper.vm.getCmsContent = jest.fn().mockImplementation(() => '');
-    wrapper.vm.$refs.siteFooter.removeLoader = jest.fn();
     return { wrapper, apiPromise };
 }
 
diff --git a/src/layouts/welcome-page/welcome-page.vue b/src/layouts/welcome-page/welcome-page.vue
index f89c82c4..dfb89867 100644
--- a/src/layouts/welcome-page/welcome-page.vue
+++ b/src/layouts/welcome-page/welcome-page.vue
@@ -332,7 +332,6 @@ export default {
                 return Promise.resolve();
             } catch (e) {
                 this.displayInvalidZipAlert = true;
-                this.$refs.siteFooter.removeLoader();
                 return Promise.reject(e);
             }
         },
@@ -454,11 +453,8 @@ export default {
                     console.error(`Error on loading session from cookie ${error}`);
                     this.startNewReferral();
                 } finally {
-                    this.$refs.continueModal.removeLoader();
                     this.$refs.continueModal.closeModal();
                 }
-            } else {
-                this.$refs.continueModal.removeLoader();
             }
         },
         startNewReferral() {
diff --git a/src/ux-components/button-main/button-main.spec.js b/src/ux-components/button-main/button-main.spec.js
index 0494405f..95664421 100644
--- a/src/ux-components/button-main/button-main.spec.js
+++ b/src/ux-components/button-main/button-main.spec.js
@@ -1,6 +1,5 @@
 import { shallowMount } from '@vue/test-utils';
 import { getMountOptions } from '@/helpers/unit-test-helper.js';
-import { nextTick } from 'vue';
 import buttonMain from '@/ux-components/button-main/button-main.vue';
 
 /** @ignore */
@@ -48,27 +47,4 @@ describe('buttonMain.vue', () => {
         // Expect
         expect(button.attributes()['aria-disabled']).toEqual('true');
     });
-
-    it('Should return loader position', async () => {
-        // Act
-        const wrapper = shallowMount(
-            buttonMain,
-            setupMocks({
-                propsData: {
-                    loaderPosition: 'right',
-                    loaderEnabled: true
-                }
-            })
-        );
-
-        // Assert
-
-        wrapper.vm.clicked();
-
-        await nextTick();
-
-        const loader = wrapper.find('loader-stub');
-
-        expect(loader.attributes('class')).toContain('right');
-    });
 });
diff --git a/src/ux-components/modal-button-main/modal-button-main.spec.js b/src/ux-components/modal-button-main/modal-button-main.spec.js
index ed932dea..d06fc1ca 100644
--- a/src/ux-components/modal-button-main/modal-button-main.spec.js
+++ b/src/ux-components/modal-button-main/modal-button-main.spec.js
@@ -45,97 +45,6 @@ describe('modal-button-main.vue', () => {
         expect(button.attributes()['aria-disabled']).toEqual('true');
     });
 
-    it('Should return loader color', async () => {
-        // Arrange
-        const wrapper = shallowMount(
-            modalButtonMain,
-            setupMocks({
-                propsData: {
-                    loaderColor: 'blue',
-                    loaderEnabled: true
-                }
-            })
-        );
-
-        // Act
-        wrapper.vm.clicked();
-
-        await nextTick();
-
-        // Assert
-        const loader = wrapper.find('loader-stub');
-        expect(loader.attributes('class')).toContain('blue');
-    });
-
-    it('Should return loader position', async () => {
-        // Arrange
-        const wrapper = shallowMount(
-            modalButtonMain,
-            setupMocks({
-                propsData: {
-                    loaderPosition: 'right',
-                    loaderEnabled: true
-                }
-            })
-        );
-
-        // Act
-        wrapper.vm.clicked();
-        await nextTick();
-
-        // Assert
-        const loader = wrapper.find('loader-stub');
-        expect(loader.attributes('class')).toContain('right');
-    });
-
-    it("Should set 'isLoaderDisplayed' to false when calling 'removeLoader'", async () => {
-        // Arrange
-        const wrapper = shallowMount(
-            modalButtonMain,
-            setupMocks({
-                propsData: {
-                    loaderPosition: 'right',
-                    loaderEnabled: true
-                }
-            })
-        );
-
-        wrapper.setData({
-            isLoaderDisplayed: true
-        });
-
-        // Act
-        wrapper.vm.removeLoader();
-        await nextTick();
-
-        // Assert
-        expect(wrapper.vm.isLoaderDisplayed).toBe(false);
-    });
-
-    it("Should set 'isLoaderDisplayed' to false when calling 'resetButtonStyle'", async () => {
-        // Arrange
-        const wrapper = shallowMount(
-            modalButtonMain,
-            setupMocks({
-                propsData: {
-                    loaderPosition: 'right',
-                    loaderEnabled: true
-                }
-            })
-        );
-
-        wrapper.setData({
-            isLoaderDisplayed: true
-        });
-
-        // Act
-        wrapper.vm.resetButtonStyle();
-        await nextTick();
-
-        // Assert
-        expect(wrapper.vm.isLoaderDisplayed).toBe(false);
-    });
-
     it("Should emit 'click-event' event when clicking if the button is enabled", async () => {
         // Arrange
         const wrapper = shallowMount(
diff --git a/src/ux-components/modal-button-main/modal-button-main.vue b/src/ux-components/modal-button-main/modal-button-main.vue
index e5059065..7508667e 100644
--- a/src/ux-components/modal-button-main/modal-button-main.vue
+++ b/src/ux-components/modal-button-main/modal-button-main.vue
@@ -6,25 +6,16 @@
         :class="[
             isPrimary ? 'btn-primary' : 'btn-secondary',
             isFloat ? 'float-end' : '',
-            isLoaderDisplayed ? 'has-loader' : '',
         ]"
         @click="clicked">
         <span class="m-0">{{ buttonText }}</span>
-        <loader
-            v-if="isLoaderDisplayed && !suppressLoader"
-            class="ms-2"
-            :class="[loaderColor, loaderPosition]" />
     </button>
 </template>
 
 <script>
-import loader from '@/ux-components/loader/loader.vue';
 
 export default {
     name: 'modal-button-main',
-    components: {
-        loader
-    },
     props: {
         isPrimary: Boolean,
         buttonText: String,
@@ -35,15 +26,7 @@ export default {
         suppressLoader: Boolean
     },
     emits: ['click-event'],
-    data() {
-        return {
-            isLoaderDisplayed: false
-        };
-    },
     methods: {
-        removeLoader() {
-            this.isLoaderDisplayed = false;
-        },
         clicked() {
             this.pushEventToGA(
                 this.$route.query[this.queryStrings.ISS_PAGE],
@@ -52,12 +35,8 @@ export default {
                 true
             );
             if (!this.isDisabled) {
-                this.isLoaderDisplayed = true;
                 this.$emit('click-event');
             }
-        },
-        resetButtonStyle() {
-            this.isLoaderDisplayed = false;
         }
     }
 };
@@ -97,11 +76,6 @@ export default {
             cursor: pointer;
             pointer-events: all;
         }
-        &.has-loader {
-            color: $white;
-            background: $blue-700;
-            pointer-events: none;
-        }
         &.delay {
             // fixes flicker while transitioning between states
             transition: background 0s 0s ease-in-out;
@@ -138,11 +112,6 @@ export default {
             cursor: pointer;
             pointer-events: all;
         }
-        &.has-loader {
-            color: $white;
-            @include blue-gradient;
-            pointer-events: none;
-        }
         &.delay {
             // fixes flicker while transitioning between states
             transition: background 0s 0s ease-in-out;