feat(ui): replace loading indicators with Apple-style LoadingSpinner

- Add LoadingSpinner component with small/medium/large sizes using system gray color
- Add LoadingPlaceholder for skeleton loading states
- Add LoadingSheet for full-screen blocking overlays
- Replace ThemedSpinner/ThemedSpinnerCompact across all views
- Remove deprecated loading components from AnimatedComponents.swift
- Delete LoadingTextGenerator.swift
- Fix PhotoImportView layout to fill full width

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

SportsTime/Features/Home/Views/LoadingTripsView.swift

@@ -2,7 +2,7 @@
 //  LoadingTripsView.swift
 //  SportsTime
 //
-//  Animated loading state for suggested trips carousel.
+//  Loading state for suggested trips carousel using skeleton placeholders.
 //
 
 import SwiftUI
@@ -10,7 +10,6 @@ import SwiftUI
 struct LoadingTripsView: View {
     let message: String
     @Environment(\.colorScheme) private var colorScheme
-    @State private var animationPhase: Double = 0
 
     var body: some View {
         VStack(alignment: .leading, spacing: Theme.Spacing.sm) {
@@ -22,125 +21,26 @@ struct LoadingTripsView: View {
                 Spacer()
             }
 
-            // Loading message with animation
-            HStack(spacing: Theme.Spacing.sm) {
-                LoadingDots()
-
-                Text(message)
-                    .font(.body)
-                    .foregroundStyle(Theme.textSecondary(colorScheme))
-                    .lineLimit(2)
-                    .fixedSize(horizontal: false, vertical: true)
-            }
-            .padding(.vertical, Theme.Spacing.xs)
+            // Loading indicator with message
+            LoadingSpinner(size: .small, label: message)
+                .padding(.vertical, Theme.Spacing.xs)
 
             // Placeholder cards
             ScrollView(.horizontal, showsIndicators: false) {
                 HStack(spacing: Theme.Spacing.md) {
-                    ForEach(0..<3, id: \.self) { index in
-                        PlaceholderCard(animationPhase: animationPhase, index: index)
+                    ForEach(0..<3, id: \.self) { _ in
+                        LoadingPlaceholder.card
                     }
                 }
             }
         }
-        .onAppear {
-            withAnimation(.linear(duration: 1.5).repeatForever(autoreverses: false)) {
-                animationPhase = 1
-            }
-        }
-    }
-}
-
-// MARK: - Loading Dots
-
-struct LoadingDots: View {
-    @State private var dotIndex = 0
-
-    var body: some View {
-        HStack(spacing: 4) {
-            ForEach(0..<3, id: \.self) { index in
-                Circle()
-                    .fill(Theme.warmOrange)
-                    .frame(width: 6, height: 6)
-                    .opacity(index == dotIndex ? 1.0 : 0.3)
-            }
-        }
-        .onAppear {
-            Timer.scheduledTimer(withTimeInterval: 0.4, repeats: true) { _ in
-                withAnimation(.easeInOut(duration: 0.2)) {
-                    dotIndex = (dotIndex + 1) % 3
-                }
-            }
-        }
-    }
-}
-
-// MARK: - Placeholder Card
-
-struct PlaceholderCard: View {
-    let animationPhase: Double
-    let index: Int
-    @Environment(\.colorScheme) private var colorScheme
-
-    var body: some View {
-        VStack(alignment: .leading, spacing: Theme.Spacing.sm) {
-            // Header placeholder
-            HStack {
-                shimmerRectangle(width: 60, height: 20)
-                Spacer()
-                shimmerRectangle(width: 40, height: 16)
-            }
-
-            // Route placeholder
-            VStack(alignment: .leading, spacing: 4) {
-                shimmerRectangle(width: 100, height: 14)
-                shimmerRectangle(width: 20, height: 10)
-                shimmerRectangle(width: 80, height: 14)
-            }
-
-            // Stats placeholder
-            HStack(spacing: Theme.Spacing.sm) {
-                shimmerRectangle(width: 70, height: 14)
-                shimmerRectangle(width: 60, height: 14)
-            }
-
-            // Date placeholder
-            shimmerRectangle(width: 120, height: 12)
-        }
-        .padding(Theme.Spacing.md)
-        .frame(width: 200)
-        .background(Theme.cardBackground(colorScheme))
-        .clipShape(RoundedRectangle(cornerRadius: Theme.CornerRadius.large))
-        .overlay {
-            RoundedRectangle(cornerRadius: Theme.CornerRadius.large)
-                .stroke(Theme.surfaceGlow(colorScheme), lineWidth: 1)
-        }
-    }
-
-    private func shimmerRectangle(width: CGFloat, height: CGFloat) -> some View {
-        RoundedRectangle(cornerRadius: 4)
-            .fill(shimmerGradient)
-            .frame(width: width, height: height)
-    }
-
-    private var shimmerGradient: LinearGradient {
-        let baseColor = Theme.textMuted(colorScheme).opacity(0.2)
-        let highlightColor = Theme.textMuted(colorScheme).opacity(0.4)
-
-        // Offset based on animation phase and index for staggered effect
-        let offset = animationPhase + Double(index) * 0.2
-
-        return LinearGradient(
-            colors: [baseColor, highlightColor, baseColor],
-            startPoint: UnitPoint(x: offset - 0.5, y: 0),
-            endPoint: UnitPoint(x: offset + 0.5, y: 0)
-        )
     }
 }
 
 #Preview {
     VStack {
-        LoadingTripsView(message: "Hang tight, we're finding the best routes...")
+        LoadingTripsView(message: "Loading trips...")
             .padding()
     }
+    .themedBackground()
 }