Back to AtesKit
UI Components

Present Components

AtesKit provides premium state views and presenters for loading, error, empty states, and automatic screen presentation with rich animations and multiple visual styles.

Key Features

Multiple Styles: 4-5 visual styles per component for different contexts
Premium Animations: Smooth, subtle animations for professional UX
Auto Presenters: Automatic screen presentation with state management
Customizable: Extensive parameters for tailored experiences

AKLoadingView

State Views
A premium loading view with 5 different visual styles including animated orbs, aurora effects, progress bars, skeleton loading, and minimal spinners.
USE CASES
Data fetching states
File upload progress
Content placeholders
Async operations
Network requests
AVAILABLE STYLES
default - Animated floating orbs with center spinner
aurora - Colorful animated blobs with glowing spinner
progress(Double) - Circular and linear progress with percentage
skeleton - Shimmer loading placeholders for content
minimal - Simple inline spinner
PARAMETERS
style
Style
Default: .default
Visual style: .default, .aurora, .progress(value), .skeleton, .minimal
message
String?
Default: nil
Optional loading message
skeletonCount
Int
Default: 3
Number of skeleton rows (for skeleton style)
USAGE EXAMPLES
Swift
// Default style with message
AKLoadingView(
    style: .default,
    message: "Loading your data..."
)

// Aurora style
AKLoadingView(style: .aurora)

// Progress with percentage
AKLoadingView(
    style: .progress(0.65),
    message: "Uploading files..."
)

// Skeleton loading
AKLoadingView(
    style: .skeleton,
    skeletonCount: 5
)

// Minimal inline
AKLoadingView(
    style: .minimal,
    message: "Please wait..."
)

AKErrorView

State Views
A premium error view with 4 visual styles including pulsing alerts, gradient backgrounds, and customizable retry actions.
USE CASES
Network errors
API failures
Permission denials
Server errors
Data loading failures
AVAILABLE STYLES
default - Animated warning icon with glow
alert - Pulsing red rings with prominent icon
minimal - Simple inline error display
gradient - Animated gradient background
PARAMETERS
title
String
Default: "Something Went Wrong"
Error title
description
String
Default: "An unexpected error occurred..."
Error description
systemImage
String
Default: "exclamationmark.triangle"
SF Symbol name
style
Style
Default: .default
Visual style
retryButtonTitle
String
Default: "Try Again"
Retry button text
retryAction
(() -> Void)?
Default: nil
Optional retry handler
USAGE EXAMPLES
Swift
// Network error with retry
AKErrorView(
    title: "Connection Failed",
    description: "Please check your internet connection.",
    style: .alert,
    retryAction: {
        await fetchData()
    }
)

// Server error
AKErrorView(
    title: "Server Error",
    description: "Our servers are experiencing issues.",
    systemImage: "exclamationmark.icloud",
    style: .gradient,
    retryAction: { retry() }
)

// Permission denied (no retry)
AKErrorView(
    title: "Access Denied",
    description: "You don't have permission.",
    systemImage: "lock.fill",
    style: .minimal
)

AKEmptyStateView

State Views
A premium empty state view with 4 visual styles including illustrated particles, floating decorations, and optional action buttons.
USE CASES
Empty lists/collections
No search results
First-time user experience
Cleared content
No notifications
AVAILABLE STYLES
default - Floating icon with subtle glow
illustrated - Large icon with decorative particles
minimal - Simple inline empty state
gradient - Animated gradient background
PARAMETERS
title
String
Empty state title
description
String
Empty state description
systemImage / image
String / Image
SF Symbol or custom image
style
Style
Default: .default
Visual style
action
(title: String, action: () -> Void)?
Default: nil
Optional action button
USAGE EXAMPLES
Swift
// With action button
AKEmptyStateView(
    title: "No Photos",
    description: "Start by taking your first photo.",
    systemImage: "photo.on.rectangle.angled",
    style: .illustrated,
    action: ("Add Photo", { openCamera() })
)

// Search results
AKEmptyStateView(
    title: "No Results",
    description: "Try adjusting your search.",
    systemImage: "magnifyingglass",
    style: .minimal
)

// Custom image
AKEmptyStateView(
    title: "Empty Collection",
    description: "Items will show up here.",
    image: Image("custom-empty"),
    style: .gradient,
    action: ("Browse Items", { showBrowser() })
)

AKPaywallPresenter

Presenters
A view modifier that automatically presents paywall screens based on subscription status. Integrates with AKConfig for seamless paywall management.
USE CASES
Automatic paywall presentation
Subscription gate
Premium feature access
Trial management
Monetization flows
USAGE EXAMPLES
Swift
// Automatic presentation
ContentView()
    .presentPaywallIfNeeds
    .environmentObject(config)

// Trigger paywall programmatically
if !config.isSubscripted {
    config.paywall = true
}

// Paywall type is auto-selected based on config
// - .single: Single product paywall
// - .multiple: Multi-product paywall

// Automatically checks subscription on dismiss

AKWelcomePresenter

Presenters
A view modifier for presenting welcome/what's new screens with feature highlights. Perfect for onboarding and update announcements.
USE CASES
App onboarding
What's new screens
Feature announcements
Version updates
First launch experience
USAGE EXAMPLES
Swift
// Present welcome screen
ContentView()
    .presentWelcomeIfNeeds(
        $showWelcome,
        configuration: config
    )

// Features are configured in AKConfig
let config = AKConfig.AKConfigBuilder()
    .setFeaturesModels([
        AKFeatureModel(
            icon: "sparkles",
            title: "New Feature",
            subtitle: "Amazing new capability"
        )
    ])
    .build()

// Automatically shows AKWelcomeView with features

Best Practices

Style Selection: Use minimal styles for inline states, illustrated for full-screen
Loading States: Use skeleton for content, progress for uploads, aurora for premium feel
Error Handling: Always provide retry actions for recoverable errors
Empty States: Include actionable CTAs to guide users to next steps