feat: button background hover styles while loading

Author: tikagan

components/button/cta-with-loader.vue

@@ -62,10 +62,10 @@ const props = defineProps({
 
 <style lang="scss" scoped>
 // ///////////////////////////////////////////////////////////////////// General
-.with-loader.theme__primary.loading {
+.with-loader.theme__primary {
   &:hover {
     cursor: default;
-    :deep(.detail) {
+    :deep(.inner-content.loading) {
       .fill-path {
         opacity: 0;
         fill: none;

components/button/cta.vue

@@ -2,9 +2,8 @@
   <ZeroButton
     v-slot="{ loading }"
     v-bind="props"
-    :class="['button-x', `theme__${props.theme}`, variant, loading]">
-    <div class="inner-content">
-
+    :class="['button-x', `theme__${props.theme}`, variant]">
+    <div :class="['inner-content', { loading: loading }]">
       <div v-if="theme === 'primary'" :class="['detail-wrapper', variant]">
         <svg
           width="400"

components/signup-card.vue

@@ -90,7 +90,7 @@
         </div>
 
         <ButtonCtaWithLoader
-          :class="['submit-button', { submitted: formSubmitted }]"
+          :class="['submit-button', { submitted: !loading && formSubmitted }]"
           theme="primary"
           loader="signup-card-form"
           @clicked="submitForm">
@@ -199,6 +199,7 @@ const selectOption = (setSelected, closePanel, option, field) => {
  * @method submitForm
  */
 const submitForm = async () => {
+  if (formSubmitted.value) { return }
   if (firstName.value && lastName.value && email.value && organization.value && country.value) {
     const body = {
         records: [