diff --git a/.gitignore b/.gitignore
index d6723a32..ff05ce71 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,7 @@
 # Dependencies & Logs
 # -------------------------
 node_modules/
+.pnpm-store/
 logs/
 .yarn/*
 *.log
diff --git a/packages/icons/src/assets/default/spinner.svg b/packages/icons/src/assets/default/spinner.svg
index 8ef97004..5cd479c3 100644
--- a/packages/icons/src/assets/default/spinner.svg
+++ b/packages/icons/src/assets/default/spinner.svg
@@ -1,35 +1,21 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="currentColor">
-  <rect width="2" height="5" x="8" y=".5" rx="1" opacity="0.5">
-    <animate attributeName="opacity" values="1;0" dur="1s" begin="0s" repeatCount="indefinite" calcMode="linear" />
-  </rect>
-  <rect width="2" height="5" x="12.243" y="2.257" rx="1" transform="rotate(45 13.243 4.757)" opacity="0.45">
-    <animate attributeName="opacity" values="1;0" dur="1s" begin="0.125s" repeatCount="indefinite" calcMode="linear" />
-  </rect>
-  <rect width="5" height="2" x="12.5" y="8" rx="1" opacity="0.4">
-    <animate attributeName="opacity" values="1;0" dur="1s" begin="0.25s" repeatCount="indefinite" calcMode="linear" />
-  </rect>
-  <rect width="5" height="2" x="10.743" y="12.243" rx="1" transform="rotate(45 13.243 13.243)" opacity="0.35">
-    <animate attributeName="opacity" values="1;0" dur="1s" begin="0.375s" repeatCount="indefinite" calcMode="linear" />
-  </rect>
-  <rect width="2" height="5" x="8" y="12.5" rx="1" opacity="0.3">
-    <animate attributeName="opacity" values="1;0" dur="1s" begin="0.5s" repeatCount="indefinite" calcMode="linear" />
-  </rect>
-  <rect width="2" height="5" x="3.757" y="10.743" rx="1" transform="rotate(45 4.757 13.243)" opacity="0.25">
-    <animate attributeName="opacity" values="1;0" dur="1s" begin="0.625s" repeatCount="indefinite" calcMode="linear" />
-  </rect>
-  <rect width="5" height="2" x=".5" y="8" rx="1" opacity="0.15">
-    <animate attributeName="opacity" values="1;0" dur="1s" begin="0.75s" repeatCount="indefinite" calcMode="linear" />
-  </rect>
-  <rect
-    width="5"
-    height="2"
-    x="2.257"
-    y="3.757"
-    fill-rule="nonzero"
-    rx="1"
-    transform="rotate(45 4.757 4.757)"
-    opacity="0.1"
-  >
-    <animate attributeName="opacity" values="1;0" dur="1s" begin="0.875s" repeatCount="indefinite" calcMode="linear" />
-  </rect>
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2">
+  <style>
+    @keyframes media-spinner-fade {
+      from { opacity: 1; }
+      to { opacity: 0; }
+    }
+
+    .media-spinner__segment {
+      animation: var(--media-spinner-animation, media-spinner-fade 1s linear infinite);
+      animation-delay: var(--media-spinner-delay);
+    }
+  </style>
+  <line class="media-spinner__segment" x1="9" y1="1.5" x2="9" y2="4.5" opacity="0.5" style="--media-spinner-delay:0s" />
+  <line class="media-spinner__segment" x1="14.5" y1="3.5" x2="12.5" y2="5.5" opacity="0.45" style="--media-spinner-delay:0.125s" />
+  <line class="media-spinner__segment" x1="16.5" y1="9" x2="13.5" y2="9" opacity="0.4" style="--media-spinner-delay:0.25s" />
+  <line class="media-spinner__segment" x1="14.5" y1="14.5" x2="12.5" y2="12.5" opacity="0.35" style="--media-spinner-delay:0.375s" />
+  <line class="media-spinner__segment" x1="9" y1="16.5" x2="9" y2="13.5" opacity="0.3" style="--media-spinner-delay:0.5s" />
+  <line class="media-spinner__segment" x1="3.5" y1="14.5" x2="5.5" y2="12.5" opacity="0.25" style="--media-spinner-delay:0.625s" />
+  <line class="media-spinner__segment" x1="1.5" y1="9" x2="4.5" y2="9" opacity="0.15" style="--media-spinner-delay:0.75s" />
+  <line class="media-spinner__segment" x1="3.5" y1="3.5" x2="5.5" y2="5.5" opacity="0.1" style="--media-spinner-delay:0.875s" />
 </svg>
diff --git a/packages/icons/src/assets/minimal/spinner.svg b/packages/icons/src/assets/minimal/spinner.svg
index 8ef97004..5cd479c3 100644
--- a/packages/icons/src/assets/minimal/spinner.svg
+++ b/packages/icons/src/assets/minimal/spinner.svg
@@ -1,35 +1,21 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="currentColor">
-  <rect width="2" height="5" x="8" y=".5" rx="1" opacity="0.5">
-    <animate attributeName="opacity" values="1;0" dur="1s" begin="0s" repeatCount="indefinite" calcMode="linear" />
-  </rect>
-  <rect width="2" height="5" x="12.243" y="2.257" rx="1" transform="rotate(45 13.243 4.757)" opacity="0.45">
-    <animate attributeName="opacity" values="1;0" dur="1s" begin="0.125s" repeatCount="indefinite" calcMode="linear" />
-  </rect>
-  <rect width="5" height="2" x="12.5" y="8" rx="1" opacity="0.4">
-    <animate attributeName="opacity" values="1;0" dur="1s" begin="0.25s" repeatCount="indefinite" calcMode="linear" />
-  </rect>
-  <rect width="5" height="2" x="10.743" y="12.243" rx="1" transform="rotate(45 13.243 13.243)" opacity="0.35">
-    <animate attributeName="opacity" values="1;0" dur="1s" begin="0.375s" repeatCount="indefinite" calcMode="linear" />
-  </rect>
-  <rect width="2" height="5" x="8" y="12.5" rx="1" opacity="0.3">
-    <animate attributeName="opacity" values="1;0" dur="1s" begin="0.5s" repeatCount="indefinite" calcMode="linear" />
-  </rect>
-  <rect width="2" height="5" x="3.757" y="10.743" rx="1" transform="rotate(45 4.757 13.243)" opacity="0.25">
-    <animate attributeName="opacity" values="1;0" dur="1s" begin="0.625s" repeatCount="indefinite" calcMode="linear" />
-  </rect>
-  <rect width="5" height="2" x=".5" y="8" rx="1" opacity="0.15">
-    <animate attributeName="opacity" values="1;0" dur="1s" begin="0.75s" repeatCount="indefinite" calcMode="linear" />
-  </rect>
-  <rect
-    width="5"
-    height="2"
-    x="2.257"
-    y="3.757"
-    fill-rule="nonzero"
-    rx="1"
-    transform="rotate(45 4.757 4.757)"
-    opacity="0.1"
-  >
-    <animate attributeName="opacity" values="1;0" dur="1s" begin="0.875s" repeatCount="indefinite" calcMode="linear" />
-  </rect>
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2">
+  <style>
+    @keyframes media-spinner-fade {
+      from { opacity: 1; }
+      to { opacity: 0; }
+    }
+
+    .media-spinner__segment {
+      animation: var(--media-spinner-animation, media-spinner-fade 1s linear infinite);
+      animation-delay: var(--media-spinner-delay);
+    }
+  </style>
+  <line class="media-spinner__segment" x1="9" y1="1.5" x2="9" y2="4.5" opacity="0.5" style="--media-spinner-delay:0s" />
+  <line class="media-spinner__segment" x1="14.5" y1="3.5" x2="12.5" y2="5.5" opacity="0.45" style="--media-spinner-delay:0.125s" />
+  <line class="media-spinner__segment" x1="16.5" y1="9" x2="13.5" y2="9" opacity="0.4" style="--media-spinner-delay:0.25s" />
+  <line class="media-spinner__segment" x1="14.5" y1="14.5" x2="12.5" y2="12.5" opacity="0.35" style="--media-spinner-delay:0.375s" />
+  <line class="media-spinner__segment" x1="9" y1="16.5" x2="9" y2="13.5" opacity="0.3" style="--media-spinner-delay:0.5s" />
+  <line class="media-spinner__segment" x1="3.5" y1="14.5" x2="5.5" y2="12.5" opacity="0.25" style="--media-spinner-delay:0.625s" />
+  <line class="media-spinner__segment" x1="1.5" y1="9" x2="4.5" y2="9" opacity="0.15" style="--media-spinner-delay:0.75s" />
+  <line class="media-spinner__segment" x1="3.5" y1="3.5" x2="5.5" y2="5.5" opacity="0.1" style="--media-spinner-delay:0.875s" />
 </svg>
diff --git a/packages/skins/src/default/css/components/buffering.css b/packages/skins/src/default/css/components/buffering.css
index 347f58a0..169cc195 100644
--- a/packages/skins/src/default/css/components/buffering.css
+++ b/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;
   }
diff --git a/packages/skins/src/default/css/components/preview.css b/packages/skins/src/default/css/components/preview.css
index 03bfafc8..0b7220c3 100644
--- a/packages/skins/src/default/css/components/preview.css
+++ b/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;
diff --git a/packages/skins/src/default/tailwind/components/buffering.ts b/packages/skins/src/default/tailwind/components/buffering.ts
index 53951d92..8456873a 100644
--- a/packages/skins/src/default/tailwind/components/buffering.ts
+++ b/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',
 };
diff --git a/packages/skins/src/default/tailwind/components/preview.ts b/packages/skins/src/default/tailwind/components/preview.ts
index 66713fcd..0c892334 100644
--- a/packages/skins/src/default/tailwind/components/preview.ts
+++ b/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'
   ),
 };
diff --git a/packages/skins/src/minimal/css/components/buffering.css b/packages/skins/src/minimal/css/components/buffering.css
index 8fde1515..8849ca20 100644
--- a/packages/skins/src/minimal/css/components/buffering.css
+++ b/packages/skins/src/minimal/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;
   }
diff --git a/packages/skins/src/minimal/css/components/preview.css b/packages/skins/src/minimal/css/components/preview.css
index c326f342..679a3b4d 100644
--- a/packages/skins/src/minimal/css/components/preview.css
+++ b/packages/skins/src/minimal/css/components/preview.css
@@ -37,6 +37,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;
diff --git a/packages/skins/src/minimal/tailwind/components/buffering.ts b/packages/skins/src/minimal/tailwind/components/buffering.ts
index 7e5c9ad9..c3852bb8 100644
--- a/packages/skins/src/minimal/tailwind/components/buffering.ts
+++ b/packages/skins/src/minimal/tailwind/components/buffering.ts
@@ -1,2 +1,2 @@
 export const bufferingIndicator =
-  'absolute inset-0 hidden items-center justify-center pointer-events-none text-white data-visible:flex';
+  'absolute inset-0 hidden items-center justify-center pointer-events-none text-white not-data-visible:[--media-spinner-animation:none] data-visible:flex';
diff --git a/packages/skins/src/minimal/tailwind/components/preview.ts b/packages/skins/src/minimal/tailwind/components/preview.ts
index 3f841a63..2689c3a4 100644
--- a/packages/skins/src/minimal/tailwind/components/preview.ts
+++ b/packages/skins/src/minimal/tailwind/components/preview.ts
@@ -8,6 +8,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'
   ),
 };