💄 Optimize userinfo loading process

components/UserMenu.vue

@@ -2,15 +2,12 @@
   <v-menu>
     <template #activator="{ props }">
       <v-btn flat exact v-bind="props" icon>
-        <v-avatar color="transparent" icon="mdi-account-circle" :image="avatar" />
+        <v-avatar v-if="id.isReady" color="transparent" icon="mdi-account-circle" :image="avatar" />
+        <v-progress-circular v-else indeterminate size="20" width="2.5" />
       </v-btn>
     </template>
 
-    <v-list density="compact" v-if="!id.userinfo.isLoggedIn">
-      <v-list-item title="Sign in" prepend-icon="mdi-login-variant" to="/auth/sign-in" />
-      <v-list-item title="Create account" prepend-icon="mdi-account-plus" to="/auth/sign-up" />
-    </v-list>
-    <v-list density="compact" v-else>
+    <v-list density="compact" v-if="id.isLoggedIn">
       <v-list-item :title="nickname" :subtitle="username" />
 
       <v-divider class="border-opacity-50 my-2" />
@@ -18,6 +15,10 @@
       <v-list-item title="Dashboard" prepend-icon="mdi-account-supervisor" exact to="/users/me" />
       <v-list-item title="Sign out" prepend-icon="mdi-logout" @click="signOut"></v-list-item>
     </v-list>
+    <v-list density="compact" v-else>
+      <v-list-item title="Sign in" prepend-icon="mdi-login-variant" to="/auth/sign-in" />
+      <v-list-item title="Create account" prepend-icon="mdi-account-plus" to="/auth/sign-up" />
+    </v-list>
   </v-menu>
 </template>
 
@@ -30,21 +31,21 @@ const config = useRuntimeConfig()
 const id = useUserinfo()
 
 const username = computed(() => {
-  if (id.userinfo.isLoggedIn) {
-    return "@" + id.userinfo.data?.name
+  if (id.isLoggedIn) {
+    return "@" + id.userinfo?.name
   } else {
     return "@visitor"
   }
 })
 const nickname = computed(() => {
-  if (id.userinfo.isLoggedIn) {
-    return id.userinfo.data?.nick
+  if (id.isLoggedIn) {
+    return id.userinfo?.nick
   } else {
     return "Anonymous"
   }
 })
 const avatar = computed(() => {
-  return id.userinfo.data?.avatar ? `${config.public.solarNetworkApi}/cgi/files/attachments/${id.userinfo.data?.avatar}` : void 0
+  return id.userinfo?.avatar ? `${config.public.solarNetworkApi}/cgi/files/attachments/${id.userinfo?.avatar}` : void 0
 })
 
 function signOut() {

pages/users/me.vue

@@ -6,8 +6,8 @@
       <div class="my-5 flex flex-row gap-4">
         <v-avatar :image="urlOfAvatar" />
         <div class="flex flex-col">
-          <span>{{ auth.userinfo.data?.nick }} <span class="text-xs">@{{ auth.userinfo.data?.name }}</span></span>
-          <span class="text-sm">{{ auth.userinfo.data?.description }}</span>
+          <span>{{ auth.userinfo?.nick }} <span class="text-xs">@{{ auth.userinfo?.name }}</span></span>
+          <span class="text-sm">{{ auth.userinfo?.description }}</span>
         </div>
       </div>
 
@@ -51,6 +51,6 @@ const config = useRuntimeConfig()
 
 const auth = useUserinfo()
 
-const urlOfAvatar = computed(() => auth.userinfo.data?.avatar ? `${config.public.solarNetworkApi}/cgi/files/attachments/${auth.userinfo.data.avatar}` : void 0)
-const urlOfBanner = computed(() => auth.userinfo.data?.banner ? `${config.public.solarNetworkApi}/cgi/files/attachments/${auth.userinfo.data.banner}` : void 0)
+const urlOfAvatar = computed(() => auth.userinfo?.avatar ? `${config.public.solarNetworkApi}/cgi/files/attachments/${auth.userinfo.avatar}` : void 0)
+const urlOfBanner = computed(() => auth.userinfo?.banner ? `${config.public.solarNetworkApi}/cgi/files/attachments/${auth.userinfo.banner}` : void 0)
 </script>

stores/userinfo.ts

@@ -27,8 +27,9 @@ export function useLoggedInState() {
 }
 
 export const useUserinfo = defineStore("userinfo", () => {
-  const userinfo = ref(defaultUserinfo)
+  const userinfo = ref<any>(null)
   const isReady = ref(false)
+  const isLoggedIn = ref(false)
 
   const lastRefreshedAt = ref<Date | null>(null)
 
@@ -39,6 +40,7 @@ export const useUserinfo = defineStore("userinfo", () => {
   }
 
   async function getAtk() {
+    if (!useLoggedInState().value) return useAtk().value
     if (lastRefreshedAt.value != null && Math.floor(Math.abs(Date.now() - lastRefreshedAt.value.getTime()) / 60000) < 3) {
       return useAtk().value
     }
@@ -69,23 +71,19 @@ export const useUserinfo = defineStore("userinfo", () => {
       isReady.value = true
     }
 
-    const config = useRuntimeConfig()
-
     const res = await solarFetch("/cgi/auth/users/me")
 
     if (res.status !== 200) {
+      isReady.value = true
       return
     }
 
     const data = await res.json()
 
+    isLoggedIn.value = true
     isReady.value = true
-    userinfo.value = {
-      isLoggedIn: true,
-      displayName: data["nick"],
-      data: data,
-    }
+    userinfo.value = data
   }
 
-  return { userinfo, lastRefreshedAt, isReady, setTokenSet, getAtk, readProfiles }
+  return { userinfo, lastRefreshedAt, isLoggedIn, isReady, setTokenSet, getAtk, readProfiles }
 })