From 8d9276830fa6c34281172a87dbb20e9551795233 Mon Sep 17 00:00:00 2001
From: Nikolai Giman <gimanhead@gmail.com>
Date: Mon, 6 Apr 2026 00:10:25 +0200
Subject: [PATCH] fix: init loading

---
 web/src/components/UserMenu.vue               | 23 ++++---
 .../features/projects/ProjectsSidebar.vue     |  3 -
 web/src/layouts/UserLayout.vue                | 63 ++++++++++---------
 web/src/stores/organization.store.ts          |  3 +
 4 files changed, 50 insertions(+), 42 deletions(-)

diff --git a/web/src/components/UserMenu.vue b/web/src/components/UserMenu.vue
index ca9b236..4074f4a 100644
--- a/web/src/components/UserMenu.vue
+++ b/web/src/components/UserMenu.vue
@@ -5,12 +5,6 @@
     :ui="{ content: collapsed ? 'w-48' : 'w-(--reka-dropdown-menu-trigger-width)', group: 'max-h-screen' }"
   >
     <UButton
-      v-bind="{
-        ...user,
-        label: collapsed ? undefined : user?.name,
-        description: collapsed ? undefined : user?.description,
-        trailingIcon: collapsed ? undefined : 'i-lucide-chevrons-up-down'
-      }"
       color="neutral"
       variant="ghost"
       block
@@ -19,7 +13,18 @@
       :ui="{
         trailingIcon: 'text-dimmed'
       }"
-    />
+    >
+      <template #leading>
+        <UAvatar :src="user.avatar.src" :alt="user.avatar.alt" size="2xs" />
+      </template>
+      <div v-if="!collapsed" class="flex flex-col items-start text-left truncate flex-1">
+        <span class="truncate text-sm font-medium">{{ user.name }}</span>
+        <span class="truncate text-xs text-dimmed">{{ user.description }}</span>
+      </div>
+      <template v-if="!collapsed" #trailing>
+        <UIcon name="i-lucide-chevrons-up-down" class="size-4 text-dimmed" />
+      </template>
+    </UButton>
 
     <template #chip-leading="{ item }">
       <div class="inline-flex items-center justify-center shrink-0 size-5">
@@ -111,8 +116,8 @@ async function handleLogout() {
 }
 
 const user = computed(() => ({
-  name: orgStore.currentOrg?.name || userStore.email || userStore.login,
-  description: orgStore.currentOrg ? (userStore.email || userStore.login) : undefined,
+  name: orgStore.currentOrg?.name || userStore.login || userStore.email,
+  description: userStore.email || userStore.login,
   avatar: {
     src: avatarImg,
     alt: userStore.email || userStore.login,
diff --git a/web/src/components/features/projects/ProjectsSidebar.vue b/web/src/components/features/projects/ProjectsSidebar.vue
index dd18aa5..79f6731 100644
--- a/web/src/components/features/projects/ProjectsSidebar.vue
+++ b/web/src/components/features/projects/ProjectsSidebar.vue
@@ -36,9 +36,6 @@ const { goals } = storeToRefs(goalsStore)
 const activeProjects = computed(() => goals.value.filter(p => p.archive === 0))
 const archivedProjects = computed(() => goals.value.filter(p => p.archive === 1))
 
-onMounted(async () => {
-  await goalsStore.fetchGoals()
-})
 
 watch(() => orgStore.currentOrg, async () => {
   goalsStore.initialized = false
diff --git a/web/src/layouts/UserLayout.vue b/web/src/layouts/UserLayout.vue
index 229fef3..fb3b452 100644
--- a/web/src/layouts/UserLayout.vue
+++ b/web/src/layouts/UserLayout.vue
@@ -1,39 +1,41 @@
 <template>
-  <UDashboardGroup
-    unit="rem"
-    storage="local"
-    class="UDashboardGroup-test"
-  >
-    <UDashboardSidebar
-      id="default"
-      v-model:open="isSidebarOpen"
-      :default-size="20"
-      class="bg-elevated/25"
-      :class="isSidebarCollapsed ? 'overflow-hidden min-w-0 w-0 transition-[width] duration-200 linear' : 'transition-[width] duration-200 linear'"
-      :ui="{ footer: 'lg:border-t lg:border-default' }"
+  <template v-if="orgStore.initialized">
+    <UDashboardGroup
+      unit="rem"
+      storage="local"
+      class="UDashboardGroup-test"
     >
-      <div class="flex items-center justify-between px-1 gap-2">
-        <TvGoalLikeItem
-          to="/user"
-          variant="taskview"
-          class="flex-1"
-        >
-          {{ t('main') }}
-        </TvGoalLikeItem>
-        <NotificationBell />
-      </div>
+      <UDashboardSidebar
+        id="default"
+        v-model:open="isSidebarOpen"
+        :default-size="20"
+        class="bg-elevated/25"
+        :class="isSidebarCollapsed ? 'overflow-hidden min-w-0 w-0 transition-[width] duration-200 linear' : 'transition-[width] duration-200 linear'"
+        :ui="{ footer: 'lg:border-t lg:border-default' }"
+      >
+        <div class="flex items-center justify-between px-1 gap-2">
+          <TvGoalLikeItem
+            to="/user"
+            variant="taskview"
+            class="flex-1"
+          >
+            {{ t('main') }}
+          </TvGoalLikeItem>
+          <NotificationBell />
+        </div>
 
-      <ProjectsSidebar />
+        <ProjectsSidebar />
 
-      <template #footer="{ collapsed }">
-        <UserMenu :collapsed="collapsed" />
-      </template>
-    </UDashboardSidebar>
+        <template #footer="{ collapsed }">
+          <UserMenu :collapsed="collapsed" />
+        </template>
+      </UDashboardSidebar>
 
-    <RouterView />
-  </UDashboardGroup>
+      <RouterView />
+    </UDashboardGroup>
 
-  <TvMobileBottomNav />
+    <TvMobileBottomNav />
+  </template>
 </template>
 
 <script setup lang="ts">
@@ -104,6 +106,7 @@ onMounted(async () => {
 
   await orgStore.fetchOrganizations()
   orgStore.restoreCurrentOrg()
+  await goalsStore.fetchGoals()
 
   await CapacitorUpdater.notifyAppReady()
   console.log('notifyAppReady', APP_VERSION)
diff --git a/web/src/stores/organization.store.ts b/web/src/stores/organization.store.ts
index 3b7c4bb..4eb8ac8 100644
--- a/web/src/stores/organization.store.ts
+++ b/web/src/stores/organization.store.ts
@@ -8,6 +8,7 @@ export const useOrganizationStore = defineStore('organization', () => {
   const currentOrg = ref<Organization | null>(null)
   const members = ref<OrgMember[]>([])
   const loading = ref(false)
+  const initialized = ref(false)
 
   async function fetchOrganizations() {
     loading.value = true
@@ -125,6 +126,7 @@ export const useOrganizationStore = defineStore('organization', () => {
     } else if (organizations.value.length) {
       currentOrg.value = organizations.value[0]
     }
+    initialized.value = true
   }
 
   return {
@@ -132,6 +134,7 @@ export const useOrganizationStore = defineStore('organization', () => {
     currentOrg,
     members,
     loading,
+    initialized,
     fetchOrganizations,
     createOrganization,
     updateOrganization,