Skip to content

EyalKatz24/swiftui-very-lazy

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

47 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

SwiftUI Very Lazy πŸ€ͺ

Swift SPM Platforms License

Very Lazy is a comprehensive Swift Package Manager (SPM) library designed for building sophisticated lazy loading experiences in SwiftUI applications. This library provides powerful tools for creating engaging loading states, skeleton screens, and progressive content reveals with customizable shimmer effects.

✨ Features

  • Shimmer View: A flexible SwiftUI component that applies animated shimmer effects to any SwiftUI shape, featuring accessibility support with UIAccessibility.isReduceMotionEnabled integration and a dynamic API through SwiftUI environment keys for seamless customization.

  • LayeredShimmer View: A composite component for creating structured loading layouts with background shapes and nested content, providing specialized color configurations for inner elements and perfect for building sophisticated skeleton screens and card-based loading states.

πŸš€ Future Roadmap

Very Lazy is designed to evolve with SwiftUI and iOS advancements, including:

  • iOS 26 GlassEffect Support: Integration with upcoming glass morphism effects
  • Advanced Shimmer Types: Multiple shimmer patterns and animation styles
  • Creative Loading Views: Innovative approaches to progressive content loading
  • Performance Optimizations: Enhanced rendering and animation efficiency

🎯 Quick Start

Import the library and start creating beautiful shimmer effects:

import VeryLazy

...
Shimmer(shape: .circle)
    .frame(width: 80, height: 80)
...

πŸ“š Examples & API Reference

πŸ”΅ Basic Shimmer Shapes

Create shimmer effects on various shapes with simple, clean animations.

normalShimmer.mp4
HStack(spacing: 24) {
    Shimmer(shape: .circle)
        .frame(width: 80, height: 80)
    
    Shimmer(shape: .rect(cornerRadius: 10))
        .frame(width: 250, height: 40)
}

πŸ—οΈ Layered Shimmer Components

Use LayeredShimmer to create complex shimmer layouts with background shapes and nested content. This component provides a structured approach to building sophisticated loading states.

layeredShimmer.mp4
LayeredShimmer(background: .rect(cornerRadius: 10)) {
    HStack {
        VStack(alignment: .leading) {
            Shimmer(shape: .rect(cornerRadius: 10))
                .frame(width: 250, height: 25)
            
            Shimmer(shape: .rect(cornerRadius: 10))
                .frame(width: 150, height: 15)
            
            Spacer()
        }
        
        Spacer()
    }
    .padding()
}

πŸ”„ Rotation Effects

Control the direction and style of the shimmer animation using the shimmerRotation environment key.

Available rotation options:

  • .default: No rotation applied (0Β°)
  • .leanForward: Forward rotation by 20 degrees
  • .leanBackward: Backward rotation by -20 degrees
  • .custom(degrees: Double): Custom rotation angle in degrees
leanForwardShimmer.mp4

Forward rotation example:

Shimmer(shape: .capsule)
    .environment(\.shimmerRotation, .leanForward)

⚑ Animation Speed Control

Fine-tune animation timing and behavior using the shimmerAnimation environment key.

Available speed options:

  • .default: Standard animation speed (1.0x multiplier)
  • .fast: Fast animation speed (2.0x multiplier)
  • .slow: Slow animation speed (0.625x multiplier)
  • .custom(value: Double): Custom speed multiplier

The delay parameter controls the initial pause before animation begins.

fastShimmer.mp4

Fast animation with delay example:

VStack(alignment: .leading, spacing: 8) {
    Shimmer(shape: .rect(cornerRadius: 6))
        .frame(width: 180, height: 20)
    
    Shimmer(shape: .rect(cornerRadius: 6))
        .frame(width: 200, height: 20)
    
    Shimmer(shape: .rect(cornerRadius: 4))
        .frame(width: 120, height: 16)
}
.environment(\.shimmerAnimation, .init(speed: .fast, delay: 0.75))

🎨 Custom Colors

Personalize your shimmer effects with custom colors using the shimmerColors environment key.

Color configuration options:

  • shapeColor: Base color of the shape (defaults to light gray in light mode, dark gray in dark mode)
  • shimmerColor: Highlight color for the shimmer effect (defaults to very light gray in light mode, medium gray in dark mode)
  • .innerShape: Predefined configuration for nested shapes with appearance-adaptive colors
blueishShimmer.mp4

Custom blue theme example:

Shimmer(shape: .rect(cornerRadius: 12))
    .frame(width: 300, height: 100)
    .environment(\.shimmerColors, .init(shapeColor: .blue, shimmerColor: .cyan))

πŸ“„ License

This project is licensed under the MIT License.

About

The SPM for lazy loading in SwiftUI 😎

Topics

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors

Languages