feat: Use store cache for AssetBrowserModal with stale-while-revalidate pattern

Amp-Thread-ID: https://ampcode.com/threads/T-019b99d4-72f2-71fe-84d6-7c4f4847a47c
Co-authored-by: Amp <amp@ampcode.com>

Author: DrJKL

src/platform/assets/components/AssetBrowserModal.test.ts

@@ -5,18 +5,10 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'
 import AssetBrowserModal from '@/platform/assets/components/AssetBrowserModal.vue'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
 
-const mockAssetService = vi.hoisted(() => ({
-  getAssetsForNodeType: vi.fn(),
-  getAssetsByTag: vi.fn(),
-  getAssetDetails: vi.fn((id: string) =>
-    Promise.resolve({
-      id,
-      name: 'Test Model',
-      user_metadata: {
-        filename: 'Test Model'
-      }
-    })
-  )
+const mockAssetsStore = vi.hoisted(() => ({
+  modelAssetsByNodeType: new Map<string, unknown[]>(),
+  modelLoadingByNodeType: new Map<string, boolean>(),
+  updateModelsForNodeType: vi.fn()
 }))
 
 vi.mock('@/i18n', () => ({
@@ -25,8 +17,8 @@ vi.mock('@/i18n', () => ({
   d: (date: Date) => date.toLocaleDateString()
 }))
 
-vi.mock('@/platform/assets/services/assetService', () => ({
-  assetService: mockAssetService
+vi.mock('@/stores/assetsStore', () => ({
+  useAssetsStore: () => mockAssetsStore
 }))
 
 vi.mock('@/stores/modelToNodeStore', () => ({
@@ -191,8 +183,9 @@ describe('AssetBrowserModal', () => {
   }
 
   beforeEach(() => {
-    mockAssetService.getAssetsForNodeType.mockReset()
-    mockAssetService.getAssetsByTag.mockReset()
+    mockAssetsStore.modelAssetsByNodeType.clear()
+    mockAssetsStore.modelLoadingByNodeType.clear()
+    mockAssetsStore.updateModelsForNodeType.mockReset()
   })
 
   describe('Integration with useAssetBrowser', () => {
@@ -201,7 +194,10 @@ describe('AssetBrowserModal', () => {
         createTestAsset('asset1', 'Model A', 'checkpoints'),
         createTestAsset('asset2', 'Model B', 'loras')
       ]
-      mockAssetService.getAssetsForNodeType.mockResolvedValueOnce(assets)
+      mockAssetsStore.modelAssetsByNodeType.set(
+        'CheckpointLoaderSimple',
+        assets
+      )
 
       const wrapper = createWrapper({ nodeType: 'CheckpointLoaderSimple' })
       await flushPromises()
@@ -218,7 +214,10 @@ describe('AssetBrowserModal', () => {
         createTestAsset('c1', 'model.safetensors', 'checkpoints'),
         createTestAsset('l1', 'lora.pt', 'loras')
       ]
-      mockAssetService.getAssetsForNodeType.mockResolvedValueOnce(assets)
+      mockAssetsStore.modelAssetsByNodeType.set(
+        'CheckpointLoaderSimple',
+        assets
+      )
 
       const wrapper = createWrapper({
         nodeType: 'CheckpointLoaderSimple',
@@ -234,31 +233,39 @@ describe('AssetBrowserModal', () => {
   })
 
   describe('Data fetching', () => {
-    it('fetches assets for node type', async () => {
-      mockAssetService.getAssetsForNodeType.mockResolvedValueOnce([])
-
+    it('triggers store refresh for node type on mount', async () => {
       createWrapper({ nodeType: 'CheckpointLoaderSimple' })
       await flushPromises()
 
-      expect(mockAssetService.getAssetsForNodeType).toHaveBeenCalledWith(
+      expect(mockAssetsStore.updateModelsForNodeType).toHaveBeenCalledWith(
         'CheckpointLoaderSimple'
       )
     })
 
-    it('fetches assets for tag when node type not provided', async () => {
-      mockAssetService.getAssetsByTag.mockResolvedValueOnce([])
+    it('displays cached assets immediately from store', async () => {
+      const assets = [createTestAsset('asset1', 'Cached Model', 'checkpoints')]
+      mockAssetsStore.modelAssetsByNodeType.set(
+        'CheckpointLoaderSimple',
+        assets
+      )
 
-      createWrapper({ assetType: 'loras' })
-      await flushPromises()
+      const wrapper = createWrapper({ nodeType: 'CheckpointLoaderSimple' })
+
+      const assetGrid = wrapper.findComponent({ name: 'AssetGrid' })
+      const gridAssets = assetGrid.props('assets') as AssetItem[]
 
-      expect(mockAssetService.getAssetsByTag).toHaveBeenCalledWith('loras')
+      expect(gridAssets).toHaveLength(1)
+      expect(gridAssets[0].name).toBe('Cached Model')
     })
   })
 
   describe('Asset Selection', () => {
     it('emits asset-select event when asset is selected', async () => {
       const assets = [createTestAsset('asset1', 'Model A', 'checkpoints')]
-      mockAssetService.getAssetsForNodeType.mockResolvedValueOnce(assets)
+      mockAssetsStore.modelAssetsByNodeType.set(
+        'CheckpointLoaderSimple',
+        assets
+      )
 
       const wrapper = createWrapper({ nodeType: 'CheckpointLoaderSimple' })
       await flushPromises()
@@ -271,7 +278,10 @@ describe('AssetBrowserModal', () => {
 
     it('executes onSelect callback when provided', async () => {
       const assets = [createTestAsset('asset1', 'Model A', 'checkpoints')]
-      mockAssetService.getAssetsForNodeType.mockResolvedValueOnce(assets)
+      mockAssetsStore.modelAssetsByNodeType.set(
+        'CheckpointLoaderSimple',
+        assets
+      )
 
       const onSelect = vi.fn()
       const wrapper = createWrapper({
@@ -289,8 +299,6 @@ describe('AssetBrowserModal', () => {
 
   describe('Left Panel Conditional Logic', () => {
     it('hides left panel by default when showLeftPanel is undefined', async () => {
-      mockAssetService.getAssetsForNodeType.mockResolvedValueOnce([])
-
       const wrapper = createWrapper({ nodeType: 'CheckpointLoaderSimple' })
       await flushPromises()
 
@@ -299,8 +307,6 @@ describe('AssetBrowserModal', () => {
     })
 
     it('shows left panel when showLeftPanel prop is explicitly true', async () => {
-      mockAssetService.getAssetsForNodeType.mockResolvedValueOnce([])
-
       const wrapper = createWrapper({
         nodeType: 'CheckpointLoaderSimple',
         showLeftPanel: true
@@ -318,7 +324,10 @@ describe('AssetBrowserModal', () => {
         createTestAsset('asset1', 'Model A', 'checkpoints'),
         createTestAsset('asset2', 'Model B', 'loras')
       ]
-      mockAssetService.getAssetsForNodeType.mockResolvedValueOnce(assets)
+      mockAssetsStore.modelAssetsByNodeType.set(
+        'CheckpointLoaderSimple',
+        assets
+      )
 
       const wrapper = createWrapper({
         nodeType: 'CheckpointLoaderSimple',
@@ -339,8 +348,6 @@ describe('AssetBrowserModal', () => {
 
   describe('Title Management', () => {
     it('passes custom title to BaseModalLayout when title prop provided', async () => {
-      mockAssetService.getAssetsForNodeType.mockResolvedValueOnce([])
-
       const wrapper = createWrapper({
         nodeType: 'CheckpointLoaderSimple',
         title: 'Custom Title'
@@ -353,7 +360,10 @@ describe('AssetBrowserModal', () => {
 
     it('passes computed contentTitle to BaseModalLayout when no title prop', async () => {
       const assets = [createTestAsset('asset1', 'Model A', 'checkpoints')]
-      mockAssetService.getAssetsForNodeType.mockResolvedValueOnce(assets)
+      mockAssetsStore.modelAssetsByNodeType.set(
+        'CheckpointLoaderSimple',
+        assets
+      )
 
       const wrapper = createWrapper({ nodeType: 'CheckpointLoaderSimple' })
       await flushPromises()

src/platform/assets/components/AssetBrowserModal.vue

@@ -63,12 +63,8 @@
 </template>
 
 <script setup lang="ts">
-import {
-  breakpointsTailwind,
-  useAsyncState,
-  useBreakpoints
-} from '@vueuse/core'
-import { computed, provide, watch } from 'vue'
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
+import { computed, provide, ref, watchEffect } from 'vue'
 import { useI18n } from 'vue-i18n'
 
 import SearchBox from '@/components/common/SearchBox.vue'
@@ -81,68 +77,81 @@ import type { AssetDisplayItem } from '@/platform/assets/composables/useAssetBro
 import { useAssetBrowser } from '@/platform/assets/composables/useAssetBrowser'
 import { useModelUpload } from '@/platform/assets/composables/useModelUpload'
 import type { AssetItem } from '@/platform/assets/schemas/assetSchema'
-import { assetService } from '@/platform/assets/services/assetService'
 import { formatCategoryLabel } from '@/platform/assets/utils/categoryLabel'
-import { useAssetDownloadStore } from '@/stores/assetDownloadStore'
+import { useAssetsStore } from '@/stores/assetsStore'
 import { useModelToNodeStore } from '@/stores/modelToNodeStore'
 import { OnCloseKey } from '@/types/widgetTypes'
 
+const { t } = useI18n()
+const assetStore = useAssetsStore()
+const modelToNodeStore = useModelToNodeStore()
+const breakpoints = useBreakpoints(breakpointsTailwind)
+
 const props = defineProps<{
   nodeType?: string
+  assetType?: string
   onSelect?: (asset: AssetItem) => void
   onClose?: () => void
   showLeftPanel?: boolean
   title?: string
-  assetType?: string
 }>()
 
-const { t } = useI18n()
-
 const emit = defineEmits<{
   'asset-select': [asset: AssetDisplayItem]
   close: []
 }>()
 
-const breakpoints = useBreakpoints(breakpointsTailwind)
-
 provide(OnCloseKey, props.onClose ?? (() => {}))
 
-const fetchAssets = async () => {
-  if (props.nodeType) {
-    return (await assetService.getAssetsForNodeType(props.nodeType)) ?? []
-  }
-
-  if (props.assetType) {
-    return (await assetService.getAssetsByTag(props.assetType)) ?? []
-  }
+// Compute the cache key based on nodeType or assetType
+const cacheKey = computed(() => {
+  if (props.nodeType) return props.nodeType
+  if (props.assetType) return `tag:${props.assetType}`
+  return ''
+})
 
-  return []
-}
+// Read directly from store cache - reactive to any store updates
+const fetchedAssets = computed(
+  () => assetStore.modelAssetsByNodeType.get(cacheKey.value) ?? []
+)
 
-const {
-  state: fetchedAssets,
-  isLoading,
-  execute
-} = useAsyncState<AssetItem[]>(fetchAssets, [], { immediate: false })
-
-watch(
-  () => [props.nodeType, props.assetType],
-  async () => {
-    await execute()
-  },
-  { immediate: true }
+const isStoreLoading = computed(
+  () => assetStore.modelLoadingByNodeType.get(cacheKey.value) ?? false
 )
 
-const assetDownloadStore = useAssetDownloadStore()
+// Only show loading spinner when loading AND no cached data
+const isLoading = computed(
+  () => isStoreLoading.value && fetchedAssets.value.length === 0
+)
 
-watch(
-  () => assetDownloadStore.hasActiveDownloads,
-  async (currentlyActive, previouslyActive) => {
-    if (previouslyActive && !currentlyActive) {
-      await execute()
+// Track if we've triggered a refresh for this key
+const refreshedKey = ref<string | null>(null)
+
+// Trigger refresh when nodeType/assetType changes (runs on mount and prop change)
+watchEffect(async () => {
+  const key = cacheKey.value
+  if (key && key !== refreshedKey.value) {
+    refreshedKey.value = key
+    if (props.nodeType) {
+      await assetStore.updateModelsForNodeType(props.nodeType)
+    } else if (props.assetType) {
+      await assetStore.updateModelsForTag(props.assetType)
     }
   }
-)
+})
+
+async function refreshAssets(): Promise<AssetItem[]> {
+  if (props.nodeType) {
+    return await assetStore.updateModelsForNodeType(props.nodeType)
+  }
+  if (props.assetType) {
+    return await assetStore.updateModelsForTag(props.assetType)
+  }
+  return []
+}
+
+const { isUploadButtonEnabled, showUploadDialog } =
+  useModelUpload(refreshAssets)
 
 const {
   searchQuery,
@@ -153,8 +162,6 @@ const {
   updateFilters
 } = useAssetBrowser(fetchedAssets)
 
-const modelToNodeStore = useModelToNodeStore()
-
 const primaryCategoryTag = computed(() => {
   const assets = fetchedAssets.value ?? []
   const tagFromAssets = assets
@@ -202,6 +209,4 @@ function handleAssetSelectAndEmit(asset: AssetDisplayItem) {
   // It handles the appropriate transformation (filename extraction or full asset)
   props.onSelect?.(asset)
 }
-
-const { isUploadButtonEnabled, showUploadDialog } = useModelUpload(execute)
 </script>