Async popovers look bad

[thorn0]

Bug description:

If a popover needs to load some content first, it'd be much better not to show it until the content is loaded. Because now it doesn't look pretty at all: an empty popover first, then it jumps around before taking up the right position. Sometimes (when the edge of the screen is near) it even ends up in the wrong position.

Also would be great if the async content loading mechanism was more flexible and could get the content from an arbitrary promise, not only from URLs

Link to minimally-working plunker that reproduces the issue:

https://plnkr.co/edit/blzYaBhHg5ZtICVAar8u?p=preview

Version of Angular, UIBS, and Bootstrap

Angular: 1.5.8
UIBS: 2.2.0
Bootstrap: 3.3.7

[wesleycho]

If using a template, it is generally recommended to bundle all the templates with the application to avoid issues like this. A workaround could be to load the template, then open the popover - not ideal, and introduces its own UX issues. One could also try fetching all the templates as soon as a user hits the view to avoid any UI problems here.

For content loading from an arbitrary promise, this could introduce security concerns for a 1-1 replacement of the popover-template feature with this new proposal. There is the popover-html feature, but it doesn't compile any directives - that may be fine, not quite sure the exact use case you're solving though.

[thorn0]

If using a template, it is generally recommended to bundle all the templates with the application to avoid issues like this.

Even if the template is preloaded, it may contain some dynamically loaded content (e.g. ng-include). Dynamic content in popovers is a really common use case. And if the content is loaded dynamically, we'll face these resizing issues.

[thorn0]

An illustration for my previous comment: https://plnkr.co/edit/URENYnwdeyBl3Pqe2iz9?p=preview

Async popovers are really common, aren't they? E.g. hover someone's avatar on Twitter. You'll see a popover with dynamically loaded content inside. And promises are just a generic representation of asynchronous operations. HTTP requests aren't the only source of data. For example, we may need to load content from IndexedDB.

[wesleycho]

What would be a good way to handle this situation though? We would have no idea when to recalculate the size of the popover...this seems like a situation where we don't have a great way in the library itself to improve the UX itself.

[thorn0]

The solution is simple. We just shouldn't show the popover if it's not ready yet.

[wesleycho]

But how would we know if data is being fetched from within the popover content?

[thorn0]

That's why I'm talking about promises. If the component gets a promise instead of plain string content, it should wait until it's resolved.

[franktroia]

We also have this issue.