Jarring content load

[djmtype]

Thanks for this solution.

However, the content loads after the modal fires which is kind of a problem. It produces a visually jarring effect, especially with images being loaded.

There should be a way to show the modal once the content has been received, and/or transition the modal's height based on the content.

[mikedoubintchik]

Yeah, the plugin is supposed to be a starting point. I tried to create a bit of a nicer UX by adding the loading GIF, but that can definitely be improved upon.

There's a couple of things that we can do right away:
You see the line in the plugin code under plugin/js/wp-post-modal-public.js

modalContent.html('<img class="loading" src="' + $pluginUrl + '/wp-post-modal/public/images/loading.gif" />');

We can remove this line and then add the following code before this line $('.modal').addClass('show', 1000, 'easeOutSine');

showLoader = setTimeout(function(){ 
                    	$('body').append('<img class="loading" src="' + $pluginUrl + '/wp-post-modal/public/images/loading.gif" />');
                    }, 2000);

                    clearTimeout(showLoader);

This will show a loading image for 2 seconds before the modal appears.

You can also add some sort of animation to how the modal appears with a combination of CSS/JS. I've gone ahead and did a slide down effect to the plugin.

Let me know if you need any specific help and I'm excited to see your results.

[djmtype]

Just to reiterate –

I removed: modalContent.html('<img class="loading" src="' + $pluginUrl + '/wp-post-modal/public/images/loading.gif" />');

Then before this line, ('.modal').addClass('show', 1000, 'easeOutSine');, I added:

var showLoader = setTimeout(function(){ 
$('body').append('<img class="loading" src="' + $pluginUrl + '/wp-post-modal/public/images/loading.gif" />');
}, 2000);

clearTimeout(showLoader);

Sadly, nothing changed. :(

I assumed the loading graphic would have been appended to the body until the modal was ready to be revealed, therefore, we wouldn't see the abrupt height change on the modal?

[mikedoubintchik]

The loading graphic would be appended to the body so it appears at the very bottom of the page. You would still need to style it for it to appear absolutely positioned in the middle of the page.

This will not do anything about the modal appearing abruptly though. For that you can do my second recommendation and/or update the plugin with my latest commit which includes a slight animation of the modal popup.

[djmtype]

Thanks Mike, I appreciate your help.

[mikedoubintchik]

Please let me know what you final solution looks like. I'm curious to see what you come up with and maybe I will integrate it with the plugin :)