refresh spotify api token; auto reload currentlyPlaying

src/components/CurrentlyPlaying.vue

@@ -10,7 +10,9 @@ defineProps({
   <div class="currentlyPlaying card">
     <div class="card-header">
       <b>{{ currentlyPlaying.item.name }}</b>
-      {{ currentlyPlaying.item.artists.map(artist => artist.name).join(', ') }}
+      <div>
+        {{ currentlyPlaying.item.artists.map(artist => artist.name).join(', ') }}
+      </div>
     </div>
     <div class="card-body">
       <div class="row">
@@ -36,7 +38,7 @@ defineProps({
               rel="noopener norefferrer"
               class="btn btn-outline-dark m-1"
             >
-              view playlist on Spotify
+              view {{ currentlyPlaying.context.type }} on Spotify
             </a>
           </p>
         </div>

src/components/PromiseResolver.vue

@@ -24,7 +24,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, defineProps } from "vue";
+import { ref, defineProps, watch } from "vue";
 import ThrobberLoading from "@/components/ThrobberLoading.vue";
 
 const props = defineProps({
@@ -37,6 +37,10 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
+  throbber: {
+    type: Boolean,
+    default: true,
+  }
 });
 
 const loading = ref(true);
@@ -46,9 +50,9 @@ const data = ref(null);
 
 const update = async (promise: Promise | unknown) => {
   loading.value = true;
-  setTimeout(() => {
+  if (props.throbber) setTimeout(() => {
     if (loading.value) showThrobber.value = true;
-  }, 100);
+  }, 250);
   try {
     data.value = await (promise.isPromiseList
       ? Promise.all(promise.promises)
@@ -57,9 +61,14 @@ const update = async (promise: Promise | unknown) => {
     error.value = e;
   } finally {
     loading.value = false;
+    showThrobber.value = false;
   }
 };
 update(props.promise);
+
+watch(() => props.promise, (to) => {
+  update(to);
+});
 </script>
 
 <style scoped lang="scss">

src/views/UserPage.vue

@@ -2,14 +2,27 @@
 import PromiseResolver from "@/components/PromiseResolver.vue";
 import CurrentlyPlaying from "@/components/CurrentlyPlaying.vue";
 import { useRoute } from "vue-router";
+import { onBeforeUnmount, ref } from "vue";
+import { useApi } from "@/Api";
 
 const route = useRoute();
+const api = useApi();
+
+const userInfo = ref(api?.getUserInfo(route.params.id as string));
+
+let refreshUserInfo = setInterval(() => {
+  userInfo.value = api?.getUserInfo(route.params.id as string);
+}, 20000);
+
+onBeforeUnmount(() => {
+  clearInterval(refreshUserInfo);
+});
 </script>
 
 <template>
   <h1>User</h1>
   <PromiseResolver
-    :promise="$api.getUserInfo($route.params.id)"
+    :promise="userInfo"
     v-slot="{ data: { user, currentlyPlaying } }"
     class="row"
   >