diff --git a/src/components/Spinner/PdapSpinner.vue b/src/components/Spinner/PdapSpinner.vue
index 6a359e9..85ec110 100644
--- a/src/components/Spinner/PdapSpinner.vue
+++ b/src/components/Spinner/PdapSpinner.vue
@@ -1,8 +1,7 @@
 <template>
-	<div class="pdap-spinner">
-		<Transition appear>
+	<Transition appear>
+		<div v-if="show" class="pdap-spinner">
 			<svg
-				v-if="show"
 				aria-label="loading"
 				:width="size"
 				:height="size"
@@ -22,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 f4b77b0..5078862 100644
--- a/src/components/Spinner/__snapshots__/spinner.spec.ts.snap
+++ b/src/components/Spinner/__snapshots__/spinner.spec.ts.snap
@@ -1,54 +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`] = `
-<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>
+<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>
 `;