fix pulse

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%;

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}

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 {

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={{

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%;

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={{