Comfy-Org / Comfy-Org/ComfyUI_frontend

[Bug]: PackCardSkeleton doesn't match current PackCard design

Open
#4,525 0 comments 1 reaction 0 assignees View on GitHub
area:manager area:ui
Dominant language
TypeScript
Stars
2k
Forks
699
Avg merge
1d 7h
Merged PRs (30d)
490

Description

# PackCardSkeleton No Longer Matches Current PackCard Design

## Frontend Version
1.24.1

## Expected Behavior
The skeleton loading placeholder should accurately preview the structure of the PackCard components that will replace them, providing a smooth visual transition when content loads.

## Actual Behavior
The PackCardSkeleton component displays an outdated card structure that doesn't match the current PackCard design, creating a jarring visual transition when the actual cards load.

### Current Mismatch:

This used to be the Skeleton match:

Image

**PackCardSkeleton Structure (Outdated):**
- Header with small icon + title
- Side-by-side 64px icon with content
- Tags/badges in the content area
- Simple footer

**Actual PackCard Structure (Current):**
- Full-width PackBanner component (7:3 aspect ratio)
- Vertically stacked content below banner
- No side icon (banner replaces this)
- Different content organization

## Steps to Reproduce
1. Open ComfyUI Frontend
2. Navigate to the Manager dialog (click the Manager button)
3. Observe the skeleton placeholders that appear while content is loading
4. Notice how the skeleton structure doesn't match the cards that replace them

## Debug Logs
Not applicable - this is a UI consistency issue.

## Browser Logs
No errors - this is a visual design mismatch issue.

## Setting JSON
Not relevant to this issue.

## Root Cause Analysis

The skeleton was created in commit `0c6957bf` (March 19, 2025) to match the original card design. However, in commit `65289b19` (June 6, 2025), the PackCard underwent a major redesign that:
- Added the PackBanner component with a 7:3 aspect ratio
- Removed the side-by-side icon layout
- Changed the entire visual hierarchy

The PackCardSkeleton component was never updated to reflect these changes.

## Proposed Solution

Update PackCardSkeleton.vue to match the current PackCard structure:
1. Add a skeleton banner area with 7:3 aspect ratio
2. Remove the side icon skeleton
3. Adjust content layout to stack vertically
4. Match the current spacing and proportions

This will ensure loading states provide accurate structural preview of the content that will appear.

## Additional Context
- The skeleton component works correctly from a technical perspective
- This is purely a visual consistency issue
- Only affects the Manager dialog loading states currently

┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-4525-Bug-PackCardSkeleton-doesn-t-match-current-PackCard-design-23a6d73d36508155977bf92cec395244) by [Unito](https://www.unito.io)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.