loading state doesn't show

[Ahmed-Nassef]

so in the demo there is a blurred version of the image with a spinner
but that doesn't show.

my question is how to add a loading state?

[ziadevcom]

I was facing the issue.

Just needed to import the stylesheet manually.

import "quill-image-uploader/dist/quill.imageUploader.min.css"

[Ahmed-Nassef]

thank u I didn't see that!

Edit: I rushed closing the issue
I imported the file and still can't see the loading state

[ziadevcom]

Can you host the app code somewhere where i can see? I told you what solved it for me. Are you sure that stylesheet is even being bundled ?

[Ahmed-Nassef]

is that enought code?

import "react-quill/dist/quill.snow.css";
import "quill-image-uploader/dist/quill.imageUploader.min.css";
import {ALLOWED_EDITOR_FORMATS} from "./constants"

const Image = Quill.import("formats/image");
Image.className = "quill-image";

Quill.register("modules/imageUploader", ImageUploader);
Quill.register(Image, true);

const quillModule = {
  toolbar: {
    container: TOOLBAR_OPTION,
  },

  imageUploader: {
    upload: async (file: File) => {
      return new Promise(async (resolve, reject) => {
        const formData = new FormData();

        formData.append("image", file);

        try {
          const res = await fetch("/api/decks/images", {
            method: "POST",
            body: formData,
          });

          const data= await res.json();

          if (data.success) {
            resolve(data.image_url);
          } else {
            throw Error(data.message);
          }
        } catch (error) {
          reject();
          console.error(error);
        } 
      });
    },
  },
};

const myApp = () => {
const [value, setValue] = useState('')
return (
    <ReactQuill
      value={value}
      onChange={setValue}
      formats={ALLOWED_EDITOR_FORMATS}
      modules={quillModule}
      ref={editorRef}
    />
)
}

[singleseeker]

Try to add imageBlot in your ALLOWED_EDITOR_FORMATS.