This is a simple modifier to add a shimmer-style animation to any SwiftUI view.

The Code

Usage

If you build your “loaded” state using parameters, like this:

func charactersView(characters: [CharacterModel]) -> some View {
    ScrollView {
        ForEach(characters, id: \.id) { character in
            ImageAndTextRow(
                imageURLString: character.image,
                title: character.fullName
            )
            .padding(.horizontal, 16)
            .onTapGesture {
                router.push(.character(character))
            }
            Divider()
        }
    }
}

Then you can build your “loading” state using mocked information:

var loadingView: some View {
    charactersView(
        characters: [
            .mock(index: 1),
            .mock(index: 2),
            .mock(index: 3)
        ]
    )
    .skeleton()
    .task {
        await viewModel.fetchCharacters()
    }
}

Demo

Skeleton Modifier | manu.show

Tags: ios swiftui

Skeleton Modifier

A simple shimmer SwiftUI modifier

Table of Contents

The Code

Usage

Demo

Table of Contents

The Code

Usage

Demo

Related Articles