Cardview: CoverFlowView gets out of sync with rapid trigger of SelectedIndex

[joshykautz]

I've found something that _might_ be a new little bug. I'm using the CoverFlowView to display 3 distinct cards. I also have 3 distinct buttons, one for each card. When I click one of the buttons, the _SelectedIndex_ is changed for the CoverFlowView. The issue arises when I trigger the SelectedIndex very quickly - it appears that the animations get out of sync, that's the best that I can describe it. I've included a link to a screen-recording of this behavior in an iOS Simulator, hopefully that is helpful.

https://i.imgur.com/9bliSWu.mp4

Thanks for the work on this plugin!

[AndreiMisiukevich]

nice catch!)

[AndreiMisiukevich]

need to think, how to work around it.
Will you be OK with "fade in"/'fade out" animation in case of fast selcetedIndex changes?

[AndreiMisiukevich]

https://github.com/AndreiMisiukevich/CardView/issues/286

like this

[AndreiMisiukevich]

or we can "ignore" fast taps.

[AndreiMisiukevich]

@joshykautz if you want to ignore fast taps, you may observe IsAutoAnimationRunning (it true, then ignore button click)

[joshykautz]

That sounds like a good option. However, the closest thing to _IsAutoAnimationRunning_ that I see is IsAutoInteractionRunning - unfortunately I this didn't prevent the bug I was experiencing.

[AndreiMisiukevich]

Hi
Are you sure that IsAutoInteractionRunning doesn't help? How do you use it?

[joshykautz]

Hey there. I wouldn't be so naive as to say that _I'm sure_, but I wasn't able to access an IsAutoInteractionRunning property. I did resolve my issue by doing something a little hacky.

async void OnButtonClicked(object sender, EventArgs args)
{
     if (!App.isAnimating)
     {
          App.isAnimating = true;
          Carousel.SelectedIndex = 0;
          await Task.Delay(350);
          App.isAnimating = false;
     }
}

Each time the button is pressed to cause the animation, I set a global variable that indicates an animation is in progress. After 350ms (roughly the duration of the animation) the global variable is cleared, and another animation is permitted if the user taps a button again. Works well enough for me 🤷‍♂

[AndreiMisiukevich]

<CoverflowView x:Name="cover" />

if(cover.IsAutoInteractionRunning) // skip

?

[joshykautz]

Your new changes handle this perfectly - thank you a ton Andrei!

[AndreiMisiukevich]

@joshykautz thanks for the quick feedback :)

[AnthonyNjuguna]

This is still an issue on iOS - Rapid swiping on CarouselView makes data go out of sync. This happens if the _CarouselView.ItemTemplate_ contains a StackLayout with BindableLayout.ItemsSource and BindableLayout.ItemTemplateSelector

[AndreiMisiukevich]

This is still an issue on iOS - Rapid swiping on CarouselView makes data go out of sync. This happens if the _CarouselView.ItemTemplate_ contains a StackLayout with BindableLayout.ItemsSource and BindableLayout.ItemTemplateSelector

Read attentively. This issue is about CoverFlowView, not CarouselView.

I think you can try to work around your issue by setting IsViewReusingEnabled = false

[AnthonyNjuguna]

Okay will create a new issue for CarouselView - I have tried using IsViewReusingEnabled = false but still causes issues on swipe.

[xariosstewart]

We're using the CoverFlowView in our app that we're deploying to a FireTv. If I set SelectedIndex during the page initialisation or the user navigates too quickly the content fades out and never returns. I solved the rapid navigation by setting IsAutoNavigatingAnimationEnabled="False", Unfortuntely this doesnt cure the initialisation issue, so we simply dropped it for the time being (so the CoverFlow no longer auto navigates to the users last saved selection).

I haven't spent much time diagnosing the issue, but I suspect that an exception is occuring in CardsView.HardSetAsync/SetAllViews (see code below) which is preventing the reverse animation from actioning. It could be as simple as putting the animation in a try .. finally, but I think that may bring the UI back in a broken state.

`
//https://github.com/AndreiMisiukevich/CardView/issues/286
protected virtual async Task HardSetAsync()
{
var opacity = Opacity;
var scale = Scale;
var time = 150u;

        await Task.WhenAll(
            this.FadeTo(0, time, Easing.CubicIn),
            this.ScaleTo(.75, time, Easing.CubicIn));
        SetAllViews(true);
        await Task.Delay(10);
        await Task.WhenAll(
            this.FadeTo(opacity, time, Easing.CubicOut),
            this.ScaleTo(scale, time, Easing.CubicOut));
    }

`

[AndreiMisiukevich]

We're using the CoverFlowView in our app that we're deploying to a FireTv. If I set SelectedIndex during the page initialisation or the user navigates too quickly the content fades out and never returns. I solved the rapid navigation by setting IsAutoNavigatingAnimationEnabled="False", Unfortuntely this doesnt cure the initialisation issue, so we simply dropped it for the time being (so the CoverFlow no longer auto navigates to the users last saved selection).

I haven't spent much time diagnosing the issue, but I suspect that an exception is occuring in CardsView.HardSetAsync/SetAllViews (see code below) which is preventing the reverse animation from actioning. It could be as simple as putting the animation in a try .. finally, but I think that may bring the UI back in a broken state.

Hmmm, interesting.
Would you like to try override HardSetAsync and perform something like

protected override async Task HardSetAsync()
{

    var opacity = Opacity;
    var scale = Scale;

    try
    {
        await Task.WhenAny(
            base.HardSetAsync(),
            Task.Delay(350));
    }
    finally 
    {
        Opacity = opacity;
        Scale = scale;
    }
}

[xariosstewart]

Well, I was completely wrong. HardSetAsync is being called multiple times the last of which is when the Opacity is set to 0 from a previous call.

