From 96fd25de5c2ed7e659f175a7ee1ea4226b3632d6 Mon Sep 17 00:00:00 2001
From: Jin Yi <jin12cc@gmail.com>
Date: Fri, 6 Mar 2026 17:32:20 +0900
Subject: [PATCH] feat: add Logo C fill and Comfy wave loading indicator
 components (#9433)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## 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>
---
 src/App.vue                                   |  14 +--
 .../{common => loader}/Loader.stories.ts      |   2 +-
 src/components/{common => loader}/Loader.vue  |   0
 .../loader/LogoCFillLoader.stories.ts         |  96 +++++++++++++++
 src/components/loader/LogoCFillLoader.vue     | 100 ++++++++++++++++
 .../loader/LogoComfyWaveLoader.stories.ts     |  96 +++++++++++++++
 src/components/loader/LogoComfyWaveLoader.vue | 111 ++++++++++++++++++
 src/components/toast/ProgressToastItem.vue    |   2 +-
 .../components/ActiveMediaAssetCard.vue       |   2 +-
 .../components/AssetExportProgressDialog.vue  |   2 +-
 .../components/ModelImportProgressDialog.vue  |   2 +-
 .../assets/components/UploadModelFooter.vue   |   2 +-
 .../workspace/auth/WorkspaceAuthGate.vue      |   4 +-
 .../extensions/linearMode/LinearControls.vue  |   2 +-
 .../OutputHistoryActiveQueueItem.vue          |   2 +-
 .../widgets/components/WidgetInputText.vue    |   2 +-
 16 files changed, 421 insertions(+), 18 deletions(-)
 rename src/components/{common => loader}/Loader.stories.ts (96%)
 rename src/components/{common => loader}/Loader.vue (100%)
 create mode 100644 src/components/loader/LogoCFillLoader.stories.ts
 create mode 100644 src/components/loader/LogoCFillLoader.vue
 create mode 100644 src/components/loader/LogoComfyWaveLoader.stories.ts
 create mode 100644 src/components/loader/LogoComfyWaveLoader.vue

diff --git a/src/App.vue b/src/App.vue
index 90e7e30e76..d8f25a1bf3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,13 +1,13 @@
 <template>
   <router-view />
-  <div
-    v-if="isLoading"
-    class="absolute inset-0 flex items-center justify-center"
-  >
-    <Loader size="lg" class="text-white" />
-  </div>
   <GlobalDialog />
   <BlockUI full-screen :blocked="isLoading" />
+  <div
+    v-if="isLoading"
+    class="pointer-events-none fixed inset-0 z-1200 flex items-center justify-center"
+  >
+    <LogoComfyWaveLoader size="xl" color="yellow" />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -15,7 +15,7 @@ import { captureException } from '@sentry/vue'
 import BlockUI from 'primevue/blockui'
 import { computed, onMounted } from 'vue'
 
-import Loader from '@/components/common/Loader.vue'
+import LogoComfyWaveLoader from '@/components/loader/LogoComfyWaveLoader.vue'
 import GlobalDialog from '@/components/dialog/GlobalDialog.vue'
 import config from '@/config'
 import { useWorkspaceStore } from '@/stores/workspaceStore'
diff --git a/src/components/common/Loader.stories.ts b/src/components/loader/Loader.stories.ts
similarity index 96%
rename from src/components/common/Loader.stories.ts
rename to src/components/loader/Loader.stories.ts
index f2ca9fb0b7..519920c548 100644
--- a/src/components/common/Loader.stories.ts
+++ b/src/components/loader/Loader.stories.ts
@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import Loader from './Loader.vue'
 
 const meta: Meta<typeof Loader> = {
-  title: 'Components/Common/Loader',
+  title: 'Components/Loader/Loader',
   component: Loader,
   tags: ['autodocs'],
   parameters: {
diff --git a/src/components/common/Loader.vue b/src/components/loader/Loader.vue
similarity index 100%
rename from src/components/common/Loader.vue
rename to src/components/loader/Loader.vue
diff --git a/src/components/loader/LogoCFillLoader.stories.ts b/src/components/loader/LogoCFillLoader.stories.ts
new file mode 100644
index 0000000000..13550cc7ad
--- /dev/null
+++ b/src/components/loader/LogoCFillLoader.stories.ts
@@ -0,0 +1,96 @@
+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>
+    `
+  })
+}
diff --git a/src/components/loader/LogoCFillLoader.vue b/src/components/loader/LogoCFillLoader.vue
new file mode 100644
index 0000000000..05ec3b5938
--- /dev/null
+++ b/src/components/loader/LogoCFillLoader.vue
@@ -0,0 +1,100 @@
+<template>
+  <span role="status" :class="cn('inline-flex', colorClass)">
+    <svg
+      :width="Math.round(heightMap[size] * (VB_W / VB_H))"
+      :height="heightMap[size]"
+      :viewBox="`0 0 ${VB_W} ${VB_H}`"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        <mask :id="maskId">
+          <path :d="C_PATH" fill="white" />
+        </mask>
+      </defs>
+      <path
+        v-if="bordered"
+        :d="C_PATH"
+        stroke="currentColor"
+        stroke-width="2"
+        fill="none"
+        opacity="0.4"
+      />
+      <g :mask="`url(#${maskId})`">
+        <rect
+          :class="disableAnimation ? undefined : 'c-fill-rect'"
+          :x="-BLEED"
+          :y="-BLEED"
+          :width="VB_W + BLEED * 2"
+          :height="VB_H + BLEED * 2"
+          fill="currentColor"
+        />
+      </g>
+    </svg>
+    <span class="sr-only">{{ t('g.loading') }}</span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { useId, computed } from 'vue'
+
+import { cn } from '@/utils/tailwindUtil'
+import { useI18n } from 'vue-i18n'
+
+const {
+  size = 'md',
+  color = 'black',
+  bordered = true,
+  disableAnimation = false
+} = defineProps<{
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+  color?: 'yellow' | 'blue' | 'white' | 'black'
+  bordered?: boolean
+  disableAnimation?: boolean
+}>()
+
+const { t } = useI18n()
+const maskId = `c-mask-${useId()}`
+
+const VB_W = 185
+const VB_H = 201
+const BLEED = 1
+
+// Larger than LogoComfyWaveLoader because the C logo is near-square (185×201)
+// while the COMFY wordmark is wide (879×284), so larger heights are needed
+// for visually comparable perceived size.
+const heightMap = { sm: 48, md: 80, lg: 120, xl: 200 } as const
+const colorMap = {
+  yellow: 'text-brand-yellow',
+  blue: 'text-brand-blue',
+  white: 'text-white',
+  black: 'text-black'
+} as const
+
+const colorClass = computed(() => colorMap[color])
+
+const C_PATH =
+  'M42.1217 200.812C37.367 200.812 33.5304 199.045 31.0285 195.703C28.4569 192.27 27.7864 187.477 29.1882 182.557L34.8172 162.791C35.2661 161.217 34.9537 159.523 33.9747 158.214C32.9958 156.908 31.464 156.139 29.8371 156.139L13.6525 156.139C8.89521 156.139 5.05862 154.374 2.55797 151.032C-0.0136533 147.597-0.684085 142.804 0.71869 137.883L20.0565 70.289L22.1916 62.8625C25.0617 52.7847 35.5288 44.5943 45.528 44.5943L64.8938 44.5943C67.2048 44.5943 69.2376 43.0535 69.8738 40.8175L76.2782 18.3344C79.1454 8.26681 89.6127 0.0763962 99.6117 0.0763945L141.029 0.00258328L171.349-2.99253e-05C176.104-3.0756e-05 179.941 1.765 182.442 5.10626C185.013 8.53932 185.684 13.3324 184.282 18.2528L175.612 48.6947C172.746 58.7597 162.279 66.9475 152.28 66.9475L110.771 67.0265L91.4113 67.0265C89.1029 67.0265 87.0727 68.5647 86.4326 70.7983L70.2909 127.179C69.8394 128.756 70.1518 130.454 71.1334 131.763C72.1123 133.07 73.6441 133.839 75.2697 133.839C75.2736 133.839 102.699 133.785 102.699 133.785L132.929 133.785C137.685 133.785 141.522 135.55 144.023 138.892C146.594 142.327 147.265 147.12 145.862 152.041L137.192 182.478C134.326 192.545 123.859 200.733 113.86 200.733L72.3517 200.812L42.1217 200.812Z'
+</script>
+
+<style scoped>
+.c-fill-rect {
+  animation: c-fill-up 2.5s cubic-bezier(0.25, 0, 0.3, 1) forwards;
+  will-change: transform;
+}
+
+@keyframes c-fill-up {
+  0% {
+    transform: translateY(calc(v-bind(VB_H) * 1px + v-bind(BLEED) * 1px));
+  }
+  100% {
+    transform: translateY(calc(v-bind(BLEED) * -1px));
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .c-fill-rect {
+    animation: none;
+  }
+}
+</style>
diff --git a/src/components/loader/LogoComfyWaveLoader.stories.ts b/src/components/loader/LogoComfyWaveLoader.stories.ts
new file mode 100644
index 0000000000..7057b1a12e
--- /dev/null
+++ b/src/components/loader/LogoComfyWaveLoader.stories.ts
@@ -0,0 +1,96 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+
+import LogoComfyWaveLoader from './LogoComfyWaveLoader.vue'
+
+const meta: Meta<typeof LogoComfyWaveLoader> = {
+  title: 'Components/Loader/LogoComfyWaveLoader',
+  component: LogoComfyWaveLoader,
+  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: { LogoComfyWaveLoader },
+    template: `
+      <div class="flex flex-col items-center gap-12">
+        <div class="flex flex-col items-center gap-2">
+          <span class="text-xs text-neutral-400">#F0FF41 (Yellow)</span>
+          <LogoComfyWaveLoader size="lg" color="yellow" />
+        </div>
+        <div class="flex flex-col items-center gap-2">
+          <span class="text-xs text-neutral-400">#172DD7 (Blue)</span>
+          <LogoComfyWaveLoader size="lg" color="blue" />
+        </div>
+        <div class="flex flex-col items-center gap-2">
+          <span class="text-xs text-neutral-400">White</span>
+          <LogoComfyWaveLoader 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>
+            <LogoComfyWaveLoader size="lg" color="black" />
+          </div>
+        </div>
+      </div>
+    `
+  })
+}
+
+export const AllSizes: Story = {
+  render: () => ({
+    components: { LogoComfyWaveLoader },
+    template: `
+      <div class="flex flex-col items-center gap-8">
+        <LogoComfyWaveLoader size="sm" color="yellow" />
+        <LogoComfyWaveLoader size="md" color="yellow" />
+        <LogoComfyWaveLoader size="lg" color="yellow" />
+        <LogoComfyWaveLoader size="xl" color="yellow" />
+      </div>
+    `
+  })
+}
diff --git a/src/components/loader/LogoComfyWaveLoader.vue b/src/components/loader/LogoComfyWaveLoader.vue
new file mode 100644
index 0000000000..56f584d2aa
--- /dev/null
+++ b/src/components/loader/LogoComfyWaveLoader.vue
@@ -0,0 +1,111 @@
+<template>
+  <span role="status" :class="cn('inline-flex', colorClass)">
+    <svg
+      :width="Math.round(heightMap[size] * (879 / 284))"
+      :height="heightMap[size]"
+      viewBox="0 0 879 284"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <defs>
+        <mask :id="maskId">
+          <path :d="COMFY_PATH" fill="white" />
+        </mask>
+      </defs>
+      <path
+        v-if="bordered"
+        :d="COMFY_PATH"
+        stroke="currentColor"
+        stroke-width="2"
+        fill="none"
+        opacity="0.4"
+      />
+      <g :mask="`url(#${maskId})`">
+        <g :class="disableAnimation ? 'wave-group-static' : 'wave-group'">
+          <path
+            :class="disableAnimation ? undefined : 'wave-path'"
+            d="M 0 50 Q 110 0 220 50 T 440 50 T 660 50 T 880 50 T 1100 50 T 1320 50 T 1540 50 T 1760 50 V 400 H 0 Z"
+            fill="currentColor"
+          />
+        </g>
+      </g>
+    </svg>
+    <span class="sr-only">{{ t('g.loading') }}</span>
+  </span>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@/utils/tailwindUtil'
+import { computed, useId } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const {
+  size = 'md',
+  color = 'black',
+  bordered = true,
+  disableAnimation = false
+} = defineProps<{
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+  color?: 'yellow' | 'blue' | 'white' | 'black'
+  bordered?: boolean
+  disableAnimation?: boolean
+}>()
+
+const { t } = useI18n()
+const maskId = `comfy-mask-${useId()}`
+
+const heightMap = { sm: 40, md: 64, lg: 80, xl: 120 } as const
+const colorMap = {
+  yellow: 'text-brand-yellow',
+  blue: 'text-brand-blue',
+  white: 'text-white',
+  black: 'text-black'
+} as const
+
+const colorClass = computed(() => colorMap[color])
+
+const COMFY_PATH =
+  'M711.422 248.72C707.034 248.72 703.494 247.183 701.186 244.272C698.813 241.279 698.194 237.103 699.489 232.817L707.489 206.3C710.133 197.531 719.791 190.399 729.019 190.399H746.955C749.088 190.399 750.963 189.056 751.55 187.108L754.645 176.854C755.059 175.48 754.771 174.005 753.867 172.865C752.964 171.726 751.549 171.056 750.048 171.056L710.741 171.063C710.521 171.034 710.315 171.021 710.091 171.021H696.848C692.46 171.021 688.92 169.483 686.612 166.572C684.24 163.579 683.621 159.404 684.914 155.12L686.458 149.999C686.872 148.628 686.583 147.153 685.68 146.012C684.776 144.874 683.363 144.204 681.862 144.204H676.789C674.655 144.204 672.781 145.546 672.194 147.496L669.894 155.12C667.25 163.888 657.591 171.021 648.363 171.021H630.472C628.343 171.021 626.47 172.359 625.879 174.302L620.795 191.024C620.773 191.088 620.714 191.259 620.696 191.324L613.437 215.218C613.406 215.3 613.361 215.432 613.337 215.516L608.085 232.812C605.44 241.587 595.781 248.72 586.553 248.72H558.654C554.265 248.72 550.725 247.183 548.417 244.272C546.044 241.281 545.426 237.106 546.719 232.819L570.103 155.73C570.132 155.65 570.186 155.49 570.211 155.408L571.845 150.004C572.261 148.633 571.974 147.155 571.07 146.015C570.167 144.874 568.752 144.204 567.251 144.204H562.23C560.1 144.204 558.228 145.544 557.637 147.488L547.458 181.009C547.427 181.091 547.383 181.224 547.359 181.307L543.518 193.96C540.872 202.737 531.213 209.872 521.986 209.872H494.087C489.697 209.872 486.157 208.334 483.849 205.423C481.478 202.428 480.858 198.253 482.152 193.968L499.106 138.023C499.521 136.652 499.234 135.174 498.332 134.032C497.429 132.891 496.014 132.221 494.512 132.221H489.46C487.328 132.221 485.453 133.564 484.865 135.511L477.637 159.435C477.607 159.515 477.563 159.646 477.539 159.728L467.135 193.96C464.486 202.737 454.827 209.872 445.602 209.872H417.702C413.314 209.872 409.773 208.334 407.466 205.423C405.093 202.43 404.474 198.255 405.768 193.968L413.768 167.451C413.798 167.371 413.841 167.245 413.866 167.163L422.735 137.976C423.152 136.605 422.866 135.125 421.964 133.985C421.06 132.844 419.644 132.172 418.142 132.172H413.138C411.008 132.172 409.136 133.512 408.545 135.456L407.821 137.843C407.795 137.912 407.74 138.074 407.719 138.143L391.406 191.801C391.382 191.872 391.322 192.045 391.301 192.116L390.745 193.977C388.102 202.736 378.444 209.872 369.217 209.872H341.317C336.929 209.872 333.389 208.334 331.081 205.423C328.708 202.43 328.09 198.255 329.383 193.968L330.92 188.87C331.335 187.499 331.046 186.023 330.143 184.883C329.24 183.745 327.826 183.075 326.325 183.075H321.269C319.14 183.075 317.267 184.413 316.676 186.358L314.366 193.959C311.718 202.736 302.059 209.872 292.832 209.872H274.751C272.619 209.872 270.743 211.214 270.156 213.162L264.225 232.817C261.582 241.587 251.923 248.72 242.695 248.72H214.796C210.406 248.72 206.866 247.182 204.559 244.272C202.186 241.279 201.567 237.103 202.861 232.817L208.034 215.667C208.449 214.296 208.16 212.82 207.257 211.68C206.354 210.542 204.94 209.872 203.439 209.872H188.549C184.162 209.872 180.622 208.334 178.312 205.423C175.94 202.43 175.32 198.255 176.614 193.971L178.152 188.87C178.565 187.499 178.277 186.023 177.374 184.883C176.47 183.745 175.057 183.075 173.556 183.075H168.484C166.352 183.075 164.477 184.417 163.889 186.365L161.594 193.968C158.949 202.739 149.29 209.872 140.064 209.872L101.849 209.936L73.8677 209.938C69.4791 209.938 65.9389 208.4 63.6315 205.49C61.2597 202.497 60.6399 198.321 61.9333 194.037L67.1284 176.818C67.5427 175.445 67.2544 173.969 66.351 172.829C65.4477 171.691 64.0342 171.021 62.5331 171.021H47.5966C43.208 171.021 39.6678 169.483 37.3603 166.572C34.9886 163.579 34.3687 159.404 35.6622 155.12L49.5706 109.183C49.5961 109.114 49.6535 108.941 49.6755 108.872L54.1657 94.0759C54.2065 93.9693 54.2414 93.8651 54.2742 93.7565L55.4811 89.7518C58.1259 80.9836 67.7834 73.8485 77.0099 73.8485H94.8809C97.0133 73.8485 98.8891 72.5063 99.4762 70.5584L105.386 50.9721C108.031 42.2017 117.689 35.0688 126.917 35.0688L165.219 35H193.112C197.501 35 201.041 36.5376 203.348 39.4484C205.721 42.4414 206.34 46.6169 205.046 50.9033L197.046 77.4229C194.4 86.1911 184.742 93.3239 175.515 93.3239L137.214 93.3905H119.35C117.219 93.3905 115.344 94.7327 114.755 96.6786L106.875 122.741C106.846 122.823 106.801 122.954 106.777 123.036L99.8637 145.791C99.4458 147.164 99.7329 148.644 100.639 149.786C101.542 150.925 102.955 151.595 104.457 151.595C104.46 151.595 129.766 151.548 129.766 151.548H157.66C162.048 151.548 165.588 153.086 167.896 155.996C170.269 158.989 170.887 163.165 169.594 167.451L168.001 172.736C167.586 174.107 167.875 175.583 168.778 176.723C169.681 177.861 171.095 178.531 172.596 178.531H177.668C179.799 178.531 181.673 177.189 182.263 175.243L185.271 165.297C185.3 165.215 196.429 128.61 196.429 128.61C199.076 119.833 208.735 112.7 217.963 112.7H235.772C237.904 112.7 239.78 111.358 240.367 109.407L246.281 89.8011C248.928 81.0329 258.588 73.8978 267.814 73.8978H295.712C300.1 73.8978 303.641 75.4354 305.948 78.3462C308.321 81.3392 308.941 85.5147 307.647 89.7988L302.487 106.905C302.073 108.276 302.361 109.751 303.265 110.892C304.168 112.03 305.581 112.7 307.083 112.7H322.247C326.635 112.7 330.176 114.237 332.483 117.148C334.856 120.141 335.475 124.317 334.18 128.603L320.819 172.732C320.404 174.103 320.691 175.581 321.594 176.721C322.496 177.862 323.911 178.532 325.414 178.532H330.437C332.567 178.532 334.441 177.192 335.031 175.246L341.321 154.506C341.344 154.444 341.399 154.277 341.419 154.215L357.733 100.555C357.763 100.471 357.809 100.335 357.835 100.251L361.017 89.7591C363.664 80.9843 373.322 73.8492 382.549 73.8492H448.624C453.011 73.8492 456.551 75.3889 458.86 78.2999C461.233 81.2906 461.853 85.4661 460.559 89.7502L455.384 106.903C454.97 108.276 455.258 109.751 456.162 110.89C457.065 112.03 458.478 112.7 459.979 112.7H465.191C467.324 112.7 469.199 111.358 469.786 109.41L475.702 89.8013C478.348 81.0332 488.006 73.8981 497.233 73.8981H525.132C529.521 73.8981 533.061 75.4357 535.369 78.3464C537.742 81.3394 538.36 85.5149 537.067 89.8013L531.908 106.905C531.493 108.276 531.782 109.751 532.685 110.892C533.588 112.03 535.002 112.7 536.503 112.7H551.4C555.788 112.7 559.329 114.238 561.636 117.148C564.008 120.141 564.628 124.317 563.334 128.601L561.747 133.866C561.333 135.237 561.621 136.712 562.524 137.853C563.427 138.991 564.841 139.661 566.342 139.661H571.396C573.525 139.661 575.397 138.323 575.989 136.38L590.169 89.7616C592.816 80.9823 602.475 73.8494 611.702 73.8494H629.638C631.77 73.8494 633.645 72.5072 634.233 70.5593L640.165 50.9042C642.81 42.1338 652.468 35.0009 661.695 35.0009H689.594C693.984 35.0009 697.524 36.5385 699.832 39.4493C702.205 42.4423 702.823 46.6178 701.529 50.9042L693.529 77.4238C690.884 86.192 681.225 93.3248 671.999 93.3248H654.061C651.929 93.3248 650.053 94.667 649.466 96.6172L646.363 106.905C645.948 108.276 646.237 109.752 647.14 110.892C648.043 112.03 649.457 112.7 650.958 112.7H665.96C670.349 112.7 673.889 114.238 676.196 117.149C678.569 120.139 679.188 124.315 677.894 128.601L676.307 133.866C675.893 135.237 676.181 136.713 677.084 137.853C677.988 138.991 679.401 139.661 680.902 139.661H685.975C688.105 139.661 689.977 138.323 690.568 136.378L704.728 89.7616C707.378 80.9846 717.036 73.8494 726.262 73.8494H754.162C758.551 73.8494 762.091 75.3871 764.399 78.2978C766.772 81.2908 767.39 85.4663 766.096 89.7527L753.502 131.375C753.47 131.457 753.427 131.588 753.401 131.672L752.052 136.125C751.636 137.498 751.922 138.976 752.826 140.116C753.729 141.256 755.144 141.927 756.646 141.927H761.637C763.767 141.927 765.64 140.587 766.231 138.643L781.068 89.7618C783.717 80.9848 793.375 73.8497 802.602 73.8497H830.501C834.889 73.8497 838.429 75.3893 840.737 78.3003C843.11 81.291 843.729 85.4665 842.436 89.7529L810.847 193.965C808.2 202.74 798.541 209.873 789.316 209.873H771.378C769.246 209.873 767.37 211.215 766.783 213.163L760.852 232.818C758.208 241.589 748.549 248.721 739.322 248.721L711.422 248.72ZM260.308 132.221C258.177 132.221 256.304 133.561 255.713 135.507L240.828 184.597C240.413 185.968 240.698 187.446 241.602 188.586C242.505 189.729 243.92 190.399 245.422 190.399H250.472C252.602 190.399 254.476 189.059 255.067 187.113L269.952 138.023C270.367 136.652 270.081 135.175 269.178 134.034C268.275 132.891 266.86 132.221 265.358 132.221H260.308Z'
+</script>
+
+<style scoped>
+.wave-group {
+  animation: rise-up 4s ease-in-out infinite alternate;
+}
+
+.wave-path {
+  animation: wave-move 1.2s linear infinite;
+}
+
+@keyframes rise-up {
+  0% {
+    transform: translateY(280px);
+  }
+  100% {
+    transform: translateY(-80px);
+  }
+}
+
+@keyframes wave-move {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-880px);
+  }
+}
+
+.wave-group-static {
+  transform: translateY(280px);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .wave-group,
+  .wave-path {
+    animation: none;
+  }
+  .wave-group {
+    transform: translateY(-80px);
+  }
+}
+</style>
diff --git a/src/components/toast/ProgressToastItem.vue b/src/components/toast/ProgressToastItem.vue
index 89a2bda3d8..2732c5b36f 100644
--- a/src/components/toast/ProgressToastItem.vue
+++ b/src/components/toast/ProgressToastItem.vue
@@ -2,7 +2,7 @@
 import { computed } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import Loader from '@/components/common/Loader.vue'
+import Loader from '@/components/loader/Loader.vue'
 import StatusBadge from '@/components/common/StatusBadge.vue'
 import type { AssetDownload } from '@/stores/assetDownloadStore'
 import { cn } from '@/utils/tailwindUtil'
diff --git a/src/platform/assets/components/ActiveMediaAssetCard.vue b/src/platform/assets/components/ActiveMediaAssetCard.vue
index d6ba7c4b61..a87bd9ea55 100644
--- a/src/platform/assets/components/ActiveMediaAssetCard.vue
+++ b/src/platform/assets/components/ActiveMediaAssetCard.vue
@@ -74,7 +74,7 @@
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import Loader from '@/components/common/Loader.vue'
+import Loader from '@/components/loader/Loader.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useJobActions } from '@/composables/queue/useJobActions'
 import type { JobListItem } from '@/composables/queue/useJobList'
diff --git a/src/platform/assets/components/AssetExportProgressDialog.vue b/src/platform/assets/components/AssetExportProgressDialog.vue
index 95856fb93c..e28764d730 100644
--- a/src/platform/assets/components/AssetExportProgressDialog.vue
+++ b/src/platform/assets/components/AssetExportProgressDialog.vue
@@ -2,7 +2,7 @@
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import Loader from '@/components/common/Loader.vue'
+import Loader from '@/components/loader/Loader.vue'
 import HoneyToast from '@/components/honeyToast/HoneyToast.vue'
 import Button from '@/components/ui/button/Button.vue'
 import type { AssetExport } from '@/stores/assetExportStore'
diff --git a/src/platform/assets/components/ModelImportProgressDialog.vue b/src/platform/assets/components/ModelImportProgressDialog.vue
index 80c1716af5..8c02cb8eb4 100644
--- a/src/platform/assets/components/ModelImportProgressDialog.vue
+++ b/src/platform/assets/components/ModelImportProgressDialog.vue
@@ -4,7 +4,7 @@ import Popover from 'primevue/popover'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import Loader from '@/components/common/Loader.vue'
+import Loader from '@/components/loader/Loader.vue'
 import HoneyToast from '@/components/honeyToast/HoneyToast.vue'
 import ProgressToastItem from '@/components/toast/ProgressToastItem.vue'
 import Button from '@/components/ui/button/Button.vue'
diff --git a/src/platform/assets/components/UploadModelFooter.vue b/src/platform/assets/components/UploadModelFooter.vue
index 6e8e7741f5..a7d10e76f6 100644
--- a/src/platform/assets/components/UploadModelFooter.vue
+++ b/src/platform/assets/components/UploadModelFooter.vue
@@ -106,7 +106,7 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 
-import Loader from '@/components/common/Loader.vue'
+import Loader from '@/components/loader/Loader.vue'
 import Button from '@/components/ui/button/Button.vue'
 import VideoHelpDialog from '@/platform/assets/components/VideoHelpDialog.vue'
 
diff --git a/src/platform/workspace/auth/WorkspaceAuthGate.vue b/src/platform/workspace/auth/WorkspaceAuthGate.vue
index 34e49b3fe3..438c250c48 100644
--- a/src/platform/workspace/auth/WorkspaceAuthGate.vue
+++ b/src/platform/workspace/auth/WorkspaceAuthGate.vue
@@ -4,7 +4,7 @@
     v-else
     class="fixed inset-0 z-1100 flex items-center justify-center bg-(--p-mask-background)"
   >
-    <Loader size="lg" class="text-white" />
+    <LogoComfyWaveLoader size="xl" color="yellow" disable-animation />
   </div>
 </template>
 
@@ -22,7 +22,6 @@
  * instead of workspace tokens when the workspace feature is enabled.
  */
 import { promiseTimeout, until } from '@vueuse/core'
-import Loader from '@/components/common/Loader.vue'
 import { storeToRefs } from 'pinia'
 import { onMounted, ref } from 'vue'
 
@@ -31,6 +30,7 @@ import { isCloud } from '@/platform/distribution/types'
 import { refreshRemoteConfig } from '@/platform/remoteConfig/refreshRemoteConfig'
 import { useTeamWorkspaceStore } from '@/platform/workspace/stores/teamWorkspaceStore'
 import { useFirebaseAuthStore } from '@/stores/firebaseAuthStore'
+import LogoComfyWaveLoader from '@/components/loader/LogoComfyWaveLoader.vue'
 
 const FIREBASE_INIT_TIMEOUT_MS = 16_000
 const CONFIG_REFRESH_TIMEOUT_MS = 10_000
diff --git a/src/renderer/extensions/linearMode/LinearControls.vue b/src/renderer/extensions/linearMode/LinearControls.vue
index c33ef374df..706e387941 100644
--- a/src/renderer/extensions/linearMode/LinearControls.vue
+++ b/src/renderer/extensions/linearMode/LinearControls.vue
@@ -5,7 +5,7 @@ import { storeToRefs } from 'pinia'
 import { computed, ref, shallowRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import Loader from '@/components/common/Loader.vue'
+import Loader from '@/components/loader/Loader.vue'
 import ScrubableNumberInput from '@/components/common/ScrubableNumberInput.vue'
 import Popover from '@/components/ui/Popover.vue'
 import Button from '@/components/ui/button/Button.vue'
diff --git a/src/renderer/extensions/linearMode/OutputHistoryActiveQueueItem.vue b/src/renderer/extensions/linearMode/OutputHistoryActiveQueueItem.vue
index f0a3e1f17a..b37a57c3b3 100644
--- a/src/renderer/extensions/linearMode/OutputHistoryActiveQueueItem.vue
+++ b/src/renderer/extensions/linearMode/OutputHistoryActiveQueueItem.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useI18n } from 'vue-i18n'
 
-import Loader from '@/components/common/Loader.vue'
+import Loader from '@/components/loader/Loader.vue'
 import Popover from '@/components/ui/Popover.vue'
 import Button from '@/components/ui/button/Button.vue'
 import { useCommandStore } from '@/stores/commandStore'
diff --git a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue
index 4c41701a3a..aed2ad5956 100644
--- a/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue
+++ b/src/renderer/extensions/vueNodes/widgets/components/WidgetInputText.vue
@@ -30,7 +30,7 @@
 import InputText from 'primevue/inputtext'
 import { computed } from 'vue'
 
-import Loader from '@/components/common/Loader.vue'
+import Loader from '@/components/loader/Loader.vue'
 import type { SimplifiedWidget } from '@/types/simplifiedWidget'
 import { cn } from '@/utils/tailwindUtil'
 import {