Ability to show a spinner while the editor is loading

Is your feature request related to a problem? Please describe.

Feature request, unless a solution already exists.

I am currently “self hosting” the tinymce script with unpkg by supplying the prop tinymceScriptSrc="https://unpkg.com/tinymce@5.6.1/tinymce.min.js" to the Editor component.

I noticed that it might take some time until the editor is fully loaded and gets rendered. It’s an up and down. Sometimes faster, sometimes slower. This means that users stare at a nearly blank page until the editor is rendered.

Describe the solution you’d like

I would like to improve the user experience by showing a spinner. They should know that something is happening. However I could not find a event callback that is actually called when the editor finished loading and renders.

 <Editor
      tinymceScriptSrc="https://unpkg.com/tinymce@5.6.1/tinymce.min.js"
      onShow={() => console.log("onShow")}
      onBeforeRenderUI={() => console.log("onBeforeRenderUI")}
      onActivate={() => console.log("onActivate")}
      onPreProcess={(e) => console.log("onPreProcess")}
      onPostProcess={(e) => console.log("onPostProcess")}
      onLoadContent={() => console.log("onLoadContent")}
      value={props.value}
      onEditorChange={props.onChange}
      init={...}
    />

None of the callbacks above logs to the console so I assume that none is called.

Am I missing something or would it be possible to have a callback that is called when the editor is actually rendered. Without a callback like this, I see no possibility to know when the spinner should be hidden.

Describe alternatives you’ve considered

I also considered to load the tinymce script in a <script /> tag myself. However all the themes, plugins etc. are still first loaded when the Editor component is rendered. So this does not really improve the load time.

[tiny-james]

Since someone asked, here’s an example with a spinner: https://codesandbox.io/s/tinymcereact-with-loading-spinner-n4e7b

[tiny-james]

Thanks for the bug report.

The reason none of those events are firing is that the editor does not add the listeners until the init event fires.

You could still implement a spinner using the setup function (in the init prop) and the onInit prop: https://codesandbox.io/s/tinymcereact-forked-n4e7b?file=/src/index.js

Also with the current release you could get those other events by registering them in the setup function however I admit it’s a bug for us to have those event handlers but only register them after the init event fires effectively making them useless. I will put together a PR to register event handlers on setup.