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>
This commit is contained in:
Trey t
@@ -103,66 +103,6 @@ struct AnimatedRouteGraphic: View {
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Themed Spinner
|
||||
|
||||
/// A custom animated spinner matching the app's visual style
|
||||
/// Both ThemedSpinner and ThemedSpinnerCompact use the same visual style for consistency
|
||||
struct ThemedSpinner: View {
|
||||
var size: CGFloat = 40
|
||||
var lineWidth: CGFloat = 4
|
||||
var color: Color = Theme.warmOrange
|
||||
|
||||
@State private var rotation: Double = 0
|
||||
|
||||
var body: some View {
|
||||
ZStack {
|
||||
// Background track
|
||||
Circle()
|
||||
.stroke(color.opacity(0.2), lineWidth: lineWidth)
|
||||
|
||||
// Animated arc
|
||||
Circle()
|
||||
.trim(from: 0, to: 0.7)
|
||||
.stroke(color, style: StrokeStyle(lineWidth: lineWidth, lineCap: .round))
|
||||
.rotationEffect(.degrees(rotation))
|
||||
}
|
||||
.frame(width: size, height: size)
|
||||
.onAppear {
|
||||
withAnimation(.linear(duration: 0.8).repeatForever(autoreverses: false)) {
|
||||
rotation = 360
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// Compact themed spinner for inline use (same style as ThemedSpinner, smaller default)
|
||||
struct ThemedSpinnerCompact: View {
|
||||
var size: CGFloat = 20
|
||||
var color: Color = Theme.warmOrange
|
||||
|
||||
@State private var rotation: Double = 0
|
||||
|
||||
var body: some View {
|
||||
ZStack {
|
||||
// Background track
|
||||
Circle()
|
||||
.stroke(color.opacity(0.2), lineWidth: size > 16 ? 2.5 : 2)
|
||||
|
||||
// Animated arc
|
||||
Circle()
|
||||
.trim(from: 0, to: 0.7)
|
||||
.stroke(color, style: StrokeStyle(lineWidth: size > 16 ? 2.5 : 2, lineCap: .round))
|
||||
.rotationEffect(.degrees(rotation))
|
||||
}
|
||||
.frame(width: size, height: size)
|
||||
.onAppear {
|
||||
withAnimation(.linear(duration: 0.8).repeatForever(autoreverses: false)) {
|
||||
rotation = 360
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Pulsing Dot
|
||||
|
||||
struct PulsingDot: View {
|
||||
@@ -242,42 +182,6 @@ struct RoutePreviewStrip: View {
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Planning Progress View
|
||||
|
||||
struct PlanningProgressView: View {
|
||||
@State private var currentStep = 0
|
||||
let steps = ["Finding games...", "Calculating routes...", "Optimizing itinerary..."]
|
||||
@Environment(\.colorScheme) private var colorScheme
|
||||
|
||||
var body: some View {
|
||||
VStack(spacing: 24) {
|
||||
// Themed spinner
|
||||
ThemedSpinner(size: 56, lineWidth: 5)
|
||||
|
||||
// Current step text
|
||||
Text(steps[currentStep])
|
||||
.font(.body)
|
||||
.foregroundStyle(Theme.textSecondary(colorScheme))
|
||||
.animation(.easeInOut, value: currentStep)
|
||||
}
|
||||
.frame(maxWidth: .infinity)
|
||||
.padding(.vertical, 40)
|
||||
.task {
|
||||
await animateSteps()
|
||||
}
|
||||
}
|
||||
|
||||
private func animateSteps() async {
|
||||
while !Task.isCancelled {
|
||||
try? await Task.sleep(for: .milliseconds(1500))
|
||||
guard !Task.isCancelled else { break }
|
||||
withAnimation(.easeInOut) {
|
||||
currentStep = (currentStep + 1) % steps.count
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Stat Pill
|
||||
|
||||
struct StatPill: View {
|
||||
@@ -345,96 +249,8 @@ struct EmptyStateView: View {
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Loading Overlay
|
||||
|
||||
/// A modal loading overlay with progress indication
|
||||
/// Reusable pattern from PDF export overlay
|
||||
struct LoadingOverlay: View {
|
||||
let message: String
|
||||
var detail: String?
|
||||
var progress: Double?
|
||||
var icon: String = "hourglass"
|
||||
|
||||
@Environment(\.colorScheme) private var colorScheme
|
||||
|
||||
var body: some View {
|
||||
ZStack {
|
||||
// Background dimmer
|
||||
Color.black.opacity(0.6)
|
||||
.ignoresSafeArea()
|
||||
|
||||
// Progress card
|
||||
VStack(spacing: Theme.Spacing.lg) {
|
||||
// Progress ring or spinner
|
||||
ZStack {
|
||||
Circle()
|
||||
.stroke(Theme.cardBackgroundElevated(colorScheme), lineWidth: 8)
|
||||
.frame(width: 80, height: 80)
|
||||
|
||||
if let progress = progress {
|
||||
Circle()
|
||||
.trim(from: 0, to: progress)
|
||||
.stroke(Theme.warmOrange, style: StrokeStyle(lineWidth: 8, lineCap: .round))
|
||||
.frame(width: 80, height: 80)
|
||||
.rotationEffect(.degrees(-90))
|
||||
.animation(.easeInOut(duration: 0.3), value: progress)
|
||||
} else {
|
||||
ThemedSpinner(size: 48, lineWidth: 5)
|
||||
}
|
||||
|
||||
Image(systemName: icon)
|
||||
.font(.title2)
|
||||
.foregroundStyle(Theme.warmOrange)
|
||||
.opacity(progress != nil ? 1 : 0)
|
||||
}
|
||||
|
||||
VStack(spacing: Theme.Spacing.xs) {
|
||||
Text(message)
|
||||
.font(.headline)
|
||||
.foregroundStyle(Theme.textPrimary(colorScheme))
|
||||
|
||||
if let detail = detail {
|
||||
Text(detail)
|
||||
.font(.subheadline)
|
||||
.foregroundStyle(Theme.textSecondary(colorScheme))
|
||||
.multilineTextAlignment(.center)
|
||||
}
|
||||
|
||||
if let progress = progress {
|
||||
Text("\(Int(progress * 100))%")
|
||||
.font(.caption)
|
||||
.foregroundStyle(Theme.textMuted(colorScheme))
|
||||
}
|
||||
}
|
||||
}
|
||||
.padding(Theme.Spacing.xl)
|
||||
.background(Theme.cardBackground(colorScheme))
|
||||
.clipShape(RoundedRectangle(cornerRadius: Theme.CornerRadius.large))
|
||||
.shadow(color: .black.opacity(0.3), radius: 20, y: 10)
|
||||
}
|
||||
.transition(.opacity)
|
||||
}
|
||||
}
|
||||
|
||||
// MARK: - Preview
|
||||
|
||||
#Preview("Themed Spinners") {
|
||||
VStack(spacing: 40) {
|
||||
ThemedSpinner(size: 60, lineWidth: 5)
|
||||
|
||||
ThemedSpinner(size: 40)
|
||||
|
||||
ThemedSpinnerCompact()
|
||||
|
||||
HStack(spacing: 20) {
|
||||
ThemedSpinnerCompact(size: 16)
|
||||
Text("Loading...")
|
||||
}
|
||||
}
|
||||
.padding(40)
|
||||
.themedBackground()
|
||||
}
|
||||
|
||||
#Preview("Animated Components") {
|
||||
VStack(spacing: 40) {
|
||||
AnimatedRouteGraphic()
|
||||
@@ -442,8 +258,6 @@ struct LoadingOverlay: View {
|
||||
|
||||
RoutePreviewStrip(cities: ["San Diego", "Los Angeles", "San Francisco", "Seattle", "Portland"])
|
||||
|
||||
PlanningProgressView()
|
||||
|
||||
HStack {
|
||||
StatPill(icon: "car", value: "450 mi")
|
||||
StatPill(icon: "clock", value: "8h driving")
|
||||
@@ -455,25 +269,3 @@ struct LoadingOverlay: View {
|
||||
.padding()
|
||||
.themedBackground()
|
||||
}
|
||||
|
||||
#Preview("Loading Overlay") {
|
||||
ZStack {
|
||||
Color.gray
|
||||
LoadingOverlay(
|
||||
message: "Planning Your Trip",
|
||||
detail: "Finding the best route..."
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
#Preview("Loading Overlay with Progress") {
|
||||
ZStack {
|
||||
Color.gray
|
||||
LoadingOverlay(
|
||||
message: "Creating PDF",
|
||||
detail: "Processing images...",
|
||||
progress: 0.65,
|
||||
icon: "doc.fill"
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user