Display "loading text" while loading iframe content

[frisi]

trafficstars

Search Terms

spinner loading animation iframe load text feedback ready event

Suggestion

please provide a setting loading text that allows to define a text that is shown whilst theiframe content is loaded

Use Cases

we have a CTA button that takes users to the comment section (links to #comments anchor)

currently they just see an empty iframe that will be filled with content once all coral resources have been fetched

for users it would be great to have some feedback. eg a text "loading comments..." with a spinner ideally this text can be configured in the settings and maybe even styled with custom css (so load [custom] css and this text first) and the rest only when the iframe hits the viewport

i guess this can be done by providing this text in our app, loading the iframe in the background and replacing the loading-div with the iframe-div when it is ready (probably using the ready event)

however the outlined solution would allow integrators to show a visual feedback to their users while comments are loading w/o dealing with javascript and events

[losowsky]

This is a great idea! We'll review adding it.

[frisi]

good to hear @losowsky

can the ready-event (https://github.com/coralproject/talk/blob/f7d39d94e7e4e04b45fb85f9dadb0ab307a7d3e9/src/core/client/embed/StreamEmbed.ts#L78) be used to replace a placeholder with the iframe when it is completely loaded? if yes, can you please provide an example or link to the documentation (could not find the event in the event documentation)

[tessalt]

A common pattern is to show loading text in the div that coral is rendered into, then coral will replace the loading text once it has loaded.