CKEditor: How do I add a graphic preloader for an iframe dialog in a custom plugin?

Question

I have created a CKEditor (4.4.4) plugin that utilizes an iframedialog element. The issue I'm having is that the contents of the iframe in the dialog (properties) editor can take several seconds to load. In the meantime, the user is just sitting there wondering where the UI is until it magically appears.

Ideally, I would like to hide the iframe while it loads, display a preloader graphic, and hide the graphic and display the iframe after it loads.

I've looked into using the "setup" and "onContentLoad" functions of the element definition to handle this, I can't seem to find a way to get it working. I also (unsuccessfully) looked into making changes to plugins/iframedialog/plugin.js directly, but I would like to avoid doing that if possible.

Answer 1

Turns out " setup " was the wrong thing to use. " onShow " was what I was looking for.

Here's how I accomplished this:

onShow: function (e) {
    var iframeId = this._.frameId;
    loader = setTimeout(function () {
        $("#" + iframeId).hide();
        $("#" + iframeId).after("<div id='" + iframeId + "-loader' class='preloader-small'></div>");
    }, 250);
},

onContentLoad: function () {
    clearTimeout(loader);
    $("#" + this._.frameId + "-loader").hide();
    $("#" + this._.frameId).show();
}

I had to use setTimeout or else it didn't work at all. I could set it as low as "1" and it would still work, but I opted for a higher number so a speedy/cached load wouldn't display the graphic.