fix: spinner render logic (#94)

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">

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>
 `;