How do i add a skeleton in my EditorJs project in React?

Question

const EditorJSComponent: React.FC<EditorProps> = ({
  onChange,
  editorblock,
}) => {
  const ref = useRef<EditorJS | null>(null);
  const [loading, setLoading] = useState(true);
  //Initialize editorjs
  useEffect(() => {
    //Initialize editorjs if we don't have a reference
    if (!ref.current) {
      const editor = new EditorJS({
        holder: editorblock,
        tools: EDITOR_JS_TOOLS,
        // data: data,
        placeholder: 'Your story here...', // Placeholder text
        onReady: () => {
          console.log('Now u can enter your blog content');
          setLoading(false);
        },
        async onChange(api) {
          const data = await api.saver.save();
          onChange(data);
        },
      });
      ref.current = editor;
    }

    //Add a return function to handle cleanup
    return () => {
      if (ref.current && ref.current.destroy) {
        ref.current.destroy();
      }
    };
  }, []);

  return loading ? (
    <div className='text-[18px] md:text-[20px] font-serif' id={editorblock} />
  ) : (
    <div>Loading...</div>
  );
};

This is the code i thought of.. but the Dom just shows the Loading bar.. i guess it has something to do with using the loading state in the useEffect hook... I also tried a few other ways like creating a hook and using its function here but that also didnt work! How do i add this functionality.. of showing a skeleton when the Editor is not ready??**