View moves downwards when applying basic shimmer

[d9rad]

I noticed since the last update that using .shimmering() on a view will cause it to move.

This is the code using .shimmering:

Text("Test shimmer")
    .shimmering()

The result:

https://github.com/markiv/SwiftUI-Shimmer/assets/3265288/b9ab1b64-19e4-47e5-bd75-90625e9c6a23

When using 1.3.0 the view stays in place and behaves as expected.

This is using Xcode 14.3 with iPhone 14 Pro (16.4) simulator

[markiv]

What about the surrounding code? How is that view being laid out on the screen? Can you provide code to reproduce the issue?

[d9rad]

It seems to happen when using NavigationView and NavigationLink as follows:

NavigationView {
    NavigationLink("Shimmer test") {
        Text("Foobar")
            .shimmering()
    }
}

The same also happens when placing the Text inside its own view.

The weird thing is that it doesn't happen when using NavigationStack. I guess it's not really an issue for anyone targeting iOS 16+ 🤔

EDIT: it's definitely present in iOS 16, I just meant that most people who have a min target of iOS 16 will likely use NavigationStack, which doesn't have the same issues.

[keithburgoyne]

We are also seeing this issue. We currently target iOS 14.+.

[BolzanNicolas]

The issue is with the body, replacing the withAnimation of initialState with .animate or using async dispatchqueue worked for me https://www.hackingwithswift.com/forums/swiftui/gradient-animation-inside-of-navigation-view/13356

[gesabo]

Experiencing this as well in iOS 16.

[gesabo]

The issue is with the body, replacing the withAnimation of initialState with .animate or using async dispatchqueue worked for me https://www.hackingwithswift.com/forums/swiftui/gradient-animation-inside-of-navigation-view/13356

@BolzanNicolas do you mean creating your own fork to fix the issue?

[BolzanNicolas]

The issue is with the body, replacing the withAnimation of initialState with .animate or using async dispatchqueue worked for me https://www.hackingwithswift.com/forums/swiftui/gradient-animation-inside-of-navigation-view/13356

@BolzanNicolas do you mean creating your own fork to fix the issue?

Yes, modifying Shimmer's body directly like this or async dispatch

public func body(content: Content) -> some View {
        content
            .mask(LinearGradient(gradient: gradient, startPoint: startPoint, endPoint: endPoint))
            .animation(animation, value: isInitialState)
            .onAppear {
                isInitialState = false
            }
    }

[gesabo]

Thanks so much @BolzanNicolas !

[gesabo]

Unfortunately iOS 17.1 beta seems to cause the same visual bug even when using @BolzanNicolas's solution.

[gesabo]

Unfortunately iOS 17.1 beta seems to cause the same visual bug even when using @BolzanNicolas's solution.

I was able to solve it using this solution

[markiv]

Fixed in 1.4.1. Thanks for the inputs!

[roger-smith]

Hi @markiv, could you tag the new release for 1.4.1 please?

[emilloohoo]

@markiv can you please tag 1.4.1? i would love to do this vs upgrade to ios 16