fix: showing image upload for other users

packages/editor/src/core/extensions/custom-image/components/image-block.tsx

@@ -42,6 +42,7 @@ type CustomImageBlockProps = CustomImageNodeViewProps & {
   setFailedToLoadImage: (isError: boolean) => void;
   editorContainer: HTMLDivElement | null;
   setEditorContainer: (editorContainer: HTMLDivElement | null) => void;
+  imageBeingUploadedByOtherUser: boolean;
 };
 
 export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
@@ -56,6 +57,7 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
     editor,
     editorContainer,
     setEditorContainer,
+    imageBeingUploadedByOtherUser,
   } = props;
   const { src: remoteImageSrc, width, height, aspectRatio } = node.attrs;
   // states
@@ -187,6 +189,18 @@ export const CustomImageBlock: React.FC<CustomImageBlockProps> = (props) => {
   // show the preview image from the file system if the remote image's src is not set
   const displayedImageSrc = remoteImageSrc ?? imageFromFileSystem;
 
+  // if someone else is uploading the image, we show the loader with the same size as the image from the initially loaded attrs
+  if (imageBeingUploadedByOtherUser) {
+    return (
+      <div className="group/image-component relative inline-block max-w-full">
+        <div
+          className="animate-pulse bg-custom-background-80 rounded-md"
+          style={{ width: size.width, height: size.height }}
+        />
+      </div>
+    );
+  }
+
   return (
     <div
       ref={containerRef}

packages/editor/src/core/extensions/custom-image/components/image-node.tsx

@@ -23,6 +23,7 @@ export const CustomImageNode = (props: CustomImageNodeViewProps) => {
 
   const [editorContainer, setEditorContainer] = useState<HTMLDivElement | null>(null);
   const imageComponentRef = useRef<HTMLDivElement>(null);
+  const [imageBeingUploadedByOtherUser, setImageBeingUploadedByOtherUser] = useState(false);
 
   useEffect(() => {
     const closestEditorContainer = imageComponentRef.current?.closest(".editor-container");
@@ -44,13 +45,22 @@ export const CustomImageNode = (props: CustomImageNodeViewProps) => {
     } else {
       setIsUploaded(false);
     }
-  }, [node.attrs.src]);
+
+    const nodeWidth = node.attrs.width;
+
+    if (nodeWidth && nodeWidth !== "35%" && !imageFromFileSystem && remoteImageSrc === null) {
+      setImageBeingUploadedByOtherUser(true);
+    } else {
+      setImageBeingUploadedByOtherUser(false);
+    }
+  }, [node.attrs.src, node.attrs.width, node.attrs.height, node.attrs.aspectRatio]);
 
   return (
     <NodeViewWrapper>
       <div className="p-0 mx-0 my-2" data-drag-handle ref={imageComponentRef}>
-        {(isUploaded || imageFromFileSystem) && !failedToLoadImage ? (
+        {((isUploaded || imageFromFileSystem) && !failedToLoadImage) || imageBeingUploadedByOtherUser ? (
           <CustomImageBlock
+            imageBeingUploadedByOtherUser={imageBeingUploadedByOtherUser}
             imageFromFileSystem={imageFromFileSystem}
             editorContainer={editorContainer}
             editor={editor}