fix(icons): avoid hidden spinner animations (#1476)

packages/skins/src/default/css/components/buffering.css

@@ -11,6 +11,10 @@
   color: oklch(1 0 0);
   pointer-events: none;
 
+  &:not([data-visible]) {
+    --media-spinner-animation: none;
+  }
+
   &[data-visible] {
     display: flex;
   }

packages/skins/src/default/css/components/preview.css

@@ -45,6 +45,12 @@
     transition: opacity 150ms ease-out;
   }
 
+  &:not(:has(.media-preview__thumbnail[data-loading])) {
+    & .media-preview__spinner {
+      --media-spinner-animation: none;
+    }
+  }
+
   &:has(.media-preview__thumbnail[data-loading]) {
     & .media-preview__thumbnail {
       opacity: 0;

packages/skins/src/default/tailwind/components/buffering.ts

@@ -1,4 +1,4 @@
 export const bufferingIndicator = {
-  root: 'absolute inset-0 hidden items-center justify-center pointer-events-none text-white data-visible:flex',
+  root: 'absolute inset-0 hidden items-center justify-center pointer-events-none text-white not-data-visible:[--media-spinner-animation:none] data-visible:flex',
   container: 'p-1 rounded-full',
 };

packages/skins/src/default/tailwind/components/preview.ts

@@ -13,6 +13,6 @@ export const preview = {
   spinner: cn(
     'absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 opacity-0',
     'transition-opacity duration-150 ease-out',
-    'group-has-[[role=img][data-loading]]/preview:opacity-100'
+    'group-not-has-[[role=img][data-loading]]/preview:[--media-spinner-animation:none] group-has-[[role=img][data-loading]]/preview:opacity-100'
   ),
 };