Vue wait until external request finished - vue.js

Question

I have a page in my Vue application which does an animation on route enter. However because I embedded a Vimeo video in this page, the frames drop from 60 to 20fps during the animation. I think it's because the request to the Vimeo server has to be made and is not finished when the animation starts.
I would like to preload the embedded Vimeo video on the first site load or somehow wait until the request has finished and then start the animation. How do I do that?
The video is embedded like this in the parent component and the animation is in the projecttop child component:
<div>
<projecttop></projecttop>
<div class="vimeo-container">
<iframe src="https://player.vimeo.com/video/397648215" frameborder="0" allow="fullscreen"allowfullscreen></iframe>
</div>
</div>
export default {
name: 'parentcomponent',
components: {
projecttop
}
}
This is the child component with the animation:
<script>
import { gsap } from "gsap";
export default {
name: "projecttop",
methods: {
slideIn() {
var tl = gsap.timeline()
tl.from('#project-title', {
delay: 0.5,
duration: 0.8,
y: 100,
opacity: 0,
ease: "circ.out",
})
}
},
mounted () {
if(document.readyState === "complete") {
this.slideIn()
}
}
};
</script>

Answer 1

You could try something like this in your parent component:
<projecttop :start-animation="videoLoaded"></projecttop>
<div class="vimeo-container">
<iframe
src="https://player.vimeo.com/video/397648215"
frameborder="0"
allow="fullscreen"
allowfullscreen
#load="videoLoaded = true
>
</iframe>
</div>
...
data() {
return {
videoLoaded: false,
}
},
Then, in your child component, pass in the value of videoLoaded and add a watcher to monitor when this is updated to true:
props: {
startAnimation: {
type: Boolean,
required: true
}
},
watch: {
startAnimation(val) {
if (val) this.slideIn();
}
}