Metal shaders compilation causes dropped frames during animations

Description

When using Skia JSX components and animating their properties using Reanimated, in some cases the during the animation Skia needs compile a new Metal shader and this takes mulitple tens or hundreds of milliseconds on older iOS devices causing the animation to drop frames.

I have not experienced this issue on Android.

I noticed the dropped frames visually and then verified this through Instruments, using the Hitches preset.

From Instruments you can see at the bottom an event that marks the begin of the animation and right after a couple frames taking ~170ms each to be shown, if you look at what the main thread is doing during those frame you can see it's blocked waiting for some Metal shader to compile.

I think this is supposed to be better with Graphite (i haven't tested) but since it's still experimental i wonder if there are ways this can be improved

React Native Skia Version

2.10.0

React Native Version

0.86.0

Using New Architecture

• Enabled

Steps to Reproduce

• Clone the repo linked below
• The app is just one screen with a full screen canvas showing an image with a blur filter, the "start animation" button at the bottom starts a cycle of increasing the blur radius to 20 and bringing it back to 0. To reproduce the issue open the app, once the image is fully loaded and so visible on the screen, tap the start animation button and that's it

Use XCode Instruments to inspect the app, i used the Hitches preset and added the os_signposts instrument since the app fires events at the start of the animation and at the end of each cycle to make it easier to link the track frames to what is actually happening

You should see that right after the animation start there are some very long frames, then for the first 1 or 2 cycles some longer frames sometimes appear, again looking at what the main thread is doing it appears to be waiting for shader compilation, then in successive cycles those frames tend to disappear, likely because the shaders have been cached at that point

Snack, Code Example, Screenshot, or Link to Repository

https://github.com/fbeccaceci/skia-metal-compilation-repro

Start with the linked skia-metal-compilation-repro repository and reproduce the blur-radius animation on an older iOS device. Use Xcode Instruments with the Hitches and os_signposts instruments, then inspect the long frames alongside the reported Metal shader compilation. Done means establishing the compilation-related hitch and documenting or validating a feasible improvement.