When using skeleton as loader, screen stucks and flickers

[Nadimkhan120]

Is there an existing issue for this?

• I have searched the existing issues

Do you want this issue prioritized?

• Yes, I have sponsored
• Not urgent

Current Behavior

1. add a skeleton in one screen as loader
2. navigate from another screen to the screen having loader
3. screen stucks and there is a flicker

Expected Behavior

when using skeleton as loader screen should not stuck, it should work fine

Steps To Reproduce

1. add a skeleton in one screen as loader
2. navigate from another screen to the screen having loader
3. screen stucks and there is a flicker
4. if i remove skeleton, it will work fine

Versions

- Moti:0.28.1
- Reanimated:3.11.0
- React Native:0.74.1

Screenshots

WhatsApp.Video.2024-05-15.at.12.16.00.AM.mp4

WhatsApp.Video.2024-05-15.at.12.17.45.AM.mp4

Reproduction

https://github.com/enzomanuelmangano/animate-with-reanimated/tree/main/18-skeleton-animation

[adamhari]

I'm experiencing something similar after upgrading from Expo 50 --> 51 where, after navigating to a screen that initially has a Skeleton with show={true} that later becomes show={false}, the Skeleton component continues to overlay it's children even after the show property is false.

This seems to be an Android issue, or at least I haven't been able to reproduce it on iOS or web, but that might have more to do with the performance characteristics of my Android device than it does the platform.

[Nadimkhan120]

@adamhari yes its on android.

[Bialson]

I have similar problem to that. When I wrap <Image/> component with skeleton, there are strange flicker, image re-render and the height of layout is changing so that's why flicker appears.

[andrewchester1]

I am noticing this same issue. When navigating to a new tab for the initial render, the screen gets stuck. I have tried upgrading everything, and this still a issue.

[Devdannnny]

I experienced the same issue, and it took me a couple of hours to figure out that it was from Moti's skeleton component. Everything looks good after disabling the skeleton.

[nandorojo]

And it's only on Android?

[Nadimkhan120]

Yes

…

On Tue, Oct 1, 2024, 5:21 PM Fernando Rojo ***@***.***> wrote: And it's only on Android? — Reply to this email directly, view it on GitHub <#344 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AWGYJ3RLG5UM7UUT22NGEZTZZKHU5AVCNFSM6AAAAABHWZLU3OVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGOBVGYZTEMBYGM> . You are receiving this because you authored the thread.Message ID: ***@***.***>

[alantoa]

hey @Nadimkhan120, can you create a reproduction example? I clicked the reproduction example that you sent, but that example doesn't exist.

and I just tested it on Android, it works well for me.

"moti": "0.29.0",
"react-native-reanimated": "3.12.1",