Add a loading indicator to the player page

src/components/LoadingIndicator.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="flex min-h-[75vh] w-full justify-center items-center">
+        <span id="spinner"></span>
+    </div>
+</template>
+
+<style>
+#spinner:after {
+    --spinner-color: #000;
+}
+
+.dark #spinner:after {
+    --spinner-color: #fff;
+}
+
+#spinner {
+    display: inline-block;
+    width: 70px;
+    height: 70px;
+}
+#spinner:after {
+    content: " ";
+    display: block;
+    width: 54px;
+    height: 54px;
+    margin: 8px;
+    border-radius: 50%;
+    border: 4px solid var(--spinner-color);
+    border-color: var(--spinner-color) transparent var(--spinner-color) transparent;
+    animation: spinner 1.2s linear infinite;
+}
+
+@keyframes spinner {
+    0% {
+        transform: rotate(0deg);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+</style>

src/components/WatchVideo.vue

@@ -218,6 +218,9 @@
             </div>
         </div>
     </div>
+    <div v-else>
+        <LoadingIndicator />
+    </div>
 </template>
 
 <script>
@@ -230,6 +233,7 @@ import PlaylistAddModal from "./PlaylistAddModal.vue";
 import ShareModal from "./ShareModal.vue";
 import PlaylistVideos from "./PlaylistVideos.vue";
 import WatchOnYouTubeButton from "./WatchOnYouTubeButton.vue";
+import LoadingIndicator from "./LoadingIndicator.vue";
 
 export default {
     name: "App",
@@ -243,13 +247,12 @@ export default {
         ShareModal,
         PlaylistVideos,
         WatchOnYouTubeButton,
+        LoadingIndicator,
     },
     data() {
         const smallViewQuery = window.matchMedia("(max-width: 640px)");
         return {
-            video: {
-                title: "Loading...",
-            },
+            video: null,
             playlistId: null,
             playlist: null,
             index: null,
@@ -351,7 +354,7 @@ export default {
         this.showDesc = !this.getPreferenceBoolean("minimizeDescription", false);
         this.showRecs = !this.getPreferenceBoolean("minimizeRecommendations", false);
         this.showChapters = !this.getPreferenceBoolean("minimizeChapters", false);
-        if (this.video.duration) {
+        if (this.video?.duration) {
             document.title = this.video.title + " - Piped";
             this.$refs.videoPlayer.loadVideo();
         }