From 992efc44861a45913f585c3eafcfa4bffa4fbae0 Mon Sep 17 00:00:00 2001
From: Jin Yi <jin12cc@gmail.com>
Date: Mon, 15 Sep 2025 16:59:50 +0900
Subject: [PATCH] chore: loading text to loading icon, modify the width for
 responsive web (#5582)

---
 src/platform/onboarding/cloud/CloudAuthTimeoutView.vue       | 2 +-
 src/platform/onboarding/cloud/CloudForgotPasswordView.vue    | 2 +-
 src/platform/onboarding/cloud/CloudLoginView.vue             | 2 +-
 src/platform/onboarding/cloud/CloudSignupView.vue            | 2 +-
 src/platform/onboarding/cloud/UserCheckView.vue              | 5 +++--
 .../onboarding/cloud/skeletons/CloudLoginViewSkeleton.vue    | 2 +-
 6 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/src/platform/onboarding/cloud/CloudAuthTimeoutView.vue b/src/platform/onboarding/cloud/CloudAuthTimeoutView.vue
index e80603576..54f3654f3 100644
--- a/src/platform/onboarding/cloud/CloudAuthTimeoutView.vue
+++ b/src/platform/onboarding/cloud/CloudAuthTimeoutView.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="h-full flex items-center justify-center p-8">
-    <div class="w-96 text-center">
+    <div class="lg:w-96 max-w-[100vw] text-center">
       <h2 class="text-xl mb-4">
         {{ $t('cloudOnboarding.authTimeout.title') }}
       </h2>
diff --git a/src/platform/onboarding/cloud/CloudForgotPasswordView.vue b/src/platform/onboarding/cloud/CloudForgotPasswordView.vue
index 8abf22dad..b10428101 100644
--- a/src/platform/onboarding/cloud/CloudForgotPasswordView.vue
+++ b/src/platform/onboarding/cloud/CloudForgotPasswordView.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="h-full flex items-center justify-center p-8">
-    <div class="w-96 p-2">
+    <div class="lg:w-96 max-w-[100vw] p-2">
       <!-- Header -->
       <div class="flex flex-col gap-4 mb-8">
         <h1 class="text-xl font-medium leading-normal my-0">
diff --git a/src/platform/onboarding/cloud/CloudLoginView.vue b/src/platform/onboarding/cloud/CloudLoginView.vue
index 2b7740530..fcbf09df1 100644
--- a/src/platform/onboarding/cloud/CloudLoginView.vue
+++ b/src/platform/onboarding/cloud/CloudLoginView.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="h-full flex items-center justify-center p-8">
-    <div class="w-96 max-w-[100vw] p-2">
+    <div class="lg:w-96 max-w-[100vw] p-2">
       <div class="bg-[#2d2e32] p-4 rounded-lg">
         <h4 class="m-0 pb-2 text-lg">
           {{ t('cloudPrivateBeta_title') }}
diff --git a/src/platform/onboarding/cloud/CloudSignupView.vue b/src/platform/onboarding/cloud/CloudSignupView.vue
index cf1024027..e229c5744 100644
--- a/src/platform/onboarding/cloud/CloudSignupView.vue
+++ b/src/platform/onboarding/cloud/CloudSignupView.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="h-full flex items-center justify-center p-8">
-    <div class="w-96 p-2">
+    <div class="lg:w-96 max-w-[100vw] p-2">
       <!-- Header -->
       <div class="flex flex-col gap-4 mb-8">
         <h1 class="text-xl font-medium leading-normal my-0">
diff --git a/src/platform/onboarding/cloud/UserCheckView.vue b/src/platform/onboarding/cloud/UserCheckView.vue
index 03b9ac117..718f18091 100644
--- a/src/platform/onboarding/cloud/UserCheckView.vue
+++ b/src/platform/onboarding/cloud/UserCheckView.vue
@@ -3,7 +3,7 @@
   <CloudSurveyViewSkeleton v-else-if="skeletonType === 'survey'" />
   <CloudWaitlistViewSkeleton v-else-if="skeletonType === 'waitlist'" />
   <div v-else-if="error" class="h-full flex items-center justify-center p-8">
-    <div class="w-96 p-2 text-center">
+    <div class="lg:w-96 max-w-[100vw] p-2 text-center">
       <p class="text-red-500 mb-4">{{ errorMessage }}</p>
       <Button
         :label="
@@ -18,13 +18,14 @@
     </div>
   </div>
   <div v-else class="flex items-center justify-center min-h-screen">
-    <div class="animate-pulse text-gray-500">{{ $t('g.loading') }}</div>
+    <ProgressSpinner class="w-8 h-8" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { useAsyncState } from '@vueuse/core'
 import Button from 'primevue/button'
+import ProgressSpinner from 'primevue/progressspinner'
 import { computed, nextTick, ref } from 'vue'
 import { useRouter } from 'vue-router'
 
diff --git a/src/platform/onboarding/cloud/skeletons/CloudLoginViewSkeleton.vue b/src/platform/onboarding/cloud/skeletons/CloudLoginViewSkeleton.vue
index ca9378b11..478d9490a 100644
--- a/src/platform/onboarding/cloud/skeletons/CloudLoginViewSkeleton.vue
+++ b/src/platform/onboarding/cloud/skeletons/CloudLoginViewSkeleton.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="h-full flex items-center justify-center p-8">
-    <div class="w-96 p-2">
+    <div class="lg:w-96 max-w-[100vw]">
       <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" />