From 889a410cbd9e71a920aba7ed1f1040d3ca3bf646 Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Sun, 12 Mar 2023 15:56:55 +0100
Subject: [PATCH 1/3] Add loading indicators

---
 src/components/ChannelPage.vue   | 5 +++++
 src/components/FeedPage.vue      | 7 ++++++-
 src/components/PlaylistPage.vue  | 5 +++++
 src/components/SearchResults.vue | 7 ++++++-
 src/components/TrendingPage.vue  | 7 ++++++-
 5 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/src/components/ChannelPage.vue b/src/components/ChannelPage.vue
index 73685671..7bb35b35 100644
--- a/src/components/ChannelPage.vue
+++ b/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 {
diff --git a/src/components/FeedPage.vue b/src/components/FeedPage.vue
index e5caf90a..7f2b99e9 100644
--- a/src/components/FeedPage.vue
+++ b/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 {
diff --git a/src/components/PlaylistPage.vue b/src/components/PlaylistPage.vue
index 42802c9f..e58e74c9 100644
--- a/src/components/PlaylistPage.vue
+++ b/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 {
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index b059cbe9..6f506d88 100644
--- a/src/components/SearchResults.vue
+++ b/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 {
diff --git a/src/components/TrendingPage.vue b/src/components/TrendingPage.vue
index b8d2c9ba..460b119b 100644
--- a/src/components/TrendingPage.vue
+++ b/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 {

From cc48fe8e2715b036cc23c9025f5e35485b36ca54 Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Sun, 12 Mar 2023 16:03:24 +0100
Subject: [PATCH 2/3] Add a loading indicator to the player page

---
 src/components/LoadingIndicator.vue | 41 +++++++++++++++++++++++++++++
 src/components/WatchVideo.vue       | 11 +++++---
 2 files changed, 48 insertions(+), 4 deletions(-)
 create mode 100644 src/components/LoadingIndicator.vue

diff --git a/src/components/LoadingIndicator.vue b/src/components/LoadingIndicator.vue
new file mode 100644
index 00000000..40cdeb24
--- /dev/null
+++ b/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>
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index db1a3e30..2512701b 100644
--- a/src/components/WatchVideo.vue
+++ b/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();
         }

From ae855c2bac4bb4d86cae008e032a6c5455c942a9 Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Mon, 13 Mar 2023 14:39:07 +0100
Subject: [PATCH 3/3] Use a `slot` for displaying the loading indicator content

---
 src/components/ChannelPage.vue                 | 11 ++++-------
 src/components/FeedPage.vue                    | 13 +++++--------
 ...gIndicator.vue => LoadingIndicatorPage.vue} | 18 ++++++++++++++++--
 src/components/PlaylistPage.vue                | 11 ++++-------
 src/components/SearchResults.vue               | 11 ++++-------
 src/components/TrendingPage.vue                | 11 ++++-------
 src/components/WatchVideo.vue                  | 11 ++++-------
 7 files changed, 41 insertions(+), 45 deletions(-)
 rename src/components/{LoadingIndicator.vue => LoadingIndicatorPage.vue} (67%)

diff --git a/src/components/ChannelPage.vue b/src/components/ChannelPage.vue
index 7bb35b35..46d161f9 100644
--- a/src/components/ChannelPage.vue
+++ b/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>
-    <div v-else>
-        <LoadingIndicator />
-    </div>
+    </LoadingIndicatorPage>
 </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 {
diff --git a/src/components/FeedPage.vue b/src/components/FeedPage.vue
index 7f2b99e9..36749650 100644
--- a/src/components/FeedPage.vue
+++ b/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>
-    <div v-else>
-        <LoadingIndicator />
-    </div>
+    </LoadingIndicatorPage>
 </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",
diff --git a/src/components/LoadingIndicator.vue b/src/components/LoadingIndicatorPage.vue
similarity index 67%
rename from src/components/LoadingIndicator.vue
rename to src/components/LoadingIndicatorPage.vue
index 40cdeb24..6336171e 100644
--- a/src/components/LoadingIndicator.vue
+++ b/src/components/LoadingIndicatorPage.vue
@@ -1,6 +1,9 @@
 <template>
-    <div class="flex min-h-[75vh] w-full justify-center items-center">
-        <span id="spinner"></span>
+    <div v-if="!showContent" class="flex min-h-[75vh] w-full justify-center items-center">
+        <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>
diff --git a/src/components/PlaylistPage.vue b/src/components/PlaylistPage.vue
index e58e74c9..7d468a00 100644
--- a/src/components/PlaylistPage.vue
+++ b/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>
-    <div v-else>
-        <LoadingIndicator />
-    </div>
+    </LoadingIndicatorPage>
 </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 {
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index 6f506d88..900517e0 100644
--- a/src/components/SearchResults.vue
+++ b/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>
-    <div v-else>
-        <LoadingIndicator />
-    </div>
+    </LoadingIndicatorPage>
 </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 {
diff --git a/src/components/TrendingPage.vue b/src/components/TrendingPage.vue
index 460b119b..34dfec23 100644
--- a/src/components/TrendingPage.vue
+++ b/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>
-    <div v-else>
-        <LoadingIndicator />
-    </div>
+    </LoadingIndicatorPage>
 </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 {
diff --git a/src/components/WatchVideo.vue b/src/components/WatchVideo.vue
index 2512701b..34742bf6 100644
--- a/src/components/WatchVideo.vue
+++ b/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>
-    <div v-else>
-        <LoadingIndicator />
-    </div>
+    </LoadingIndicatorPage>
 </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)");