test: fix loading

Author: Barbapapazes

src/components/Button/__snapshots__/Button.test.ts.snap

@@ -396,7 +396,7 @@ exports[`button > renders with loading and avatar correctly 1`] = `
   
   
   <span
-    class="inline-block shrink-0 size-5 opacity-0"
+    class="inline-block i-lucide-loader shrink-0 size-5 opacity-0"
   />
   
   
@@ -424,7 +424,7 @@ exports[`button > renders with loading correctly 1`] = `
   
   
   <span
-    class="inline-block shrink-0 size-5 opacity-0"
+    class="inline-block i-lucide-loader shrink-0 size-5 opacity-0"
   />
   
   
@@ -472,7 +472,7 @@ exports[`button > renders with loading trailing and avatar correctly 1`] = `
   
   
   <span
-    class="inline-block shrink-0 size-5 opacity-0"
+    class="inline-block i-lucide-loader shrink-0 size-5 opacity-0"
   />
   
   
@@ -500,7 +500,7 @@ exports[`button > renders with loading trailing correctly 1`] = `
   
   
   <span
-    class="inline-block shrink-0 size-5 opacity-0"
+    class="inline-block i-lucide-loader shrink-0 size-5 opacity-0"
   />
   
   
@@ -523,7 +523,7 @@ exports[`button > renders with loadingIcon correctly 1`] = `
   
   
   <span
-    class="inline-block shrink-0 size-5 opacity-0"
+    class="inline-block i-lucide-loader shrink-0 size-5 opacity-0"
   />
   
   

src/components/CommandPalette/__snapshots__/CommandPalette.test.ts.snap

@@ -536,7 +536,7 @@ exports[`commandPalette > renders with labelKey correctly 1`] = `
 
 exports[`commandPalette > renders with loading correctly 1`] = `
 "<div dir="ltr" class="flex flex-col min-h-0 min-w-0 divide-y divide-(--ui-border)">
-  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-(--ui-text-highlighted) bg-transparent ps-10" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-3"><!--v-if--></span>
+  <div class="relative inline-flex items-center [&amp;>input]:h-12"><input type="text" placeholder="Type a command or search..." class="w-full rounded-[calc(var(--ui-radius)*1.5)] border-0 placeholder:text-(--ui-text-dimmed) focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors px-3 py-2 text-sm gap-2 text-(--ui-text-highlighted) bg-transparent ps-10" autocomplete="off" aria-disabled="false" value=""><span class="absolute inset-y-0 start-0 flex items-center ps-3"><span class="inline-block i-lucide-loader shrink-0 text-(--ui-text-dimmed) size-5 animate-spin"></span></span>
     <!--v-if-->
   </div>
   <div role="listbox" aria-orientation="vertical" aria-multiselectable="false" data-orientation="vertical" class="relative overflow-hidden flex flex-col">

src/components/Input/__snapshots__/Input.test.ts.snap

@@ -313,20 +313,8 @@ exports[`input > renders with loading and avatar correctly 1`] = `
   >
     
     <span
-      class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"
-    >
-      
-      <img
-        class="h-full w-full rounded-[inherit] object-cover"
-        role="img"
-        src="https://github.com/benjamincanac.png"
-        style="display: none;"
-      />
-      <span
-        class="font-medium leading-none text-(--ui-text-muted) truncate"
-      />
-      
-    </span>
+      class="inline-block i-lucide-loader shrink-0 text-(--ui-text-dimmed) size-5 animate-spin"
+    />
     
   </span>
   <!--v-if-->
@@ -348,7 +336,9 @@ exports[`input > renders with loading correctly 1`] = `
     class="absolute inset-y-0 start-0 flex items-center ps-2.5"
   >
     
-    <!--v-if-->
+    <span
+      class="inline-block i-lucide-loader shrink-0 text-(--ui-text-dimmed) size-5 animate-spin"
+    />
     
   </span>
   <!--v-if-->
@@ -391,7 +381,9 @@ exports[`input > renders with loading trailing and avatar correctly 1`] = `
     class="absolute inset-y-0 end-0 flex items-center pe-2.5"
   >
     
-    <!--v-if-->
+    <span
+      class="inline-block i-lucide-loader shrink-0 text-(--ui-text-dimmed) size-5"
+    />
     
   </span>
 </div>
@@ -413,7 +405,9 @@ exports[`input > renders with loading trailing correctly 1`] = `
     class="absolute inset-y-0 end-0 flex items-center pe-2.5"
   >
     
-    <!--v-if-->
+    <span
+      class="inline-block i-lucide-loader shrink-0 text-(--ui-text-dimmed) size-5 animate-spin"
+    />
     
   </span>
 </div>
@@ -435,7 +429,9 @@ exports[`input > renders with loadingIcon correctly 1`] = `
     class="absolute inset-y-0 start-0 flex items-center ps-2.5"
   >
     
