mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-03-08 06:30:04 +00:00
706060a2bf
## Summary - Replace PrimeVue `ProgressSpinner` with Lucide `loader-circle` icon in App.vue and WorkspaceAuthGate.vue - Use white color for loading spinner for better visibility on dark backgrounds - Remove `primevue/progressspinner` imports and update related test ## Changes - **App.vue**: Replace `ProgressSpinner` with `icon-[lucide--loader-circle]` - **WorkspaceAuthGate.vue**: Same replacement - **WorkspaceAuthGate.test.ts**: Remove ProgressSpinner mock, use `.animate-spin` selector ## Review Focus - Visual consistency of white spinner on dark background during initial load <img width="1596" height="1189" alt="스크린샷 2026-03-04 오후 6 28 27" src="https://github.com/user-attachments/assets/d703db74-4123-4328-912a-45ac45cf6eeb" /> <img width="1680" height="1304" alt="스크린샷 2026-03-04 오후 6 28 24" src="https://github.com/user-attachments/assets/8026d10a-7e06-4f95-849c-bc891756823c" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-9372-refactor-Replace-PrimeVue-ProgressSpinner-with-Lucide-loader-icon-3196d73d3650815bb1d1d4554f7f744e) by [Unito](https://www.unito.io)
30 lines
570 B
Vue
30 lines
570 B
Vue
<template>
|
|
<span role="status" class="inline-flex">
|
|
<i
|
|
aria-hidden="true"
|
|
:class="cn('icon-[lucide--loader-circle] animate-spin', sizeClass)"
|
|
/>
|
|
<span class="sr-only">{{ t('g.loading') }}</span>
|
|
</span>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useI18n } from 'vue-i18n'
|
|
|
|
import { cn } from '@/utils/tailwindUtil'
|
|
|
|
const { size } = defineProps<{
|
|
size?: 'sm' | 'md' | 'lg'
|
|
}>()
|
|
|
|
const { t } = useI18n()
|
|
|
|
const sizeMap = {
|
|
sm: 'size-4',
|
|
md: 'size-8',
|
|
lg: 'size-12'
|
|
} as const
|
|
|
|
const sizeClass = size ? sizeMap[size] : ''
|
|
</script>
|