// // LoadingView.swift // lichunWebsocket // // Ultra-cozy loading screen with warm animations, cute branding, and delightful surprises // import SwiftUI struct LoadingView: View { @State private var isPulsing = false @State private var rotation: Double = 0 @State private var heartOffset1: CGFloat = 0 @State private var heartOffset2: CGFloat = 0 @State private var heartOffset3: CGFloat = 0 @State private var sparkleOpacity: Double = 0 @State private var orbScale: CGFloat = 1.0 @State private var bounceOffset: CGFloat = 0 @State private var waveOffset: CGFloat = 0 @State private var cloudOffset1: CGFloat = 0 @State private var cloudOffset2: CGFloat = 0 @State private var shimmerPhase: CGFloat = 0 var message: String = "Starting your life journey..." var body: some View { ZStack { // Ultra-warm gradient background with soft peachy tones LinearGradient( colors: [ Color(hex: 0xFFF5F0), // Soft cream Color(hex: 0xFFE8DC), // Warm peach Color(hex: 0xFFD6C4), // Deeper peach AppColors.surfaceElevated.opacity(0.8) ], startPoint: .top, endPoint: .bottom ) .ignoresSafeArea() // Floating clouds in background GeometryReader { geo in // Cloud 1 Image(systemName: "cloud.fill") .font(.system(size: 80)) .foregroundColor(Color.white.opacity(0.3)) .offset(x: cloudOffset1, y: 80) .blur(radius: 8) // Cloud 2 Image(systemName: "cloud.fill") .font(.system(size: 100)) .foregroundColor(Color.white.opacity(0.25)) .offset(x: geo.size.width - 150 + cloudOffset2, y: geo.size.height - 200) .blur(radius: 10) // Cloud 3 Image(systemName: "cloud.fill") .font(.system(size: 60)) .foregroundColor(Color.white.opacity(0.35)) .offset(x: geo.size.width / 2 - 30, y: geo.size.height / 3) .blur(radius: 6) } // Floating decorative orbs with shimmer effect GeometryReader { geo in ForEach(0..<4) { index in Circle() .fill( RadialGradient( colors: [ index == 0 ? Color(hex: 0xFFB4D2).opacity(0.25) : // Soft pink index == 1 ? Color(hex: 0xFFD4AA).opacity(0.25) : // Soft orange index == 2 ? Color(hex: 0xFFF0AA).opacity(0.25) : // Soft yellow Color(hex: 0xC4B5FD).opacity(0.25) // Soft purple ], center: .center, startRadius: 0, endRadius: 100 ) ) .frame(width: 180, height: 180) .blur(radius: 35) .offset( x: index == 0 ? -60 : index == 1 ? geo.size.width - 120 : index == 2 ? geo.size.width / 3 : geo.size.width * 2 / 3, y: index == 0 ? -40 : index == 1 ? geo.size.height - 80 : index == 2 ? geo.size.height / 2 : geo.size.height / 4 ) .scaleEffect(orbScale) } } VStack(spacing: AppSpacing.xl) { Spacer() // Main content area VStack(spacing: AppSpacing.lg) { // App logo/icon area with floating hearts ZStack { // Soft glow rings - multiple layers for depth ForEach(0..<3) { ring in Circle() .fill( RadialGradient( colors: [ Color(hex: 0xFFB4D2).opacity(0.3 - Double(ring) * 0.1), Color(hex: 0xFFC8E8).opacity(0.2 - Double(ring) * 0.08), .clear ], center: .center, startRadius: 15 + CGFloat(ring) * 15, endRadius: 70 + CGFloat(ring) * 25 ) ) .frame(width: 160 + CGFloat(ring) * 30, height: 160 + CGFloat(ring) * 30) .scaleEffect(isPulsing ? 1.15 - CGFloat(ring) * 0.05 : 1.0) .opacity(isPulsing ? 0.6 : 0.8) .animation(.easeInOut(duration: 1.8 + Double(ring) * 0.3).repeatForever(autoreverses: true), value: isPulsing) } // Central icon - adorable bouncing heart with shimmer ZStack { // Outer decorative ring with shimmer Circle() .stroke( AngularGradient( colors: [ Color(hex: 0xFFB4D2), Color(hex: 0xFFD4AA), Color(hex: 0xFFF0AA), Color(hex: 0xFFB4D2) ], center: .center, angle: .degrees(shimmerPhase) ), lineWidth: 4 ) .frame(width: 100, height: 100) .scaleEffect(isPulsing ? 1.2 : 1.0) .opacity(isPulsing ? 0.6 : 0.9) // Middle ring - softer Circle() .stroke( LinearGradient( colors: [ Color.white.opacity(0.5), Color(hex: 0xFFC8E8).opacity(0.5) ], startPoint: .topLeading, endPoint: .bottomTrailing ), lineWidth: 2 ) .frame(width: 85, height: 85) .scaleEffect(isPulsing ? 1.15 : 1.05) .opacity(isPulsing ? 0.4 : 0.7) // Main heart icon with bounce Image(systemName: "heart.fill") .font(.system(size: 50, weight: .medium)) .foregroundStyle( LinearGradient( colors: [ Color(hex: 0xFFB4D2), Color(hex: 0xFF9BBD), Color(hex: 0xFFA0C4) ], startPoint: .topLeading, endPoint: .bottomTrailing ) ) .scaleEffect(isPulsing ? 1.08 : 0.92) .offset(y: bounceOffset) .shadow(color: Color(hex: 0xFFB4D2).opacity(0.4), radius: 15, x: 0, y: 8) .shadow(color: Color(hex: 0xFFB4D2).opacity(0.3), radius: 25, x: 0, y: 12) // Cute face on heart (eyes and smile) VStack(spacing: 2) { HStack(spacing: 8) { Circle() .fill(Color.white.opacity(0.9)) .frame(width: 5, height: 5) Circle() .fill(Color.white.opacity(0.9)) .frame(width: 5, height: 5) } .offset(y: -4) // Tiny smile Capsule() .fill(Color.white.opacity(0.8)) .frame(width: 12, height: 2) .offset(y: -1) } .offset(y: -2) .scaleEffect(isPulsing ? 1.05 : 1.0) } // Floating mini hearts ForEach(0..<3) { index in Image(systemName: "heart.fill") .font(.system(size: 12)) .foregroundColor( index == 0 ? AppColors.primary : index == 1 ? AppColors.secondary : AppColors.accent ) .offset( x: CGFloat(index - 1) * 80, y: index == 0 ? heartOffset1 : index == 1 ? heartOffset2 : heartOffset3 ) .opacity(sparkleOpacity) } // Sparkles ForEach(0..<4) { index in Image(systemName: "sparkle") .font(.system(size: 10)) .foregroundColor(AppColors.accent) .rotationEffect(.degrees(rotation + Double(index * 90))) .offset(x: 60, y: 0) .opacity(sparkleOpacity) } } // App name VStack(spacing: AppSpacing.xs) { Text("BaoLife") .font(.system(size: 48, weight: .bold, design: .rounded)) .foregroundStyle( LinearGradient( colors: [AppColors.primary, AppColors.accent], startPoint: .leading, endPoint: .trailing ) ) .shadow(color: AppColors.primary.opacity(0.2), radius: 8, x: 0, y: 4) Text("Your Life Awaits") .font(.system(size: 16, weight: .medium, design: .rounded)) .foregroundColor(AppColors.secondaryText) .tracking(2) } } Spacer() // Loading indicator at bottom VStack(spacing: AppSpacing.md) { // Animated dots HStack(spacing: AppSpacing.sm) { ForEach(0..<3) { index in Circle() .fill( LinearGradient( colors: [AppColors.primary, AppColors.accent], startPoint: .top, endPoint: .bottom ) ) .frame(width: 12, height: 12) .scaleEffect(isPulsing && index % 2 == 0 ? 1.3 : 0.7) .opacity(isPulsing && index % 2 == 0 ? 1.0 : 0.5) } } // Loading message Text(message) .font(.system(size: 14, weight: .medium, design: .rounded)) .foregroundColor(AppColors.secondaryText) .multilineTextAlignment(.center) .padding(.horizontal, AppSpacing.lg) } .padding(.bottom, AppSpacing.xxl) } } .onAppear { // Pulsing animation withAnimation(.easeInOut(duration: 1.5).repeatForever(autoreverses: true)) { isPulsing = true } // Sparkle rotation withAnimation(.linear(duration: 8.0).repeatForever(autoreverses: false)) { rotation = 360 } // Shimmer phase for decorative ring withAnimation(.linear(duration: 3.0).repeatForever(autoreverses: false)) { shimmerPhase = 360 } // Floating hearts animation withAnimation(.easeInOut(duration: 2.0).repeatForever(autoreverses: true)) { heartOffset1 = -30 sparkleOpacity = 1.0 } withAnimation(.easeInOut(duration: 2.5).repeatForever(autoreverses: true).delay(0.3)) { heartOffset2 = -40 } withAnimation(.easeInOut(duration: 2.2).repeatForever(autoreverses: true).delay(0.6)) { heartOffset3 = -35 } // Heart bounce animation withAnimation(.easeInOut(duration: 1.8).repeatForever(autoreverses: true)) { bounceOffset = -12 } // Floating clouds animation withAnimation(.easeInOut(duration: 20.0).repeatForever(autoreverses: true)) { cloudOffset1 = 80 } withAnimation(.easeInOut(duration: 25.0).repeatForever(autoreverses: true).delay(5)) { cloudOffset2 = -60 } // Background orb animation withAnimation(.easeInOut(duration: 3.0).repeatForever(autoreverses: true)) { orbScale = 1.2 } } } } // MARK: - Preview #if DEBUG struct LoadingView_Previews: PreviewProvider { static var previews: some View { LoadingView() LoadingView(message: "Connecting to server...") } } #endif