From 1a07862559f593a206d278d7de708e2cb3d91ca3 Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Wed, 11 Mar 2026 10:40:26 +0000
Subject: [PATCH] fix: add loading state to Cloud file counts

All 30 UX audit findings verified resolved. Added the last missing
loading indicator for Cloud.vue file count fetching. All P0, P1, and P2
items from docs/ux-audit-2026-03.md are now addressed across Login,
Home, Apps, Server, Chat, Federation, Credentials, Settings, Marketplace,
Web5, SystemUpdate, and Cloud views.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 loop/plan.md                 | 2 +-
 neode-ui/src/views/Cloud.vue | 5 +++++
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/loop/plan.md b/loop/plan.md
index a7315083..9677670a 100644
--- a/loop/plan.md
+++ b/loop/plan.md
@@ -312,7 +312,7 @@
 
 - [x] **UXP-01** — Run complete UX audit. Reviewed all 12 pages via Playwright screenshots + source code analysis. Found 30 issues: 3 P0 (Apps empty state hardcoded off, Credentials parse error, persistent unhealthy banners), 13 P1 (dead links, no-op buttons, fake data, silent failures, missing error feedback), 14 P2 (inconsistent patterns, native dialogs, loading states). Full report in `docs/ux-audit-2026-03.md`.
 
-- [ ] **UXP-02** — Fix all UX audit findings. Address every issue identified. Focus on: mobile responsiveness, keyboard navigation, loading states, error messages, empty states. No visual/animation changes. **Acceptance**: All audit items resolved.
+- [x] **UXP-02** — Fix all UX audit findings. Address every issue identified. Focus on: mobile responsiveness, keyboard navigation, loading states, error messages, empty states. No visual/animation changes. **Acceptance**: All audit items resolved.
 
 - [ ] **UXP-03** — Polish error handling across entire frontend. Run `/polish-errors` on every view and store. Ensure: every async operation has loading/error/success states, user-friendly error messages, retry buttons where appropriate. **Acceptance**: No unhandled promise rejections; all errors shown to user.
 
diff --git a/neode-ui/src/views/Cloud.vue b/neode-ui/src/views/Cloud.vue
index 5b936d78..08170065 100644
--- a/neode-ui/src/views/Cloud.vue
+++ b/neode-ui/src/views/Cloud.vue
@@ -52,6 +52,7 @@
             {{ section.appLabel }}
           </span>
           <span v-if="!isAppRunning(section.appId)" class="text-white/30">Not installed</span>
+          <span v-else-if="countsLoading" class="text-white/30 animate-pulse">Loading...</span>
           <span v-else-if="sectionCounts[section.id] !== undefined" class="text-white/30">{{ sectionCounts[section.id] }} items</span>
         </div>
       </div>
@@ -76,6 +77,7 @@ import { fileBrowserClient } from '@/api/filebrowser-client'
 const router = useRouter()
 const store = useAppStore()
 const sectionCounts = ref<Record<string, number>>({})
+const countsLoading = ref(false)
 
 const APP_ALIASES: Record<string, string[]> = {
   immich: ['immich_server', 'immich-server'],
@@ -159,6 +161,7 @@ const SECTION_PATHS: Record<string, string> = {
 
 async function loadCounts() {
   if (!fileBrowserRunning.value) return
+  countsLoading.value = true
   try {
     const ok = await fileBrowserClient.login()
     if (!ok) return
@@ -174,6 +177,8 @@ async function loadCounts() {
     }
   } catch (e) {
     if (import.meta.env.DEV) console.warn('FileBrowser count loading failed silently', e)
+  } finally {
+    countsLoading.value = false
   }
 }