Delay in Skia Components Rendering While Mounting in RN v0.78.0

[AjayFrancisTechversant]

Description

There is a noticeable delay in rendering Skia components during the initial mount. In my project, I have a custom header that contains a LinearGradient from react-native-skia. However, this component takes some time to load, leaving an empty space in the header before it appears. This delay affects the user experience, making the app feel unresponsive.

This issue occurs in React Native v0.78.0 and skia v2.0.0-next.1.

Expected Behavior:
The Skia component should render immediately when the component mounts, avoiding the empty space in the header.

Actual Behavior:
The gradient takes a noticeable amount of time to appear, causing a blank header space momentarily.

Would love to hear if there's a recommended solution to avoid this delay. Thanks in advance! 🙌

React Native Skia Version

2.0.0-next.1

React Native Version

0.78.0

Using New Architecture

• Enabled

Steps to Reproduce

1)Clone my sample repo https://github.com/AjayFrancisTechversant/NewArchdummy.
2)Run the app (focus on Android).
3)Click on "go to lists"
Observe the header on the first render—there is a blank space before the gradient appears.
**Please focus only on the skia component, ignore all other delays(eg: flashlist delay)

Snack, Code Example, Screenshot, or Link to Repository

checkout this dummy repo https://github.com/AjayFrancisTechversant/NewArchdummy

Screen_Recording_20250317-152828_NewArchdummy.mp4