SVG анимация приостановлена, пока веб-пакет загружает динамический компонент Vue

Question

Я создаю приложение Vue, в котором корневой компонент динамически загружается из основного компонента App.vue (с помощью директивы import ('')).

В моем компоненте App.vue я поместил компонент, содержащийбесконечный анимационный SVG (через теги <animate>) и асинхронный загруженный элемент управления.Идея состоит в том, что SVG должен анимироваться до тех пор, пока не будет загружен динамически загруженный элемент управления, а затем я его спрячу.
Однако этого не происходит.SVG постоянно замораживается в первом кадре, пока файл динамического компонента .js не будет загружен и проанализирован.После этого SVG начинает анимироваться, но к тому времени уже слишком поздно.

Вот App.vue:

<template>
    <div style="height: 100%; width: 100%;">
        <loading v-if="loadingDisplayed" ></loading>
        <app-root @hook:mounted="onAppMounted"></app-root>
    </div>
</template>
<script lang="ts">

    import { Component, Vue } from 'vue-property-decorator';
    import Loading from './Components/Loading.vue'

    //import AppRoot from './Components/AppRoot.vue'
    const AppRoot = () => import(/* webpackChunkName: "root" */ './Components/AppRoot.vue').then(m => m.default);


    @Component({
        components: { AppRoot, Loading }
    })
    export default class App extends Vue {

        loadingDisplayed: boolean = true;

        onAppMounted() : void {
            this.loadingDisplayed = false;
        }

    }

</script>

Вот управление загрузкой:

<template>
    <div class="loader">
        <div style="flex-basis: 20%;">
            My title
        </div>
        <div>
            {{txt_loading}}
        </div>
        <div style="flex-basis: 80%;">
            <svg width="100%" height="100%" viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#fff">
                <g fill="none" fill-rule="evenodd" stroke-width="2">
                    <circle cx="22" cy="22" r="1" stroke="black">
                        <animate attributeName="r"
                                 begin="0s" dur="1.8s"
                                 values="1; 20"
                                 calcMode="spline"
                                 keyTimes="0; 1"
                                 keySplines="0.165, 0.84, 0.44, 1"
                                 repeatCount="indefinite" />
                        <animate attributeName="stroke-opacity"
                                 begin="0s" dur="1.8s"
                                 values="1; 0"
                                 calcMode="spline"
                                 keyTimes="0; 1"
                                 keySplines="0.3, 0.61, 0.355, 1"
                                 repeatCount="indefinite" />
                    </circle>
                    <circle cx="22" cy="22" r="1" stroke="black">
                        <animate attributeName="r"
                                 begin="-0.9s" dur="1.8s"
                                 values="1; 20"
                                 calcMode="spline"
                                 keyTimes="0; 1"
                                 keySplines="0.165, 0.84, 0.44, 1"
                                 repeatCount="indefinite" />
                        <animate attributeName="stroke-opacity"
                                 begin="-0.9s" dur="1.8s"
                                 values="1; 0"
                                 calcMode="spline"
                                 keyTimes="0; 1"
                                 keySplines="0.3, 0.61, 0.355, 1"
                                 repeatCount="indefinite" />
                    </circle>
                </g>
            </svg>
        </div>
    </div>
</template>
<script lang="ts">

    import { Component, Vue } from 'vue-property-decorator';

    @Component
    export default class Loading extends Vue {
        txt_loading : "Please wait"
    }

</script>
<style lang="scss" scoped>
    .loader {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        font-size: 2em;
        font-weight: bold;
    }

</style>

Это нормальное поведение или есть способ анимировать SVG, пока браузер загружает файл .js?