Media not rendering on first try, only after a refresh

Hey, first of all, this is my first complex Next.js project, so it is very probable that I am doing something stupid. So the problem is that, on the homepage of my app I have a video (1) and an image (2) that render only after a refresh, they won't show the first time the website is accessed. Both of them are stored locally in the /public folder. I have attached a before and an after-refresh screenshot with the problem. You can test this live here: https://moodvie.edwardcs.com/ Index page source code: https://github.com/edwardsavin/moodvie/blob/main/src/pages/index.tsx Component with the video source code: https://github.com/edwardsavin/moodvie/blob/main/src/components/presentation.tsx Component with the image source code: https://github.com/edwardsavin/moodvie/blob/main/src/components/main-footer.tsx I searched and tried everything that I could found on Google but with no luck at all. Once again, it is very probable that I am doing something very wrong since I am not super familiar with Next and React. Thank you so much for reading this, if you have any idea of how to fix this bug don't hesitate to write here, I will try every single thing.

Moodvie

Moodvie - Get movie recommendations based on your mood and music taste.

GitHub

moodvie/index.tsx at main · edwardsavin/moodvie

Get movie recommendations based on your mood and music taste. - moodvie/index.tsx at main · edwardsavin/moodvie

GitHub

moodvie/presentation.tsx at main · edwardsavin/moodvie

Get movie recommendations based on your mood and music taste. - moodvie/presentation.tsx at main · edwardsavin/moodvie

GitHub

moodvie/main-footer.tsx at main · edwardsavin/moodvie

Get movie recommendations based on your mood and music taste. - moodvie/main-footer.tsx at main · edwardsavin/moodvie