Merge pull request #299 from nagisa77/codex/improve-menu-loading-behavior

Implement menu caching

open-isle-cli/src/components/MenuComponent.vue

@@ -167,38 +167,68 @@ export default {
         notificationState.unreadCount = 0
       }
     }
-    await updateCount()
+    
     watch(() => authState.loggedIn, async () => {
       await updateCount()
     })
 
-    try {
+    const CAT_CACHE_KEY = 'menu-categories'
-      this.isLoadingCategory = true
+    const TAG_CACHE_KEY = 'menu-tags'
-      fetch(`${API_BASE_URL}/api/categories`).then(
-        res => {
-          if (res.ok) {
-            res.json().then(data => {
-              this.categories = data.slice(0, 10)
-            })
-          }
-          this.isLoadingCategory = false
-        }
-      )
-    } catch { /* ignore */ }
 
-    try {
+    const cachedCategories = localStorage.getItem(CAT_CACHE_KEY)
-      this.isLoadingTag = true
+    if (cachedCategories) {
-      fetch(`${API_BASE_URL}/api/tags?limit=10`).then(
+      try {
-        res => {
+        this.categories = JSON.parse(cachedCategories)
-          if (res.ok) {
+      } catch { /* ignore */ }
-            res.json().then(data => {
+    }
-              this.tags = data
+
-            })
+    const cachedTags = localStorage.getItem(TAG_CACHE_KEY)
-          }
+    if (cachedTags) {
-          this.isLoadingTag = false
+      try {
+        this.tags = JSON.parse(cachedTags)
+      } catch { /* ignore */ }
+    }
+
+    this.isLoadingCategory = !cachedCategories
+    this.isLoadingTag = !cachedTags
+
+    const fetchCategories = () => {
+      fetch(`${API_BASE_URL}/api/categories`).then(res => {
+        if (res.ok) {
+          res.json().then(data => {
+            this.categories = data.slice(0, 10)
+            localStorage.setItem(CAT_CACHE_KEY, JSON.stringify(this.categories))
+          })
         }
-      )
+        this.isLoadingCategory = false
-    } catch { /* ignore */ }
+      })
+    }
+
+    const fetchTags = () => {
+      fetch(`${API_BASE_URL}/api/tags?limit=10`).then(res => {
+        if (res.ok) {
+          res.json().then(data => {
+            this.tags = data
+            localStorage.setItem(TAG_CACHE_KEY, JSON.stringify(this.tags))
+          })
+        }
+        this.isLoadingTag = false
+      })
+    }
+
+    if (cachedCategories) {
+      setTimeout(fetchCategories, 1500)
+    } else {
+      fetchCategories()
+    }
+
+    if (cachedTags) {
+      setTimeout(fetchTags, 1500)
+    } else {
+      fetchTags()
+    }
+
+    await updateCount()
   },
   methods: {
     cycleTheme,