Add loading indicators

src/components/ChannelPage.vue

@@ -62,18 +62,23 @@
             />
         </div>
     </div>
+    <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";
 
 export default {
     components: {
         ErrorHandler,
         ContentItem,
         WatchOnYouTubeButton,
+        LoadingIndicator,
     },
     data() {
         return {

src/components/FeedPage.vue

@@ -24,21 +24,26 @@
 
     <hr />
 
-    <div class="video-grid">
+    <div v-if="videos.length != 0" class="video-grid">
         <template v-for="video in videos" :key="video.url">
             <VideoItem v-if="shouldShowVideo(video)" :is-feed="true" :item="video" />
         </template>
     </div>
+    <div v-else>
+        <LoadingIndicator />
+    </div>
 </template>
 
 <script>
 import VideoItem from "./VideoItem.vue";
 import SortingSelector from "./SortingSelector.vue";
+import LoadingIndicator from "./LoadingIndicator.vue";
 
 export default {
     components: {
         VideoItem,
         SortingSelector,
+        LoadingIndicator,
     },
     data() {
         return {

src/components/PlaylistPage.vue

@@ -47,10 +47,14 @@
             />
         </div>
     </div>
+    <div v-else>
+        <LoadingIndicator />
+    </div>
 </template>
 
 <script>
 import ErrorHandler from "./ErrorHandler.vue";
+import LoadingIndicator from "./LoadingIndicator.vue";
 import VideoItem from "./VideoItem.vue";
 import WatchOnYouTubeButton from "./WatchOnYouTubeButton.vue";
 
@@ -59,6 +63,7 @@ export default {
         ErrorHandler,
         VideoItem,
         WatchOnYouTubeButton,
+        LoadingIndicator,
     },
     data() {
         return {

src/components/SearchResults.vue

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

src/components/TrendingPage.vue

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