Add loading indicator web template - #85464

The way you did it, wouldn't the loader be alive after Flutter app has loaded? Is there any benchmark to see if it doesn't affect anything?

Note: that this PR (#83530) created a merge conflict with this PR.

@bernaferrari Yup you're right, it would stay spinning all the time even after the app loads.

So now the loader is there with its styling. We need to make it appear only when the flutter app is loading and remove it once the app paints the first frame. I am not sure how, to be honest, but will try to dig in to find a way.

Is there any way to know if the app has loaded? in web of course.

I'm not sure whether this makes sense from a product perspective, adding @yjbanov for thoughts

I suggest using the loading indicator that flutter photobooth used.
It looks cool and is material design compliant too.

Or do you think keeping it simple is better?

https://github.com/flutter/photobooth/blob/main/web/index.html#L56

@yjbanov any thoughts?

I think we should provide API for implementing custom loading indicators and/or splash screens, and provide an example that developers could learn from. The gallery should probably use one too. It would also be great if one of the flutter create templates added one. Whether it should be in the default template, I'm not sure. This is more of a product question, cc @mariamhas. It's also not clear to me what style the default loading indicator should use, or whether it matters at all. If it's intended to be a starting point for developers to hack from and customize, then maybe the style doesn't matter.

Aside from that, I think we lack API for implementing a proper loading indicator. For example, this implementation, as pointed out by @bernaferrari, will stay in the DOM tree forever. We could have the engine emit a "first frame rendered event" JavaScript event that the app could listen to and implement a transition from the loading screen to the app screen. We should also provide a JS API for controlling the visibility of the Flutter app, so one could implement different transitions, such as cross-fade.

This probably has enough devils in the detail to warrant a design doc before we jump into coding.

I think we should not do this before we add JS API and before we make decision on styling, defaults, etc. So I'm closing this PR. However, this is a good example, and could be a useful blog post. I would add loading indicator removal after the app renders its first frame (which can be done by using addPostFrameCallback).

I think we should not do this before we add JS API and before we make decision on styling, defaults, etc. So I'm closing this PR. However, this is a good example, and could be a useful blog post. I would add loading indicator removal after the app renders its first frame (which can be done by using addPostFrameCallback).

Oh thanks for the suggestion @yjbanov. It makes so much sense.

Will make a blog post. 🚀