From c599b6a9c197a0905c9caf0cea7a807d3bff182f Mon Sep 17 00:00:00 2001
From: Philipinho <16838612+Philipinho@users.noreply.github.com>
Date: Sat, 28 Mar 2026 11:14:40 +0000
Subject: [PATCH] fix pulse

---
 .../features/editor/components/audio/audio-view.module.css    | 4 ++++
 .../src/features/editor/components/audio/audio-view.tsx       | 2 +-
 .../features/editor/components/image/image-view.module.css    | 3 +++
 .../src/features/editor/components/image/image-view.tsx       | 1 +
 .../features/editor/components/video/video-view.module.css    | 4 ++++
 .../src/features/editor/components/video/video-view.tsx       | 1 +
 6 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/apps/client/src/features/editor/components/audio/audio-view.module.css b/apps/client/src/features/editor/components/audio/audio-view.module.css
index 191a4302..5773ea82 100644
--- a/apps/client/src/features/editor/components/audio/audio-view.module.css
+++ b/apps/client/src/features/editor/components/audio/audio-view.module.css
@@ -5,6 +5,9 @@
   max-width: 100%;
   border-radius: 8px;
   overflow: hidden;
+}
+
+.skeleton {
   animation: pulse 1.2s ease-in-out infinite;
 
   @mixin light {
@@ -26,6 +29,7 @@
     }
   }
 }
+
 .audio {
   display: block;
   width: 100%;
diff --git a/apps/client/src/features/editor/components/audio/audio-view.tsx b/apps/client/src/features/editor/components/audio/audio-view.tsx
index 291442d3..da08ccaa 100644
--- a/apps/client/src/features/editor/components/audio/audio-view.tsx
+++ b/apps/client/src/features/editor/components/audio/audio-view.tsx
@@ -23,7 +23,7 @@ export default function AudioView(props: NodeViewProps) {
 
   return (
     <NodeViewWrapper data-drag-handle>
-      <div className={classes.audioWrapper}>
+      <div className={`${classes.audioWrapper} ${!src ? classes.skeleton : ''}`}>
         {src && (
           <audio
             className={classes.audio}
diff --git a/apps/client/src/features/editor/components/image/image-view.module.css b/apps/client/src/features/editor/components/image/image-view.module.css
index d326ee5a..987ec0d7 100644
--- a/apps/client/src/features/editor/components/image/image-view.module.css
+++ b/apps/client/src/features/editor/components/image/image-view.module.css
@@ -5,6 +5,9 @@
   max-width: 100%;
   border-radius: 8px;
   overflow: hidden;
+}
+
+.skeleton {
   animation: pulse 1.2s ease-in-out infinite;
 
   @mixin light {
diff --git a/apps/client/src/features/editor/components/image/image-view.tsx b/apps/client/src/features/editor/components/image/image-view.tsx
index defb64c4..7ec3e26f 100644
--- a/apps/client/src/features/editor/components/image/image-view.tsx
+++ b/apps/client/src/features/editor/components/image/image-view.tsx
@@ -33,6 +33,7 @@ export default function ImageView(props: NodeViewProps) {
         className={clsx(
           selected && "ProseMirror-selectednode",
           classes.imageWrapper,
+          !src && classes.skeleton,
           alignClass,
         )}
         style={{
diff --git a/apps/client/src/features/editor/components/video/video-view.module.css b/apps/client/src/features/editor/components/video/video-view.module.css
index 8d1d28c2..f1a51846 100644
--- a/apps/client/src/features/editor/components/video/video-view.module.css
+++ b/apps/client/src/features/editor/components/video/video-view.module.css
@@ -5,6 +5,9 @@
   max-width: 100%;
   border-radius: 8px;
   overflow: hidden;
+}
+
+.skeleton {
   animation: pulse 1.2s ease-in-out infinite;
 
   @mixin light {
@@ -26,6 +29,7 @@
     }
   }
 }
+
 .video {
   display: block;
   width: 100%;
diff --git a/apps/client/src/features/editor/components/video/video-view.tsx b/apps/client/src/features/editor/components/video/video-view.tsx
index e2473afc..1e662640 100644
--- a/apps/client/src/features/editor/components/video/video-view.tsx
+++ b/apps/client/src/features/editor/components/video/video-view.tsx
@@ -33,6 +33,7 @@ export default function VideoView(props: NodeViewProps) {
         className={clsx(
           selected && "ProseMirror-selectednode",
           classes.videoWrapper,
+          !src && classes.skeleton,
           alignClass,
         )}
         style={{