From d35efc6763068b19009c2913ab05994b01a1da71 Mon Sep 17 00:00:00 2001
From: Joshua Graber <68428039+joshuagraber@users.noreply.github.com>
Date: Tue, 12 Nov 2024 15:27:03 -0500
Subject: [PATCH] fix: button loading overlap (#119)

---
 src/components/Button/PdapButton.vue          | 22 ++++++++++++++++---
 .../Button/__snapshots__/button.spec.ts.snap  |  8 +++----
 .../quick-search-form.spec.ts.snap            |  8 +++----
 3 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/src/components/Button/PdapButton.vue b/src/components/Button/PdapButton.vue
index ce76a61..ffc2038 100644
--- a/src/components/Button/PdapButton.vue
+++ b/src/components/Button/PdapButton.vue
@@ -1,8 +1,10 @@
 <template>
 	<button :class="classes">
-		<slot v-if="!isLoading" />
-		<slot v-if="isLoading && $slots.loading" name="loading" />
-		<Spinner :show="isLoading && !$slots.loading" />
+		<TransitionGroup mode="out-in">
+			<slot v-if="!isLoading" />
+			<slot v-if="isLoading && $slots.loading" name="loading" />
+			<Spinner v-if="isLoading && !$slots.loading" :show="isLoading" />
+		</TransitionGroup>
 	</button>
 </template>
 
@@ -77,3 +79,17 @@ export default {
 	}
 }
 </style>
+
+<style scoped>
+@media (prefers-reduced-motion: no-preference) {
+	.v-enter-active,
+	.v-leave-active {
+		transition: opacity 0.5s ease;
+	}
+
+	.v-enter-from,
+	.v-leave-to {
+		opacity: 0;
+	}
+}
+</style>
diff --git a/src/components/Button/__snapshots__/button.spec.ts.snap b/src/components/Button/__snapshots__/button.spec.ts.snap
index e99c834..81e4c8c 100644
--- a/src/components/Button/__snapshots__/button.spec.ts.snap
+++ b/src/components/Button/__snapshots__/button.spec.ts.snap
@@ -1,10 +1,10 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Renders button component > Renders a button 1`] = `
-<button class="pdap-button pdap-button-primary">Button Content
-  <!--v-if-->
-  <transition-stub appear="true" css="true" persisted="false">
+<button class="pdap-button pdap-button-primary">
+  <transition-group-stub appear="false" css="true" mode="out-in" persisted="false">Button Content
     <!--v-if-->
-  </transition-stub>
+    <!--v-if-->
+  </transition-group-stub>
 </button>
 `;
diff --git a/src/components/QuickSearchForm/__snapshots__/quick-search-form.spec.ts.snap b/src/components/QuickSearchForm/__snapshots__/quick-search-form.spec.ts.snap
index cfbdf07..e7bb364 100644
--- a/src/components/QuickSearchForm/__snapshots__/quick-search-form.spec.ts.snap
+++ b/src/components/QuickSearchForm/__snapshots__/quick-search-form.spec.ts.snap
@@ -27,11 +27,11 @@ exports[`QuickSearchForm component > Renders a QuickSearchForm 1`] = `
         <!--v-if-->
       </label>
     </div>
-    <button class="pdap-button pdap-button-primary flex-grow-0 flex-shrink-0 basis-full max-w-[unset] mt-4" type="submit">Search Data Sources
-      <!--v-if-->
-      <transition-stub appear="true" css="true" persisted="false">
+    <button class="pdap-button pdap-button-primary flex-grow-0 flex-shrink-0 basis-full max-w-[unset] mt-4" type="submit">
+      <transition-group-stub appear="false" css="true" mode="out-in" persisted="false">Search Data Sources
+        <!--v-if-->
         <!--v-if-->
-      </transition-stub>
+      </transition-group-stub>
     </button>
   </form>
   <p class="max-w-[unset] text-med"> For example, you could search for <a> stops in Pittsburgh </a> or <a> complaints everywhere </a> . </p>