admin/Sportstime
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
2026-01-12 22:43:33 -06:00
parent f8204007e6
commit c0f1645434
21 changed files with 544 additions and 460 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
SportsTime/Features/Home/Views/LoadingTripsView.swift
View File

@@ -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()
}

2
SportsTime/Features/Progress/Views/GamesHistoryView.swift
View File

@@ -14,7 +14,7 @@ struct GamesHistoryView: View {
selectedVisit: $selectedVisit
)
} else {
ProgressView("Loading games...")
LoadingSpinner(size: .medium, label: "Loading games...")
}
}
.navigationTitle("Games Attended")

19
SportsTime/Features/Progress/Views/PhotoImportView.swift
View File

@@ -23,7 +23,7 @@ struct PhotoImportView: View {
var body: some View {
NavigationStack {
VStack(spacing: 0) {
Group {
if viewModel.isProcessing {
processingView
} else if viewModel.processedPhotos.isEmpty {
@@ -32,6 +32,7 @@ struct PhotoImportView: View {
resultsView
}
}
.frame(maxWidth: .infinity, maxHeight: .infinity)
.themedBackground()
.navigationTitle("Import from Photos")
.navigationBarTitleDisplayMode(.inline)
@@ -161,15 +162,17 @@ struct PhotoImportView: View {
VStack(spacing: Theme.Spacing.lg) {
Spacer()
ThemedSpinner(size: 50, lineWidth: 4)
LoadingSpinner(size: .large)
Text("Processing photos...")
.font(.body)
.foregroundStyle(Theme.textSecondary(colorScheme))
VStack(spacing: Theme.Spacing.xs) {
Text("Processing Photos")
.font(.headline)
.foregroundStyle(Theme.textPrimary(colorScheme))
Text("\(viewModel.processedCount) of \(viewModel.totalCount) photos")
.font(.subheadline)
.foregroundStyle(Theme.textMuted(colorScheme))
Text("\(viewModel.processedCount) of \(viewModel.totalCount)")
.font(.subheadline)
.foregroundStyle(Theme.textSecondary(colorScheme))
}
Spacer()
}

2
SportsTime/Features/Progress/Views/StadiumVisitHistoryView.swift
View File

@@ -14,7 +14,7 @@ struct StadiumVisitHistoryView: View {
NavigationStack {
Group {
if isLoading {
ProgressView()
LoadingSpinner(size: .medium)
} else if visits.isEmpty {
EmptyVisitHistoryView()
} else {

3
SportsTime/Features/Progress/Views/StadiumVisitSheet.swift
View File

@@ -232,8 +232,7 @@ struct StadiumVisitSheet: View {
} label: {
HStack {
if isLookingUpGame {
ProgressView()
.scaleEffect(0.8)
LoadingSpinner(size: .small)
} else {
Image(systemName: "magnifyingglass")
}

2
SportsTime/Features/Schedule/Views/ScheduleListView.swift
View File

@@ -141,7 +141,7 @@ struct ScheduleListView: View {
private var loadingView: some View {
VStack(spacing: 16) {
ThemedSpinner(size: 44)
LoadingSpinner(size: .large)
Text("Loading schedule...")
.foregroundStyle(.secondary)
}

19
SportsTime/Features/Trip/Views/TripCreationView.swift
View File

@@ -420,7 +420,7 @@ struct TripCreationView: View {
ThemedSection(title: "Select Games") {
if viewModel.isLoadingGames || viewModel.availableGames.isEmpty {
HStack(spacing: Theme.Spacing.sm) {
ThemedSpinnerCompact(size: 20)
LoadingSpinner(size: .small)
Text("Loading games...")
.font(.body)
.foregroundStyle(Theme.textSecondary(colorScheme))
@@ -865,14 +865,7 @@ struct TripCreationView: View {
}
private var planningOverlay: some View {
ZStack {
Color.black.opacity(0.5)
.ignoresSafeArea()
PlanningProgressView()
.padding(40)
.background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 24))
}
LoadingSheet(label: "Planning trip")
}
private var planButton: some View {
@@ -1219,7 +1212,7 @@ struct LazyTeamSection: View {
Spacer()
if isLoading {
ThemedSpinnerCompact(size: 14)
LoadingSpinner(size: .small)
} else if selectedCount > 0 {
Text("\(selectedCount)")
.font(.caption2)
@@ -1245,7 +1238,7 @@ struct LazyTeamSection: View {
if isExpanded {
if isLoading {
HStack {
ThemedSpinnerCompact(size: 16)
LoadingSpinner(size: .small)
Text("Loading games...")
.font(.caption)
.foregroundStyle(Theme.textMuted(colorScheme))
@@ -1407,7 +1400,7 @@ struct LocationSearchSheet: View {
.textFieldStyle(.plain)
.autocorrectionDisabled()
if isSearching {
ThemedSpinnerCompact(size: 16)
LoadingSpinner(size: .small)
} else if !searchText.isEmpty {
Button {
searchText = ""
@@ -2032,7 +2025,7 @@ struct TripOptionCard: View {
.transition(.opacity)
} else if isLoadingDescription {
HStack(spacing: 4) {
ThemedSpinnerCompact(size: 12)
LoadingSpinner(size: .small)
Text("Generating...")
.font(.caption2)
.foregroundStyle(Theme.textMuted(colorScheme))

2
SportsTime/Features/Trip/Views/TripDetailView.swift
View File

@@ -198,7 +198,7 @@ struct TripDetailView: View {
// Loading indicator
if isLoadingRoutes {
ThemedSpinnerCompact(size: 24)
LoadingSpinner(size: .medium)
.padding(.bottom, 40)
}
}

7
SportsTime/Features/Trip/Views/Wizard/Steps/ReviewStep.swift
View File

@@ -45,11 +45,10 @@ struct ReviewStep: View {
.clipShape(RoundedRectangle(cornerRadius: Theme.CornerRadius.medium))
Button(action: onPlan) {
HStack {
HStack(spacing: Theme.Spacing.sm) {
if isPlanning {
ProgressView()
.scaleEffect(0.8)
.tint(.white)
LoadingSpinner(size: .small)
.colorScheme(.dark) // Force white on orange button
}
Text(isPlanning ? "Planning..." : "Plan My Trip")
.fontWeight(.semibold)

10
SportsTime/Features/Trip/Views/Wizard/Steps/SportsStep.swift
View File

@@ -28,14 +28,8 @@ struct SportsStep: View {
)
if isLoading {
HStack {
ProgressView()
.scaleEffect(0.8)
Text("Checking game availability...")
.font(.caption)
.foregroundStyle(Theme.textMuted(colorScheme))
}
.padding(.vertical, Theme.Spacing.sm)
LoadingSpinner(size: .small, label: "Checking availability...")
.padding(.vertical, Theme.Spacing.sm)
}
LazyVGrid(columns: columns, spacing: Theme.Spacing.sm) {