Showing a loading spinner before final content

[JavierMartinz]

Hi,

I'm trying to implement an attachment upload feature. Basically, I have it working, but I'd to improve it by showing a loading spinner or a progress bar of that upload. The point is I managed to show the loading spinner, but I don't have a way to replace only that loading spinner node once the upload finishes.

I have recorded a video showing what I expect the feature to be. As you can see, now it's "working" but just because it's replacing the whole content, but I'd like to replace only the spinner so that the user can continue typing.

This is the snippet of code I'm using right now:

const onAddImage = ([file]) => {
    if (!isUploadingImage && file) {
      editor.chain().focus().setUploadingIndicator().run();

      onUploadImage().then((response) => {
        if (!response?.url) return;

          editor
            .chain()
            .focus()
            .setTiptapImage({ 'data-src': response?.url })
            .run();
      });
    }
  };

[JavierMartinz]

I managed to do it using the following piece of code, but I'm not sure if it's the right/optimal way to do so:

const onAddImage = ([file]) => {
    if (!isUploadingImage && file) {

      const position = editor.state.selection.$head.pos;            // get current position

      editor.chain().focus().setUploadingIndicator().run();

      onUploadImage().then((response) => {
        if (!response?.url) return;

          editor
            .chain()
            .focus()
            .setTextSelection({ from: position, to: position + 1 }) // set the position
            .deleteSelection()                                      // remove the spinner, before inserting the image
            .setTiptapImage({ 'data-src': response?.url })
            .run();
      });
    }
  };

[hanspagel]

Looks good to me! Just so you know, the “ProseMirror-way” would be to use decorations:
https://prosemirror.net/examples/upload/

This doesn’t work with collaborative editing/Y.js though, so you’re solution can be better in that case.