Loading screen on AR

[sercandemirtas]

Hello all!

Is it possible to add loading gif or picture to default AR button on mobile? I mean when we click AR, sometimes we need to wait 3 or 4 second. So I want to add something like "Please wait. AR is loading.."

Version

• model-viewer: v1.1.0

Browser Affected

• [x ] Chrome
• Edge
• Firefox
• [ x] IE
• [x ] Safari

OS

• [ x] Android
• [ x] iOS
• Linux
• MacOS
• Windows

[elalish]

I've noticed this annoying lag too, especially on iOS. Yet another reason I'll be excited when WebXR is supported universally. We don't expose anything like this yet, but I might be able to add a value to our ar-status attribute that you could use for configuring some CSS. Does that sound like a reasonable solution?

[sayinserdar]

I had the same problem. My solution was just placing an overlay loader before the model loads

Here is how I did it and I think it would be really helpful to see more advanced/more usage of slot attribute other than button element. In this case I've used "poster" slot.

You can check it out from this link as well.
Example

[milesgreen]

@elalish - I've noticed this too. When tapping the AR button, it can pause / hang / load for a few seconds before opening Quick Look on iOS. Seems intermittent. Possibly depending on connection speed of mobile? Is the USDZ being loaded at that point?

Either way, if this can be exposed as an ar-status event, that would be great. But would you be able to also provide an event when exiting Quick Look / Scene Viewer, returning back to the web page - to remove the loading CSS?

[elalish]

@milesgreen yes, that's when the ios-src gets downloaded. Unfortunately I'm not sure I can fix this after all, as it appears the page is unresponsive as soon as the intent is launched on my iphone. If anyone knows of a website that launches quick-look and manages to avoid this delay or put in a loading indicator, please paste a link and I'll try to adapt it.