TinyMCE wpview: make inserting oEmbed previews smoother

[azaozz]

Currently when an "embeddable" URL is pasted in the editor, we make a request to the server asking if the URL is embeddable, then the server makes a request to the oEmbed provider to get the actual HTML, catches it and sends it as reply to the initial request.

This usually takes several seconds, sometimes even more than 10. During that time in the editor we display the URL that was originally pasted.

When the response arrives we insert a new wpview. In many cases that wpview contains an iframe that only then starts to load, extending the whole process even more. While the iframe document is loading we keep resizing the iframe to match the height.

All of this is pretty "jumpy", with one "big jump" when the URL is replaced with the wpview, and possibly several smaller jumps while the iframe is loading.

All that "jumpiness" is not a good UX. We can try to detect when an URL is "embeddable" right after it is pasted, then insert some sort of a placeholder with similar dimensions while waiting for the embed HTML, so the users can continue typing.

[iseulde]

We talked a bit before about this and it seems the best way to do it is by adding JS regex, types, and maybe ratios/dimensions to the settings array, so we know immediately whether a URL is is embeddable or not (we don't want to show a placeholder for a URL if not) and we know what kind of placeholder to display. I think working with types could be interesting. With that information we could show a different type of placeholder for each type which can each have a default dimension. Maybe we can add the ratios/dimensions setting for more fine grained control.

Another benefit of adding types is that it might be useful for UI to list the embed options. For this is, and maybe for better error messages as well, it could be useful to add the name of the service to the settings array as well. Cc @joen.

Having both PHP and JS regex in the settings array is a bit weird, so I wonder if there's any way we can merge these two, especially since the regex are meant to be simple.

[Travel_girl]

I think it is a good idea, to show a placeholder, while the Media get embedded. I´m not quite sure if we should offer more settings, because it could become quite complex and complicated for the users.

[mizejewski]

Looks like this is currently being handled better in Gutenberg.