test(10-06): promote UX-02 skeleton stubs to RED failing tests

- Replace 4 it.todo stubs with real assertions for animate-pulse, Loading text, and grid class
- Keep UX-13 todo block unchanged (promoted in plan 10-12)
- setActivePinia per test; stub BreadcrumbBar/SearchBar/SortControls/DropZone/UploadProgress/TopicBadge/AppIcon/EmptyState

frontend/src/components/storage/__tests__/StorageBrowser.skeleton.test.js

@@ -1,10 +1,59 @@
-import { describe, it } from 'vitest'
+import { describe, it, expect, beforeEach } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import StorageBrowser from '../StorageBrowser.vue'
+
+const globalStubs = {
+  BreadcrumbBar: true,
+  FolderBreadcrumb: true,
+  SearchBar: true,
+  SortControls: true,
+  DropZone: true,
+  UploadProgress: true,
+  TopicBadge: true,
+  AppIcon: true,
+  EmptyState: true,
+}
 
 describe('UX-02: StorageBrowser shows skeleton rows during loading', () => {
-  it.todo('renders 5+ skeleton rows when loading=true (replaces Loading… text)')
+  beforeEach(() => {
-  it.todo('skeleton rows use grid-cols-[2rem_1fr_6rem_8rem_6rem] matching real row grid')
+    setActivePinia(createPinia())
-  it.todo('skeleton rows use animate-pulse')
+  })
-  it.todo('Loading… text is absent when loading=true (skeleton replaces it)')
+
+  it('renders 5 skeleton rows when loading=true and lists empty', () => {
+    const wrapper = mount(StorageBrowser, {
+      props: { loading: true, folders: [], files: [] },
+      global: { stubs: globalStubs },
+    })
+    const pulseEls = wrapper.findAll('.animate-pulse')
+    expect(pulseEls.length).toBeGreaterThanOrEqual(5)
+  })
+
+  it('Loading… text is absent when loading=true', () => {
+    const wrapper = mount(StorageBrowser, {
+      props: { loading: true, folders: [], files: [] },
+      global: { stubs: globalStubs },
+    })
+    expect(wrapper.text()).not.toContain('Loading…')
+  })
+
+  it('skeleton rows are NOT rendered when loading=false', () => {
+    const wrapper = mount(StorageBrowser, {
+      props: { loading: false, folders: [], files: [] },
+      global: { stubs: globalStubs },
+    })
+    const pulseEls = wrapper.findAll('.animate-pulse')
+    expect(pulseEls.length).toBe(0)
+  })
+
+  it('skeleton row grid matches grid-cols-[2rem_1fr_6rem_8rem_6rem]', () => {
+    const wrapper = mount(StorageBrowser, {
+      props: { loading: true, folders: [], files: [] },
+      global: { stubs: globalStubs },
+    })
+    const skeletonGrids = wrapper.findAll('.grid-cols-\\[2rem_1fr_6rem_8rem_6rem\\]')
+    expect(skeletonGrids.length).toBeGreaterThanOrEqual(1)
+  })
 })
 
 describe('UX-13: StorageBrowser folder picker uses Teleport + getBoundingClientRect', () => {