new, ui: loader in /news

reAudioPlayer · Feb 5, 2023 · 08af20b · 08af20b
1 parent c822ac2
commit 08af20b
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 14 deletions.
diff --git a/src/ui/src/components/popups/ImportSpotifyAlbum.vue b/src/ui/src/components/popups/ImportSpotifyAlbum.vue
@@ -33,12 +33,16 @@ const form = ref(null);
 const songs: Ref<ISpotifySong[]> = ref([]);
 
 const show = async () => {
-    modal.value.load();
-    if (songs.value.length == 0) {
-        const res = await fetch(`/api/spotify/albums/${props.album.id}`)
-        songs.value = await res.json()
+    if (songs.value.length > 0) {
+        modal.value.show();
+        return;
     }
-    modal.value.show();
+
+    const res = await modal.value.fetch(`/api/spotify/albums/${props.album.id}`);
+
+    if (!res) return;
+
+    songs.value = await res.json()
 }
 
 const preview = () => {

diff --git a/src/ui/src/components/popups/ImportSpotifySong.vue b/src/ui/src/components/popups/ImportSpotifySong.vue
@@ -32,16 +32,23 @@ const form = ref(null);
 const track: Ref<ISong> = ref(null);
 
 const show = async () => {
-    modal.value.load();
     if (!track.value) {
-        const res = await fetch("/api/browse/track", {
-            method: "POST",
-            body: JSON.stringify({
-                url: props.song.href
-            })
-        })
-        track.value = await res.json()
+        modal.value.show();
+        return;
     }
+
+    const res = await modal.value.fetch("/api/browse/track", {
+        method: "POST",
+        body: JSON.stringify({
+            url: props.song.href
+        })
+    });
+
+    if (!res) return;
+
+    modal.value.load();
+
+    track.value = await res.json();
     modal.value.show();
 }
 

diff --git a/src/ui/src/components/popups/components/Template.vue b/src/ui/src/components/popups/components/Template.vue
@@ -21,6 +21,7 @@ const props = defineProps({
 
 const loading = ref(false);
 const showModal = ref(false);
+const error = ref("");
 const hide = () => showModal.value = false;
 
 const show = () => {
@@ -33,6 +34,17 @@ const load = () => {
     showModal.value = true;
 }
 
+const fetch = async (url: string, options: RequestInit) => {
+    load();
+    const res = await window.fetch(url, options);
+    show();
+    if (!res.ok) {
+        error.value = await res.text();
+        return null;
+    }
+    return res;
+}
+
 const emit = defineEmits(["submit", "close", "secondary"]);
 
 const close = () => {
@@ -51,7 +63,7 @@ const secondary = () => {
 }
 
 defineExpose({
-    show, hide, load
+    show, hide, load, fetch
 })
 </script>
 <template>
@@ -66,6 +78,9 @@ defineExpose({
                 </button>
             </div>
             <Loader v-if="loading" />
+            <div v-else-if="error">
+
+            </div>
             <div
                 v-else
                 class="p-4 pt-0"

diff --git a/src/ui/src/components/popups/components/TrackInfo.vue b/src/ui/src/components/popups/components/TrackInfo.vue
@@ -54,6 +54,7 @@ $mobileWidth: 950px;
     display: flex;
     flex-direction: row;
     margin-bottom: 20px;
+    align-items: center;
 
     img {
         width: 20%;
@@ -77,6 +78,7 @@ $mobileWidth: 950px;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
+    align-self: end;
 }
 
 .playlisteditor>.details>h1 {

diff --git a/src/ui/src/views/News.vue b/src/ui/src/views/News.vue
@@ -2,6 +2,7 @@
     <div class="padding-20">
         <div class="news">
             <h1>News</h1>
+            <Loading v-if="news.length == 0" />
             <full-shelf v-for="source in news" :key="source.source" :heading="source.source" class="mt-10">
                 <news-item-big v-for="element in source.items" :key="element.url" :href="element.link" :image="element.image" :source="element.source" :summary="element.summary" :title="element.title" :updated="element.updated" />
             </full-shelf>