[AndreiMisiukevich]

Well, I was completely wrong. HardSetAsync is being called multiple times the last of which is when the Opacity is set to 0 from a previous call.

Then we should fix that :)

[AndreiMisiukevich]

Try 2.6.5

[xariosstewart]

All good in 2.6.5, thanks for the quick turnaround.

From: Andrei [e-mail]
Sent: 25 October 2020 22:27
To: AndreiMisiukevich/CardView [e-mail]
Cc: Stewart Draper [e-mail]; Comment [e-mail]
Subject: Re: [AndreiMisiukevich/CardView] CoverFlowView gets out of sync with rapid trigger of SelectedIndex (#313)

Closed #313https://github.com/AndreiMisiukevich/CardView/issues/313.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHubhttps://github.com/AndreiMisiukevich/CardView/issues/313#event-3918297919, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ANR7WK6WZQQZHH23TTGNJN3SMSQZXANCNFSM4JPT6TAQ.

Click herehttps://www.mailcontrol.com/sr/SnJrw6UckJDGX2PQPOmvUujshICbHL2sirjvlz29flVfcI0vC0jdBoE-oa52ctCbR3e-F2YuvtwX_sYT9IPN0A== to report this email as spam.

[xariosstewart]

All good in 2.6.5, thanks for the fix and quick turnaround.

[xariosstewart]

Hi Andrei,

We're seeing OOM FireTV client crashes with sustained rapid navigation (either repeated manual taps or by holding down the L/R navigation button.

AppCenter has caught the following stack traces:

`
Stacktrace

mono.java.lang.RunnableImplementor.run(RunnableImplementor.java:30);

Reason

Java.Lang.Error: Failed to allocate a 8294412 byte allocation with 3722960 free bytes and 3MB until OOM`

and

`
Stacktrace

crc643f46942d9dd1fff9.Platform_DefaultRenderer.onLayout(Platform_DefaultRenderer.java:72);
com.xamarin.forms.platform.android.FormsViewGroup.measureAndLayout(FormsViewGroup.java:37);
crc64ee486da937c010f4.FrameRenderer.onLayout(FrameRenderer.java:47);
crc643f46942d9dd1fff9.Platform_DefaultRenderer.onLayout(Platform_DefaultRenderer.java:72);
com.xamarin.forms.platform.android.FormsViewGroup.measureAndLayout(FormsViewGroup.java:37);
crc64ee486da937c010f4.FrameRenderer.onLayout(FrameRenderer.java:47);
crc643f46942d9dd1fff9.VisualElementRenderer_1.onLayout(VisualElementRenderer_1.java:91);
com.xamarin.forms.platform.android.FormsViewGroup.measureAndLayout(FormsViewGroup.java:37);
crc643f46942d9dd1fff9.Platform_DefaultRenderer.onLayout(Platform_DefaultRenderer.java:72);
com.xamarin.forms.platform.android.FormsViewGroup.measureAndLayout(FormsViewGroup.java:37);
crc643f46942d9dd1fff9.Platform_DefaultRenderer.onLayout(Platform_DefaultRenderer.java:72);
com.xamarin.forms.platform.android.FormsViewGroup.measureAndLayout(FormsViewGroup.java:37);
crc643f46942d9dd1fff9.PageRenderer.onLayout(PageRenderer.java:72);
com.xamarin.forms.platform.android.FormsViewGroup.measureAndLayout(FormsViewGroup.java:37);
crc64720bb2db43a66fe9.NavigationPageRenderer.onLayout(NavigationPageRenderer.java:65);
com.xamarin.forms.platform.android.FormsViewGroup.measureAndLayout(FormsViewGroup.java:37);
crc643f46942d9dd1fff9.PlatformRenderer.onLayout(PlatformRenderer.java:55);

Reason

Java.Lang.Error: Failed to allocate a 8294412 byte allocation with 3630376 free bytes and 3MB until OOM
`
I've tried removing the fade/scale in HardSetAsync to see if that's the issue, but that had no effect.

When these occur the app is terminated and the user left at the home page.

[AndreiMisiukevich]

I don't think I can fix this issue without a reproduction sample :(
It seems to be a memory leak, right?
Would you like to debug CardsView to find where does it happen (Or maybe it's not related to CardsView at all?)

[xariosstewart]

Hi Andrei,

This looks to be a problem with my code. I’ve put an image in the CoverFlow.ItemTemplate that’s using a file that’s stored on the device rather than an embedded resource and I suspect that its loading them too fast for the large object heap garbage collector to keep up. If I take the image off the template it doesn’t have the problem. I’ll go back to the drawing board and come up with some better memory management.

Thanks for getting back to me (again).

From: Andrei [e-mail]
Sent: 11 November 2020 22:48
To: AndreiMisiukevich/CardView [e-mail]
Cc: Stewart Draper [e-mail]; Comment [e-mail]
Subject: Re: [AndreiMisiukevich/CardView] CoverFlowView gets out of sync with rapid trigger of SelectedIndex (#313)

I don't think I can fix this issue without a reproduction sample :(
It seems to be a memory leak, right?
Would you like to debug CardsView to find where does it happen (Or maybe it's not related to CardsView at all?)

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHubhttps://github.com/AndreiMisiukevich/CardView/issues/313#issuecomment-725703892, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ANR7WK4ZZKLIVB72FMTAAOTSPMIB3ANCNFSM4JPT6TAQ.

Click herehttps://www.mailcontrol.com/sr/KxCeCCfW_xvGX2PQPOmvUujshICbHL2sppzLljtigyWzjk45rG0tvPfGNHnq4waG4ESQRA0Ks4MgL4AI7al_HQ== to report this email as spam.

[AndreiMisiukevich]

@xariosstewart thanks for letting me know 👍