mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-02-28 02:34:10 +00:00
a13eeaea7e
* [feat] Add skeleton loading states to cloud onboarding flow - Create dedicated skeleton components matching exact layouts - CloudLoginViewSkeleton for login page with beta notice, form, social buttons - CloudSurveyViewSkeleton for multi-step survey with progress bar - CloudWaitlistViewSkeleton for waitlist page with title and messages - CloudClaimInviteViewSkeleton for invite claiming page - Update UserCheckView to show contextual skeleton based on redirect destination - Update InviteCheckView to show appropriate skeleton during loading - Use i18n for loading text to maintain consistency 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> * [feat] Fix skeleton loading flow to show progressive states - Start with simple loading text when checking user status - Show survey skeleton while checking survey completion - Show waitlist skeleton while checking user activation status - Show login skeleton when redirecting to login on error - Preserve all original comments from upstream authors - Use progressive disclosure based on API response flow 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com> --------- Co-authored-by: Claude <noreply@anthropic.com>
48 lines
1.6 KiB
Vue
48 lines
1.6 KiB
Vue
<template>
|
|
<div class="h-full flex items-center justify-center p-8">
|
|
<div class="w-96 p-2">
|
|
<div class="bg-[#2d2e32] p-4 rounded-lg">
|
|
<Skeleton width="60%" height="1.125rem" class="mb-2" />
|
|
<Skeleton width="90%" height="1rem" class="mb-2" />
|
|
<Skeleton width="80%" height="1rem" />
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-4 mt-6 mb-8">
|
|
<Skeleton width="45%" height="1.5rem" class="my-0" />
|
|
<div class="flex items-center">
|
|
<Skeleton width="25%" height="1rem" class="mr-1" />
|
|
<Skeleton width="20%" height="1rem" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-8">
|
|
<Skeleton width="20%" height="1rem" class="mb-2" />
|
|
<Skeleton width="100%" height="2.5rem" class="mb-4" />
|
|
<Skeleton width="25%" height="1rem" class="mb-4" />
|
|
<Skeleton width="100%" height="2.5rem" class="mb-6" />
|
|
<Skeleton width="80%" height="1rem" class="mb-4" />
|
|
<Skeleton width="100%" height="2.5rem" />
|
|
</div>
|
|
|
|
<div class="flex items-center my-8">
|
|
<div class="flex-1 border-t border-gray-300"></div>
|
|
<Skeleton width="30%" height="1rem" class="mx-4" />
|
|
<div class="flex-1 border-t border-gray-300"></div>
|
|
</div>
|
|
|
|
<div class="flex flex-col gap-6">
|
|
<Skeleton width="100%" height="2.5rem" />
|
|
<Skeleton width="100%" height="2.5rem" />
|
|
</div>
|
|
|
|
<div class="mt-5">
|
|
<Skeleton width="70%" height="0.875rem" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Skeleton from 'primevue/skeleton'
|
|
</script>
|