SVG animation paused while webpack is loading dynamic Vue component - animation

Question

I am creating a Vue application where the root component is dynamically loaded from the main App.vue component (via import('') directive).
In my App.vue component I placed a component containing the infinite animating SVG (via <animate> tags) and the async loaded control. The idea is that the SVG should be animating until the dynamically loaded control is loaded and then I will hide it.
However this does not happen. SVG is permanently frozen in first frame until the dynamic component .js file is loaded and parsed. After that the SVG starts to animate but by then it is too late.
Here is the 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>
Here is the loading control:
<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>
Is this normal behaviour or is there a way to have SVG animating while the browser is loading the .js file?