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>
This commit is contained in:
Dorian 2026-03-11 10:40:26 +00:00
parent 754763d9cd
commit 1a07862559
2 changed files with 6 additions and 1 deletions

View File

@ -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.

View File

@ -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
}
}