fix: button loading overlap (#119)

Police-Data-Accessibility-Project · Nov 12, 2024 · d35efc6 · d35efc6
1 parent 7ace5f7
commit d35efc6
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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>