mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 14:30:41 +00:00
96fd25de5c
## Summary Add SVG-based brand loading indicators (LogoCFillLoader, LogoComfyWaveLoader) and use the wave loader as the app loading screen. ## Changes - **What**: New `LogoCFillLoader` (bottom-to-top fill, plays once) and `LogoComfyWaveLoader` (wave water-fill animation) components with `size`, `color`, `bordered`, and `disableAnimation` props. Move all loaders from `components/common/` to `components/loader/`. Use `LogoComfyWaveLoader` in `App.vue` and `WorkspaceAuthGate.vue`. Render loader above BlockUI overlay (z-1200) to prevent dim wash-out. - **Dependencies**: None ## Review Focus - SVG mask-based animation approach using `currentColor` for flexible theming - z-index layering: loader at z-1200 renders above PrimeVue BlockUI's z-1100 modal overlay - `disableAnimation` prop used in WorkspaceAuthGate to show static logo outline during auth loading ## Screenshots (if applicable) [loading_record.webm](https://github.com/user-attachments/assets/b34f7296-9904-4a42-9273-a7d5fda49d15) Storybook stories added for both components under `Components/Loader/`. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9433-feat-add-Logo-C-fill-and-Comfy-wave-loading-indicator-components-31a6d73d3650811cacfdcf867b1f835f) by [Unito](https://www.unito.io) --------- Co-authored-by: GitHub Action <action@github.com>
97 lines
2.4 KiB
TypeScript
97 lines
2.4 KiB
TypeScript
import type { Meta, StoryObj } from '@storybook/vue3-vite'
|
|
|
|
import LogoCFillLoader from './LogoCFillLoader.vue'
|
|
|
|
const meta: Meta<typeof LogoCFillLoader> = {
|
|
title: 'Components/Loader/LogoCFillLoader',
|
|
component: LogoCFillLoader,
|
|
tags: ['autodocs'],
|
|
parameters: {
|
|
layout: 'centered',
|
|
backgrounds: { default: 'dark' }
|
|
},
|
|
argTypes: {
|
|
size: {
|
|
control: 'select',
|
|
options: ['sm', 'md', 'lg', 'xl']
|
|
},
|
|
color: {
|
|
control: 'select',
|
|
options: ['yellow', 'blue', 'white', 'black']
|
|
},
|
|
bordered: {
|
|
control: 'boolean'
|
|
},
|
|
disableAnimation: {
|
|
control: 'boolean'
|
|
}
|
|
}
|
|
}
|
|
|
|
export default meta
|
|
type Story = StoryObj<typeof meta>
|
|
|
|
export const Default: Story = {}
|
|
|
|
export const Small: Story = {
|
|
args: { size: 'sm' }
|
|
}
|
|
|
|
export const Large: Story = {
|
|
args: { size: 'lg' }
|
|
}
|
|
|
|
export const ExtraLarge: Story = {
|
|
args: { size: 'xl' }
|
|
}
|
|
|
|
export const NoBorder: Story = {
|
|
args: { bordered: false }
|
|
}
|
|
|
|
export const Static: Story = {
|
|
args: { disableAnimation: true }
|
|
}
|
|
|
|
export const BrandColors: Story = {
|
|
render: () => ({
|
|
components: { LogoCFillLoader },
|
|
template: `
|
|
<div class="flex items-end gap-12">
|
|
<div class="flex flex-col items-center gap-2">
|
|
<span class="text-xs text-neutral-400">Yellow</span>
|
|
<LogoCFillLoader size="lg" color="yellow" />
|
|
</div>
|
|
<div class="flex flex-col items-center gap-2">
|
|
<span class="text-xs text-neutral-400">Blue</span>
|
|
<LogoCFillLoader size="lg" color="blue" />
|
|
</div>
|
|
<div class="flex flex-col items-center gap-2">
|
|
<span class="text-xs text-neutral-400">White</span>
|
|
<LogoCFillLoader size="lg" color="white" />
|
|
</div>
|
|
<div class="p-4 bg-white rounded" style="background: white">
|
|
<div class="flex flex-col items-center gap-2">
|
|
<span class="text-xs text-neutral-600">Black</span>
|
|
<LogoCFillLoader size="lg" color="black" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
`
|
|
})
|
|
}
|
|
|
|
export const AllSizes: Story = {
|
|
render: () => ({
|
|
components: { LogoCFillLoader },
|
|
template: `
|
|
<div class="flex items-end gap-8">
|
|
<LogoCFillLoader size="sm" color="yellow" />
|
|
<LogoCFillLoader size="md" color="yellow" />
|
|
<LogoCFillLoader size="lg" color="yellow" />
|
|
<LogoCFillLoader size="xl" color="yellow" />
|
|
</div>
|
|
`
|
|
})
|
|
}
|