feat: only block on user call when actually displaying the user site

this allows the user and project requests to run concurrently, addressing part of #1206

frontend/src/middleware/auth.global.ts

@@ -15,7 +15,7 @@ export default defineNuxtRouteMiddleware(async (to: RouteLocationNormalized, fro
 
   await useAuth.updateUser();
   await loadRoutePerms(to);
-  await handleRoutePerms(to);
+  await handleRoutePerms(to, from);
 });
 
 async function loadRoutePerms(to: RouteLocationNormalized) {
@@ -57,9 +57,9 @@ async function loadRoutePerms(to: RouteLocationNormalized) {
   authStore.setRoutePerms(null);
 }
 
-async function handleRoutePerms(to: RouteLocationNormalized) {
+async function handleRoutePerms(to: RouteLocationNormalized, from: RouteLocationNormalized) {
   const authStore = useAuthStore();
-  routePermLog("navigate to " + String(to.name) + ", meta:", to.meta);
+  routePermLog("navigate to " + String(to.name) + ", meta:", to.meta, "(from: " + String(from.name) + ")");
   for (const key in handlers) {
     if (!to.meta[key]) continue;
     const handler = handlers[key];

frontend/src/pages/[user].vue

@@ -1,31 +1,42 @@
 <script lang="ts" setup>
 import { useRoute } from "vue-router";
 import { useI18n } from "vue-i18n";
-import { Ref } from "vue";
-import { Organization } from "hangar-internal";
+import { computed, ref, Ref } from "vue";
+import { User } from "hangar-api";
 import { useOrganization, useUser } from "~/composables/useApiHelper";
 import { useErrorRedirect } from "~/composables/useErrorRedirect";
 import { createError, navigateTo } from "#imports";
 import Delayed from "~/components/design/Delayed.vue";
 
 const i18n = useI18n();
 const route = useRoute();
-const user = await useUser(route.params.user as string);
-let organization: Ref<Organization | null> | undefined;
-if (!user || !user.value) {
-  throw useErrorRedirect(useRoute(), 404, "Not found");
-} else if (route.params.user !== user.value?.name) {
-  const newPath = route.fullPath.replace(route.params.user as string, user.value?.name);
-  console.debug("Redirect to " + newPath + " from (" + route.fullPath + ")");
-  await navigateTo(newPath);
-  throw createError("dummy");
-} else if (user.value?.isOrganization) {
-  organization = await useOrganization(route.params.user as string);
+const user = ref();
+const organization = ref();
+const blocking = computed(() => route.name === "user");
+if (blocking.value) {
+  const u = await useUser(route.params.user as string);
+  await cb(u);
+} else {
+  useUser(route.params.user as string).then(cb);
+}
+
+async function cb(u: Ref<User | null>) {
+  if (!u || !u.value) {
+    throw useErrorRedirect(useRoute(), 404, "Not found");
+  } else if (route.params.user !== u.value?.name) {
+    const newPath = route.fullPath.replace(route.params.user as string, u.value!.name);
+    console.debug("Redirect to " + newPath + " from (" + route.fullPath + ")");
+    await navigateTo(newPath);
+    throw createError("dummy");
+  } else if (u.value?.isOrganization) {
+    organization.value = (await useOrganization(route.params.user as string)).value;
+  }
+  user.value = u.value;
 }
 </script>
 
 <template>
-  <router-view v-if="user" v-slot="{ Component }">
+  <router-view v-if="!blocking || user" v-slot="{ Component }">
     <Suspense>
       <component :is="Component" :user="user" :organization="organization" />
       <template #fallback><Delayed> Loading... </Delayed></template>

frontend/src/pages/[user]/[project].vue

@@ -11,12 +11,9 @@ import ProjectNav from "~/components/projects/ProjectNav.vue";
 import { createError, navigateTo, onBeforeRouteUpdate, useInternalApi } from "#imports";
 import Delayed from "~/components/design/Delayed.vue";
 
-defineProps({
-  user: {
-    type: Object as PropType<User>,
-    required: true,
-  },
-});
+defineProps<{
+  user: User;
+}>();
 
 const i18n = useI18n();
 const route = useRoute();
@@ -37,9 +34,7 @@ async function verify(to: RouteLocationNormalized) {
 onBeforeRouteUpdate(async (to, from) => {
   if (!to.params.project || !to.params.user) return;
   if (to.params.user === from.params.user && to.params.project === from.params.project) return;
-  console.log("before project update", to.params, from.params);
   project.value = await useInternalApi<HangarProject>("projects/project/" + to.params.user + "/" + to.params.project);
-  console.log("after project update", project.value?.mainPage);
   await verify(to);
 });
 
@@ -49,7 +44,7 @@ provide("updateProjectPages", function (pages: HangarProjectPage[]) {
 </script>
 
 <template>
-  <div v-if="project">
+  <div v-if="project && user">
     <ProjectHeader :project="project" />
     <ProjectNav :project="project" />
     <router-view v-slot="{ Component }">

frontend/src/pages/[user]/index.vue

@@ -123,12 +123,12 @@ watchDebounced(
   { deep: true, debounce: 250 }
 );
 
-const description = props.user.tagline ? props.user.name + " is an author on Hangar. " + props.user.tagline : props.user.name + " is an author on Hangar.";
+const description = props.user.name + " is an author on Hangar." + (props.user?.tagline ? " " + props.user.tagline : "");
 useHead(useSeo(props.user.name, description, route, props.user.avatarUrl));
 </script>
 
 <template>
-  <div>
+  <div v-if="user">
     <UserHeader :viewing-user="user" :organization="organization" />
     <div class="flex-basis-full flex flex-col gap-2 flex-grow lg:max-w-7/10 lg:min-w-6/10">
       <div v-for="project in pinned" :key="project.namespace">

frontend/src/pages/api-docs.vue

@@ -40,7 +40,6 @@ onMounted(() => {
           if (req.headers?.Authorization) {
               req.headers.Authorization = req.headers?.Authorization.replace("Bearer", "HangarAuth")
           }
-          console.log(req)
         }
         return req;
       }