From eb00f8fcf5fd267631ada47f8ab12af6f98974bc Mon Sep 17 00:00:00 2001
From: Joshua Graber <joshua.d.graber@gmail.com>
Date: Tue, 9 Jul 2024 11:15:58 -0400
Subject: [PATCH 1/3] fix(components): spinner render logic

move v-if to top level
---
 src/components/Spinner/PdapSpinner.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/Spinner/PdapSpinner.vue b/src/components/Spinner/PdapSpinner.vue
index 6a359e9..29a91cb 100644
--- a/src/components/Spinner/PdapSpinner.vue
+++ b/src/components/Spinner/PdapSpinner.vue
@@ -1,8 +1,7 @@
 <template>
-	<div class="pdap-spinner">
+	<div v-if="show" class="pdap-spinner">
 		<Transition appear>
 			<svg
-				v-if="show"
 				aria-label="loading"
 				:width="size"
 				:height="size"

From 6ef26a789f5189c83dfa1961baf7d3bad2c6653a Mon Sep 17 00:00:00 2001
From: Joshua Graber <joshua.d.graber@gmail.com>
Date: Tue, 9 Jul 2024 11:16:41 -0400
Subject: [PATCH 2/3] test(components): update spinner snapshot

---
 .../Spinner/__snapshots__/spinner.spec.ts.snap        | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

diff --git a/src/components/Spinner/__snapshots__/spinner.spec.ts.snap b/src/components/Spinner/__snapshots__/spinner.spec.ts.snap
index f4b77b0..b2b4f9e 100644
--- a/src/components/Spinner/__snapshots__/spinner.spec.ts.snap
+++ b/src/components/Spinner/__snapshots__/spinner.spec.ts.snap
@@ -14,16 +14,7 @@ exports[`PdapSpinner > applies custom color and size 1`] = `
 </div>
 `;
 
-exports[`PdapSpinner > does not render spinner when show prop is false 1`] = `
-<div class="pdap-spinner">
-  <transition-stub appear="true" css="true" persisted="false">
-    <!--v-if-->
-  </transition-stub>
-  <transition-stub appear="true" css="true" mode="out-in" persisted="false">
-    <!--v-if-->
-  </transition-stub>
-</div>
-`;
+exports[`PdapSpinner > does not render spinner when show prop is false 1`] = `<!--v-if-->`;
 
 exports[`PdapSpinner > renders spinner when show prop is true 1`] = `
 <div class="pdap-spinner">

From ff2d4c7f830714e19077004293d1eb4e4659693d Mon Sep 17 00:00:00 2001
From: Joshua Graber <joshua.d.graber@gmail.com>
Date: Tue, 9 Jul 2024 11:19:42 -0400
Subject: [PATCH 3/3] fix(components): spinner transitions

---
 src/components/Spinner/PdapSpinner.vue        | 18 +++----
 .../__snapshots__/spinner.spec.ts.snap        | 48 ++++++++++---------
 2 files changed, 35 insertions(+), 31 deletions(-)

diff --git a/src/components/Spinner/PdapSpinner.vue b/src/components/Spinner/PdapSpinner.vue
index 29a91cb..85ec110 100644
--- a/src/components/Spinner/PdapSpinner.vue
+++ b/src/components/Spinner/PdapSpinner.vue
@@ -1,6 +1,6 @@
 <template>
-	<div v-if="show" class="pdap-spinner">
-		<Transition appear>
+	<Transition appear>
+		<div v-if="show" class="pdap-spinner">
 			<svg
 				aria-label="loading"
 				:width="size"
@@ -21,14 +21,14 @@
 					:fill="color"
 				/>
 			</svg>
-		</Transition>
 
-		<Transition :key="text" appear mode="out-in">
-			<p v-if="text && show" aria-live="polite">
-				{{ text }}
-			</p>
-		</Transition>
-	</div>
+			<Transition :key="text" appear mode="out-in">
+				<p v-if="text && show" aria-live="polite">
+					{{ text }}
+				</p>
+			</Transition>
+		</div>
+	</Transition>
 </template>
 
 <script setup lang="ts">
diff --git a/src/components/Spinner/__snapshots__/spinner.spec.ts.snap b/src/components/Spinner/__snapshots__/spinner.spec.ts.snap
index b2b4f9e..5078862 100644
--- a/src/components/Spinner/__snapshots__/spinner.spec.ts.snap
+++ b/src/components/Spinner/__snapshots__/spinner.spec.ts.snap
@@ -1,45 +1,49 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`PdapSpinner > applies custom color and size 1`] = `
-<div class="pdap-spinner">
-  <transition-stub appear="true" css="true" persisted="false">
+<transition-stub appear="true" css="true" persisted="false">
+  <div class="pdap-spinner">
     <svg aria-label="loading" height="48" viewBox="0 0 24 24" width="48" xmlns="http://www.w3.org/2000/svg">
       <path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" fill="red" opacity=".25" stroke="red" />
       <path class="pdap-spinner-innards" d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z" fill="red" stroke="red" />
     </svg>
-  </transition-stub>
-  <transition-stub appear="true" css="true" mode="out-in" persisted="false">
-    <!--v-if-->
-  </transition-stub>
-</div>
+    <transition-stub appear="true" css="true" mode="out-in" persisted="false">
+      <!--v-if-->
+    </transition-stub>
+  </div>
+</transition-stub>
 `;
 
-exports[`PdapSpinner > does not render spinner when show prop is false 1`] = `<!--v-if-->`;
+exports[`PdapSpinner > does not render spinner when show prop is false 1`] = `
+<transition-stub appear="true" css="true" persisted="false">
+  <!--v-if-->
+</transition-stub>
+`;
 
 exports[`PdapSpinner > renders spinner when show prop is true 1`] = `
-<div class="pdap-spinner">
-  <transition-stub appear="true" css="true" persisted="false">
+<transition-stub appear="true" css="true" persisted="false">
+  <div class="pdap-spinner">
     <svg aria-label="loading" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
       <path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" fill="currentColor" opacity=".25" stroke="currentColor" />
       <path class="pdap-spinner-innards" d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z" fill="currentColor" stroke="currentColor" />
     </svg>
-  </transition-stub>
-  <transition-stub appear="true" css="true" mode="out-in" persisted="false">
-    <!--v-if-->
-  </transition-stub>
-</div>
+    <transition-stub appear="true" css="true" mode="out-in" persisted="false">
+      <!--v-if-->
+    </transition-stub>
+  </div>
+</transition-stub>
 `;
 
 exports[`PdapSpinner > renders text when text prop is provided 1`] = `
-<div class="pdap-spinner">
-  <transition-stub appear="true" css="true" persisted="false">
+<transition-stub appear="true" css="true" persisted="false">
+  <div class="pdap-spinner">
     <svg aria-label="loading" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
       <path d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z" fill="currentColor" opacity=".25" stroke="currentColor" />
       <path class="pdap-spinner-innards" d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z" fill="currentColor" stroke="currentColor" />
     </svg>
-  </transition-stub>
-  <transition-stub appear="true" css="true" mode="out-in" persisted="false">
-    <p aria-live="polite">Loading...</p>
-  </transition-stub>
-</div>
+    <transition-stub appear="true" css="true" mode="out-in" persisted="false">
+      <p aria-live="polite">Loading...</p>
+    </transition-stub>
+  </div>
+</transition-stub>
 `;