refactor store and loading

src/js/store.js

@@ -13,7 +13,30 @@ export const useRadioStore = defineStore("radio", {
       },
     };
   },
-
+  getters: {
+    isRadioReady: (state) => {
+      return (url) => {
+        if (state.radios[url] === undefined) {
+          return false;
+        }
+        if (state.radios[url].lastFetch === undefined) {
+          return false;
+        }
+        // XXX: if lastFetch is very old, return false
+        return true;
+      };
+    },
+  },
   actions: {
+    startFetchingRadio(url) {
+      return;
+    },
+    updateRadio(url, data) {
+      this.radios[url] = {
+        ...this.radios[url],
+        ...data,
+        lastFetch: Date.now(),
+      };
+    },
   },
 });

src/pages/Radio.vue

@@ -4,8 +4,8 @@
     <f7-block-title>{{ Radio.name }}</f7-block-title>
     <f7-block-header>{{ Radio.description }}</f7-block-header>
 
-    <div v-if="loading" strong class="text-align-center">
-      <f7-preloader v-if="loading" />
+    <div v-if="loading()" strong class="text-align-center" >
+      <f7-preloader v-if="loading()" />
     </div>
     <f7-list v-else>
       <f7-list-item
@@ -26,27 +26,27 @@
 </template>
 
 <script>
-import radiomanifest from "../js/radiomanifest";
+import { useRadioStore } from "../js/store";
+import { storeToRefs } from "pinia";
 
 export default {
   name: "radio",
   data() {
     return {
-      loading: true,
+      isRadioReady: null,
       radioUrl: null,
       radio: { name: "" },
       Radio: {},
+      store: useRadioStore(),
+loading: () => {return this.isRadioReady === null || !this.isRadioReady(this.radioUrl)}
     };
   },
   props: { f7route: Object, f7router: Object },
   async mounted() {
     this.radioUrl = decodeURIComponent(this.f7route.params.radioUrl);
-    try {
-      this.Radio = await radiomanifest.get(this.radioUrl);
-      this.loading = false;
-    } catch (e) {
-      console.error("le cose non vanno mai sempre bene!", e);
-    }
+
+    const { isRadioReady } = storeToRefs(this.store);
+    this.isRadioReady = isRadioReady;
   },
 };
 </script>

src/pages/home.vue

@@ -1,12 +1,17 @@
 <script setup>
-import { useRadioStore } from "../js/store";
 import radiomanifest from "@radiomanifest/radiomanifest";
+import { useRadioStore } from "../js/store";
 const store = useRadioStore();
 setTimeout(() => {
+  let i = 0;
   for (const url of Object.keys(store.radios)) {
-    radiomanifest.get(url).then((data) => {
-      store.radios[url] = { ...store.radios[url], ...data };
-    });
+    i++;
+    store.startFetchingRadio(url);
+    setTimeout(() => {
+      radiomanifest.get(url).then((data) => {
+        store.updateRadio(url, data);
+      });
+    }, i * 2000);
   }
 }, 100);
 </script>