Use a slot for displaying the loading indicator content

src/components/ChannelPage.vue

@@ -1,7 +1,7 @@
 <template>
     <ErrorHandler v-if="channel && channel.error" :message="channel.message" :error="channel.error" />
 
-    <div v-if="channel" v-show="!channel.error">
+    <LoadingIndicatorPage :show-content="channel != null && !channel.error">
         <div class="flex justify-center place-items-center">
             <img height="48" width="48" class="rounded-full m-1" :src="channel.avatarUrl" />
             <h1 v-text="channel.name" />
@@ -61,24 +61,21 @@
                 hide-channel
             />
         </div>
-    </div>
+    </LoadingIndicatorPage>
-    <div v-else>
-        <LoadingIndicator />
-    </div>
 </template>
 
 <script>
 import ErrorHandler from "./ErrorHandler.vue";
 import ContentItem from "./ContentItem.vue";
 import WatchOnYouTubeButton from "./WatchOnYouTubeButton.vue";
-import LoadingIndicator from "./LoadingIndicator.vue";
+import LoadingIndicatorPage from "./LoadingIndicatorPage.vue";
 
 export default {
     components: {
         ErrorHandler,
         ContentItem,
         WatchOnYouTubeButton,
-        LoadingIndicator,
+        LoadingIndicatorPage,
     },
     data() {
         return {

src/components/FeedPage.vue

@@ -24,32 +24,29 @@
 
     <hr />
 
-    <div v-if="videos.length != 0" class="video-grid">
+    <LoadingIndicatorPage :show-content="videosStore != null" class="video-grid">
         <template v-for="video in videos" :key="video.url">
             <VideoItem v-if="shouldShowVideo(video)" :is-feed="true" :item="video" />
         </template>
-    </div>
+    </LoadingIndicatorPage>
-    <div v-else>
-        <LoadingIndicator />
-    </div>
 </template>
 
 <script>
 import VideoItem from "./VideoItem.vue";
 import SortingSelector from "./SortingSelector.vue";
-import LoadingIndicator from "./LoadingIndicator.vue";
+import LoadingIndicatorPage from "./LoadingIndicatorPage.vue";
 
 export default {
     components: {
         VideoItem,
         SortingSelector,
-        LoadingIndicator,
+        LoadingIndicatorPage,
     },
     data() {
         return {
             currentVideoCount: 0,
             videoStep: 100,
-            videosStore: [],
+            videosStore: null,
             videos: [],
             availableFilters: ["all", "shorts", "videos"],
             selectedFilter: "all",

src/components/LoadingIndicatorPage.vue

@@ -1,6 +1,9 @@
 <template>
-    <div class="flex min-h-[75vh] w-full justify-center items-center">
+    <div v-if="!showContent" class="flex min-h-[75vh] w-full justify-center items-center">
-        <span id="spinner"></span>
+        <span id="spinner" />
+    </div>
+    <div v-else>
+        <slot />
     </div>
 </template>
 
@@ -39,3 +42,14 @@
     }
 }
 </style>
+
+<script>
+export default {
+    props: {
+        showContent: {
+            type: Boolean,
+            required: true,
+        },
+    },
+};
+</script>

src/components/PlaylistPage.vue

@@ -1,7 +1,7 @@
 <template>
     <ErrorHandler v-if="playlist && playlist.error" :message="playlist.message" :error="playlist.error" />
 
-    <div v-if="playlist" v-show="!playlist.error">
+    <LoadingIndicatorPage :show-content="playlist" v-show="!playlist.error">
         <h1 class="text-center my-4" v-text="playlist.name" />
 
         <div class="flex justify-between items-center">
@@ -46,15 +46,12 @@
                 width="168"
             />
         </div>
-    </div>
+    </LoadingIndicatorPage>
-    <div v-else>
-        <LoadingIndicator />
-    </div>
 </template>
 
 <script>
 import ErrorHandler from "./ErrorHandler.vue";
-import LoadingIndicator from "./LoadingIndicator.vue";
+import LoadingIndicatorPage from "./LoadingIndicatorPage.vue";
 import VideoItem from "./VideoItem.vue";
 import WatchOnYouTubeButton from "./WatchOnYouTubeButton.vue";
 
@@ -63,7 +60,7 @@ export default {
         ErrorHandler,
         VideoItem,
         WatchOnYouTubeButton,
-        LoadingIndicator,
+        LoadingIndicatorPage,
     },
     data() {
         return {

src/components/SearchResults.vue

@@ -18,24 +18,21 @@
         </i18n-t>
     </div>
 
-    <div v-if="results != null && results.items.length != 0" class="video-grid">
+    <LoadingIndicatorPage :show-content="results != null && results.items?.length" class="video-grid">
         <template v-for="result in results.items" :key="result.url">
             <ContentItem :item="result" height="94" width="168" />
         </template>
-    </div>
+    </LoadingIndicatorPage>
-    <div v-else>
-        <LoadingIndicator />
-    </div>
 </template>
 
 <script>
 import ContentItem from "./ContentItem.vue";
-import LoadingIndicator from "./LoadingIndicator.vue";
+import LoadingIndicatorPage from "./LoadingIndicatorPage.vue";
 
 export default {
     components: {
         ContentItem,
-        LoadingIndicator,
+        LoadingIndicatorPage,
     },
     data() {
         return {

src/components/TrendingPage.vue

@@ -3,22 +3,19 @@
 
     <hr />
 
-    <div v-if="videos.length != 0" class="video-grid">
+    <LoadingIndicatorPage :show-content="videos.length != 0" class="video-grid">
         <VideoItem v-for="video in videos" :key="video.url" :item="video" height="118" width="210" />
-    </div>
+    </LoadingIndicatorPage>
-    <div v-else>
-        <LoadingIndicator />
-    </div>
 </template>
 
 <script>
-import LoadingIndicator from "./LoadingIndicator.vue";
+import LoadingIndicatorPage from "./LoadingIndicatorPage.vue";
 import VideoItem from "./VideoItem.vue";
 
 export default {
     components: {
         VideoItem,
-        LoadingIndicator,
+        LoadingIndicatorPage,
     },
     data() {
         return {

src/components/WatchVideo.vue

@@ -12,7 +12,7 @@
         />
     </div>
 
-    <div v-if="video && !isEmbed" class="w-full">
+    <LoadingIndicatorPage :show-content="video && !isEmbed" class="w-full">
         <ErrorHandler v-if="video && video.error" :message="video.message" :error="video.error" />
 
         <div v-show="!video.error">
@@ -217,10 +217,7 @@
                 <hr class="sm:hidden" />
             </div>
         </div>
-    </div>
+    </LoadingIndicatorPage>
-    <div v-else>
-        <LoadingIndicator />
-    </div>
 </template>
 
 <script>
@@ -233,7 +230,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";
+import LoadingIndicatorPage from "./LoadingIndicatorPage.vue";
 
 export default {
     name: "App",
@@ -247,7 +244,7 @@ export default {
         ShareModal,
         PlaylistVideos,
         WatchOnYouTubeButton,
-        LoadingIndicator,
+        LoadingIndicatorPage,
     },
     data() {
         const smallViewQuery = window.matchMedia("(max-width: 640px)");