From 3af1108988a9d6efe12461a332340b4abd3d980e Mon Sep 17 00:00:00 2001
From: Joshua Graber <joshua.d.graber@gmail.com>
Date: Wed, 13 Nov 2024 09:42:10 -0500
Subject: [PATCH] fix(components): update button loading state children

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

diff --git a/src/components/Button/PdapButton.vue b/src/components/Button/PdapButton.vue
index 96ad6f0..5c92527 100644
--- a/src/components/Button/PdapButton.vue
+++ b/src/components/Button/PdapButton.vue
@@ -1,16 +1,14 @@
 <template>
 	<button :class="classes">
-		<component
-			:is="isLoading ? Spinner : $slots.default"
-			v-bind="isLoading ? loadingProps : undefined"
-		/>
+		<slot v-if="!isLoading" />
+		<Spinner v-if="isLoading" :show="isLoading" />
 	</button>
 </template>
 
 <script setup lang="ts">
 // Imports
 import { reactive } from 'vue';
-import Spinner from '../Spinner/PdapSpinner.vue';
+import { Spinner } from '../Spinner';
 
 // Types
 import { PdapButtonProps } from './types';
@@ -21,10 +19,6 @@ const props = withDefaults(defineProps<PdapButtonProps>(), {
 	isLoading: false,
 });
 
-const loadingProps = {
-	show: props.isLoading,
-};
-
 // CSS class map
 const classes = reactive({
 	'pdap-button': true,
diff --git a/src/components/Button/__snapshots__/button.spec.ts.snap b/src/components/Button/__snapshots__/button.spec.ts.snap
index 0b20f47..cffec57 100644
--- a/src/components/Button/__snapshots__/button.spec.ts.snap
+++ b/src/components/Button/__snapshots__/button.spec.ts.snap
@@ -1,3 +1,7 @@
 // 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</button>`;
+exports[`Renders button component > Renders a button 1`] = `
+<button class="pdap-button pdap-button-primary">Button Content
+  <!--v-if-->
+</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 ee3186a..da4f8d1 100644
--- a/src/components/QuickSearchForm/__snapshots__/quick-search-form.spec.ts.snap
+++ b/src/components/QuickSearchForm/__snapshots__/quick-search-form.spec.ts.snap
@@ -27,7 +27,9 @@ 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</button>
+    <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-->
+    </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>
 </div>