chore: loading text to loading icon, modify the width for responsive web (#5582)

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>

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">

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') }}

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">

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'
 

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" />