Back to AtesKit
UI Components

Image Components

AtesKit provides powerful image loading and display components with async loading, smooth transitions, and automatic error handling.

Key Features

Async Loading: Efficient remote image loading with progress indicators
State Management: Automatic handling of loading, success, and error states
Smooth Transitions: Spring animations and blur transitions for premium UX
Carousel Support: Auto-scrolling infinite carousels with gradient overlays

AKAsyncImage

A sophisticated async image loader with customizable placeholder, error states, and smooth transitions. Built on top of SwiftUI's AsyncImage with enhanced UX.
USE CASES
Remote image loading
User avatars and profiles
Product images in e-commerce
Gallery and media viewers
Dynamic content from APIs
PARAMETERS
url
URL?
The URL of the image to load
scale
CGFloat
Default: 1.0
The scale factor for the image
transaction
Transaction
Default: Transaction(animation: .spring(...))
Animation transaction for state transitions
content
(Image) -> Content
ViewBuilder for the loaded image
placeholder
() -> Placeholder
Default: ProgressView()
ViewBuilder for loading state
error
() -> ErrorView
Default: Image(systemName: "")
ViewBuilder for error state
USAGE EXAMPLES
Swift
// Full customization
AKAsyncImage(URL(string: "https://example.com/image.jpg")) { image in
    image
        .resizable()
        .scaledToFill()
        .frame(width: 200, height: 200)
        .clipShape(Circle())
} placeholder: {
    Circle()
        .fill(Color.gray.opacity(0.2))
        .frame(width: 200, height: 200)
        .overlay(ProgressView())
} error: {
    Circle()
        .fill(Color.red.opacity(0.1))
        .frame(width: 200, height: 200)
        .overlay(Text("Error"))
}

// Simple usage with defaults
AKAsyncImage(URL(string: "https://example.com/image.jpg"))
    .frame(width: 150, height: 150)
    .clipShape(RoundedRectangle(cornerRadius: 20))

// Custom content only
AKAsyncImage(URL(string: "https://example.com/avatar.jpg")) { image in
    image
        .resizable()
        .aspectRatio(contentMode: .fill)
}
.frame(width: 100, height: 100)
.clipShape(Circle())

AKInfinityCarouselView

An infinite auto-scrolling carousel for images with smooth transitions, gradient overlays, and support for both local and remote images.
USE CASES
Hero sections
Product showcases
Background slideshows
Featured content rotation
Promotional banners
PARAMETERS
source
Source
Image source: .local([String]) for assets or .remote([URL?]) for web images
interval
TimeInterval
Default: 2.0
Time between transitions in seconds
overlayColor
Color
Default: .black.opacity(0.3)
Gradient overlay color for better text contrast
USAGE EXAMPLES
Swift
// Remote images carousel
let imageURLs = [
    URL(string: "https://example.com/image1.jpg"),
    URL(string: "https://example.com/image2.jpg"),
    URL(string: "https://example.com/image3.jpg")
]

AKInfinityCarouselView(
    source: .remote(imageURLs),
    interval: 3.0,
    overlayColor: .black.opacity(0.5)
)
.frame(height: 300)
.clipShape(RoundedRectangle(cornerRadius: 20))

// Local images carousel
AKInfinityCarouselView(
    source: .local(["banner1", "banner2", "banner3"]),
    interval: 2.5
)
.frame(height: 200)
.ignoresSafeArea(edges: .top)

Best Practices

URL Validation: Always handle optional URLs gracefully with fallback states
List Performance: Use .id() modifier for proper view updates in lists
Carousel Timer: Timer automatically stops when view disappears for resource efficiency
Aspect Ratio: Use .scaledToFill() with .clipped() to prevent image distortion