diff --git a/apps/client/src/features/editor/styles/media.css b/apps/client/src/features/editor/styles/media.css
index ac9cf3f7..1011f35a 100644
--- a/apps/client/src/features/editor/styles/media.css
+++ b/apps/client/src/features/editor/styles/media.css
@@ -37,5 +37,28 @@
     font-size: var(--mantine-font-size-md);
     line-height: var(--mantine-line-height-md);
   }
+
+  .media-pulse {
+    animation: media-pulse 1.2s ease-in-out infinite;
+
+    @mixin light {
+      background: linear-gradient(-90deg, var(--mantine-color-gray-3) 0%, var(--mantine-color-gray-1) 50%, var(--mantine-color-gray-3) 100%);
+      background-size: 400% 400%;
+    }
+
+    @mixin dark {
+      background: linear-gradient(-90deg, var(--mantine-color-dark-6) 0%, var(--mantine-color-dark-5) 50%, var(--mantine-color-dark-6) 100%);
+      background-size: 400% 400%;
+    }
+
+    @keyframes media-pulse {
+      0% {
+        background-position: 0% 0%;
+      }
+      100% {
+        background-position: -135% 0%;
+      }
+    }
+  }
 }
 
diff --git a/packages/editor-ext/src/lib/drawio.ts b/packages/editor-ext/src/lib/drawio.ts
index 8b000bcc..4968912b 100644
--- a/packages/editor-ext/src/lib/drawio.ts
+++ b/packages/editor-ext/src/lib/drawio.ts
@@ -321,12 +321,11 @@ export const Drawio = Node.create<DrawioOptions>({
 
       // Show skeleton background while image loads from server
       dom.style.pointerEvents = "none";
-      dom.style.background =
-        "light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6))";
+      el.classList.add("media-pulse");
 
       el.onload = () => {
         dom.style.pointerEvents = "";
-        dom.style.background = "";
+        el.classList.remove("media-pulse");
       };
 
       return nodeView;
diff --git a/packages/editor-ext/src/lib/excalidraw.ts b/packages/editor-ext/src/lib/excalidraw.ts
index de08b677..71c881f1 100644
--- a/packages/editor-ext/src/lib/excalidraw.ts
+++ b/packages/editor-ext/src/lib/excalidraw.ts
@@ -321,12 +321,11 @@ export const Excalidraw = Node.create<ExcalidrawOptions>({
 
       // Show skeleton background while image loads from server
       dom.style.pointerEvents = "none";
-      dom.style.background =
-        "light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6))";
+      el.classList.add("media-pulse");
 
       el.onload = () => {
         dom.style.pointerEvents = "";
-        dom.style.background = "";
+        el.classList.remove("media-pulse");
       };
 
       return nodeView;
diff --git a/packages/editor-ext/src/lib/image/image.ts b/packages/editor-ext/src/lib/image/image.ts
index d5d42921..6a921926 100644
--- a/packages/editor-ext/src/lib/image/image.ts
+++ b/packages/editor-ext/src/lib/image/image.ts
@@ -362,12 +362,11 @@ export const TiptapImage = Image.extend<ImageOptions>({
 
       // Show skeleton background while image loads from server
       dom.style.pointerEvents = "none";
-      dom.style.background =
-        "light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6))";
+      el.classList.add("media-pulse");
 
       el.onload = () => {
         dom.style.pointerEvents = "";
-        dom.style.background = "";
+        el.classList.remove("media-pulse");
       };
 
       return nodeView;
diff --git a/packages/editor-ext/src/lib/video/video.ts b/packages/editor-ext/src/lib/video/video.ts
index 9102324d..c6d7356b 100644
--- a/packages/editor-ext/src/lib/video/video.ts
+++ b/packages/editor-ext/src/lib/video/video.ts
@@ -329,12 +329,11 @@ export const TiptapVideo = Node.create<VideoOptions>({
 
       // Show skeleton background while video loads from server
       dom.style.pointerEvents = "none";
-      dom.style.background =
-        "light-dark(var(--mantine-color-gray-2), var(--mantine-color-dark-6))";
+      el.classList.add("media-pulse");
 
       el.onloadedmetadata = () => {
         dom.style.pointerEvents = "";
-        dom.style.background = "";
+        el.classList.remove("media-pulse");
       };
 
       return nodeView;