Loading spinner is not spinning. It froze and shows as a static image when load event listener is attached

[AfiqRosli]

I'm trying to stop the loading overlay once all assets (including images) done loaded. So I initialised the isLoading to true and attached load event listener in the mounted life hook.

When the load event listener is attached, the spinner only shows as a static image, frozen. If removed, it will spin forever.

There is no error message on the console.

App.vue

Template

<v-main>
    <div class="vld-parent">
        <loading
            :active.sync="isLoading"
            :can-cancel="false"
            :is-full-page="true"
            :background-color="'#000'"
            :color="'#fff'"
            :blur="'2px'"
        ></loading>
    </div>

    <router-view />
</v-main>

Script

<script>
import Loading from "vue-loading-overlay";
import "vue-loading-overlay/dist/vue-loading.css";

export default {
    components: {
        Loading,
    },
    mounted() {
        // The spinner works if I don't added this event listener
        window.addEventListener("load", () => {
            this.isLoading = false;
        });
    },
    data: () => {
        return {
            isLoading: true,
        };
    },
};
</script>

[ankurk91]

https://jsfiddle.net/y7sn9q2u/

[ankurk91]

Looks like SVG animation is not working before load event

[ankurk91]

Closing, since it is a limitation in web browsers