Issue
As Flutter web boots up, it may take a few seconds to boot and start to render home page. hence I add an spinner in index.html to indicate to the user everything is normal.
in index.html (I have simplified)
<body>
<div class="spinner"></div>
.
.
.
</body>
then I need to listen to an event when main.dart.js is completely loaded, to remove the spinner element.
does anyone knows what event I should listen? (I’m talking about javascript events that I can benefit in index.html)
I can’t listen to windows.onload because it fires before flutter boot up.
Solution
The event name is flutter-first-frame. add below script in index.html which removes and element with id: spinner (the loading indicator) when flutter framework completely loaded.
<script>
window.addEventListener('flutter-first-frame', function () {
var el = document.getElementsByClassName('spinner')[0];
el.remove();
});
</script>
read more:
https://haashem.medium.com/add-loading-indicator-toflutter-web-653579fe939a
Answered By – Hashem Aboonajmi
Answer Checked By – Katrina (FlutterFixes Volunteer)