-    <!--v-if-->
+    <span
+      class="inline-block i-lucide-loader shrink-0 text-(--ui-text-dimmed) size-5 animate-spin"
+    />
     
   </span>
   <!--v-if-->

src/components/Select/__snapshots__/Select.test.ts.snap

@@ -508,37 +508,37 @@ exports[`select > renders with leadingIcon correctly 1`] = `
 `;
 
 exports[`select > renders with loading and avatar correctly 1`] = `
-"<button role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) px-2.5 py-1.5 text-sm gap-1.5 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"></span></span></span><span class="truncate text-(--ui-text-dimmed)">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="inline-block i-lucide-chevron-down shrink-0 text-(--ui-text-dimmed) size-5"></span></span></button>
+"<button role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) px-2.5 py-1.5 text-sm gap-1.5 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-block i-lucide-loader shrink-0 text-(--ui-text-dimmed) size-5 animate-spin"></span></span><span class="truncate text-(--ui-text-dimmed)">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="inline-block i-lucide-loader shrink-0 text-(--ui-text-dimmed) size-5"></span></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!---->"
 `;
 
 exports[`select > renders with loading correctly 1`] = `
-"<button role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) px-2.5 py-1.5 text-sm gap-1.5 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><!--v-if--></span><span class="truncate text-(--ui-text-dimmed)">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="inline-block i-lucide-chevron-down shrink-0 text-(--ui-text-dimmed) size-5"></span></span></button>
+"<button role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) px-2.5 py-1.5 text-sm gap-1.5 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-block i-lucide-loader shrink-0 text-(--ui-text-dimmed) size-5 animate-spin"></span></span><span class="truncate text-(--ui-text-dimmed)">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="inline-block i-lucide-loader shrink-0 text-(--ui-text-dimmed) size-5"></span></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!---->"
 `;
 
 exports[`select > renders with loading trailing and avatar correctly 1`] = `
-"<button role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) px-2.5 py-1.5 text-sm gap-1.5 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"></span></span></span><span class="truncate text-(--ui-text-dimmed)">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><!--v-if--></span></button>
+"<button role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) px-2.5 py-1.5 text-sm gap-1.5 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-flex items-center justify-center select-none overflow-hidden rounded-full align-middle bg-(--ui-bg-elevated) size-5 text-[10px] shrink-0"><img role="img" src="https://github.com/benjamincanac.png" class="h-full w-full rounded-[inherit] object-cover" style="display: none;"><span class="font-medium leading-none text-(--ui-text-muted) truncate"></span></span></span><span class="truncate text-(--ui-text-dimmed)">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="inline-block i-lucide-loader shrink-0 text-(--ui-text-dimmed) size-5"></span></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!---->"
 `;
 
 exports[`select > renders with loading trailing correctly 1`] = `
 "<button role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) px-2.5 py-1.5 text-sm gap-1.5 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) pe-9">
-  <!--v-if--><span class="truncate text-(--ui-text-dimmed)">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><!--v-if--></span>
+  <!--v-if--><span class="truncate text-(--ui-text-dimmed)">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="inline-block i-lucide-loader shrink-0 text-(--ui-text-dimmed) size-5 animate-spin"></span></span>
 </button>
 <!--teleport start-->
 <!--teleport end-->
 <!---->"
 `;
 
 exports[`select > renders with loadingIcon correctly 1`] = `
-"<button role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) px-2.5 py-1.5 text-sm gap-1.5 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9" loadingicon="i-lucide-sparkles"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><!--v-if--></span><span class="truncate text-(--ui-text-dimmed)">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="inline-block i-lucide-chevron-down shrink-0 text-(--ui-text-dimmed) size-5"></span></span></button>
+"<button role="combobox" type="button" aria-controls="reka-select-content-v-0" aria-expanded="false" aria-required="false" aria-autocomplete="none" dir="ltr" data-state="closed" data-placeholder="" class="relative group rounded-[calc(var(--ui-radius)*1.5)] inline-flex items-center focus:outline-none disabled:cursor-not-allowed disabled:opacity-75 transition-colors text-(--ui-text-highlighted) bg-(--ui-bg) ring ring-inset ring-(--ui-border-accented) px-2.5 py-1.5 text-sm gap-1.5 focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--ui-primary) ps-9 pe-9" loadingicon="i-lucide-sparkles"><span class="absolute inset-y-0 start-0 flex items-center ps-2.5"><span class="inline-block i-lucide-loader shrink-0 text-(--ui-text-dimmed) size-5 animate-spin"></span></span><span class="truncate text-(--ui-text-dimmed)">&nbsp;</span><span class="absolute inset-y-0 end-0 flex items-center pe-2.5"><span class="inline-block i-lucide-loader shrink-0 text-(--ui-text-dimmed) size-5"></span></span></button>
 <!--teleport start-->
 <!--teleport end-->
 <!---->"