mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-10 07:30:08 +00:00
fix: show skeleton loading state in asset folder view (#8979)
## Description When clicking a multi-output job to enter folder view, `resolveOutputAssetItems` fetches job details asynchronously. During this fetch, the panel showed "No generated files found" because there was no loading state for the folder resolution—only the media list fetch had one. This replaces the empty state flash with skeleton cards that match the asset grid layout, using the known output count from metadata to render the correct number of placeholders. Supersedes #8960. ### Changes - **Add shadcn/vue `Skeleton` component** (`src/components/ui/skeleton/Skeleton.vue`) - **Use `useAsyncState`** from VueUse to track folder asset resolution, providing `isLoading` automatically - **Wire `folderLoading`** into `showLoadingState` and `showEmptyState` computeds - **Replace `ProgressSpinner`** with a skeleton grid that mirrors the asset card layout - **Use `metadata.outputCount`** to predict skeleton count; falls back to 6 ### Before / After | Before | After | |--------|-------| | "No generated files found" flash | Skeleton cards matching grid layout | ## Checklist - [x] Code follows project conventions - [x] No `any` types introduced - [x] Lint and typecheck pass ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8979-fix-show-skeleton-loading-state-in-asset-folder-view-30c6d73d365081fa9809f616204ed234) by [Unito](https://www.unito.io) --------- Co-authored-by: Amp <amp@ampcode.com>
This commit is contained in:
15
src/components/ui/skeleton/Skeleton.vue
Normal file
15
src/components/ui/skeleton/Skeleton.vue
Normal file
@@ -0,0 +1,15 @@
|
||||
<script setup lang="ts">
|
||||
import type { HTMLAttributes } from 'vue'
|
||||
|
||||
import { cn } from '@/utils/tailwindUtil'
|
||||
|
||||
const { class: className } = defineProps<{
|
||||
class?: HTMLAttributes['class']
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
:class="cn('animate-pulse rounded-md bg-secondary-background', className)"
|
||||
/>
|
||||
</template>
|
||||
Reference in New Issue
Block a user