Re-add spinner to button.

package.json

@@ -9,6 +9,7 @@
     "test:unit": "vue-cli-service test:unit --coverage --coverageReporters=cobertura --coverageReporters=html --ci --watchAll=false --reporters=jest-junit --reporters=default"
   },
   "dependencies": {
+    "@popperjs/core": "^2.10.2",
     "axios": "^0.23.0",
     "bootstrap": "^5.1.1",
     "canvas-confetti": "^1.4.0",

src/App.vue

@@ -19,17 +19,26 @@
     </div>
     <div class="row">
         <div class="col my-3 d-flex align-items-center">
-            <buttonPrimary buttonText="Primary" buttonType="btn-primary" />
+            <buttonPrimary
+              buttonText="Primary"
+              buttonType="btn-primary"
+            />
         </div>
     </div>
     <div class="row">
         <div class="col my-3 d-flex align-items-center">
-            <buttonPrimary buttonText="Primary Focus" buttonType="btn-primary-focus" />
+            <buttonPrimary
+              buttonText="Primary Focus"
+              buttonType="btn-primary-focus"
+            />
         </div>
     </div>
     <div class="row">
         <div class="col my-3 d-flex align-items-center">
-            <buttonPrimary buttonText="Disabled" buttonType="disabled" />
+            <buttonPrimary
+              buttonText="Disabled"
+              buttonType="disabled"
+            />
         </div>
     </div>
     <div class="row">

src/uxComponents/buttonPrimary/buttonPrimary.vue

@@ -1,31 +1,30 @@
 <template>
-<button type="button" class="btn" v-bind:class="[(this.buttonType === 'btn-funnel' ? ['btn-funnel', 'border', 'rounded', 'w-100', 'text-start'] : this.buttonType)]" v-on:click="this.buttonType === 'btn-funnel' ? showLoader() : null">
+  <button
+    type="button"
+    class="btn d-flex align-items-center"
+    v-on:click="showLoader()"
+    v-bind:class="[(this.isLoading ? 'button-loader' : 'not-loading'),this.buttonType]"
+    >
     {{ this.buttonText }}
-
+  </button>
-    <!-- Spinner for funnel Button -->
-    <div v-if="this.buttonType === 'btn-funnel' && this.isLoading" class="spinner-border spinner-border-sm text-success" role="status">
-        <span class="visually-hidden">Loading...</span>
-    </div>
-
-</button>
 </template>
 
 <script>
 export default {
-    name: 'button',
+  name: 'buttonPrimary',
-    props: {
+  props: {
-        buttonText: String,
+    buttonText: String,
-        buttonType: String
+    buttonType: String
-    },
+  },
-    data() {
+  data(){
-        return {
+    return {
-            isLoading: false
+      isLoading: false
-        }
-    },
-    methods: {
-        showLoader() {
-            this.isLoading = true;
-        }
     }
+  },
+  methods: {
+    showLoader(){
+      this.isLoading = true;
+    }
+  }
 }
 </script>