Skia mount startup time

[Nodonisko]

Hello guys,
first of all thank you for this amazing library. I playing with this library and I am trying to use it to render SVG icons instead of react-native-svg. Briefly discussed in #462 and solution you suggested works very well, but recently I noticed there is noticeable delay between component mount and when it actually renders anything. I tried to replace SVG with just some Circle component, to verify this is not related just some SVG loading and it seems it is not.

I tried both iOS and Android, development and production. It's little bit better in production and on iOS, but still noticeable especially on Android .

Do you think this is some Skia limitation or it's something that can be possibly improved? If it's something that could be improved I will try to figure it out.

Video (video is actually slowed down to 0.25x, but you can notice this as user even at normal speed):

simulator-screen-recording-iphone-13-2022-06-17-at-190240_7mNyXc5b.mov

And code of my Icon component:

const icons = {
	close: require('close.svg');
	...etc
}

export const Icon = ({ name, size = 'large', color = 'black' }: IconProps) => {
    const svg = useSVG(icons[name]);
    const {
        utils: { colors },
    } = useNativeStyles();
    const sizeNumber = iconSizes[size];
    const paint = usePaintRef();

    return (
        <Canvas style={{ height: sizeNumber, width: sizeNumber }}>
            <Paint ref={paint}>
                <BlendColor color={colors[color]} mode="srcIn" />
            </Paint>
            <Group layer={paint}>
                {svg && <ImageSVG svg={svg} x={0} y={0} width={sizeNumber} height={sizeNumber} />}
            </Group>
        </Canvas>
    );
};

Thanks!

[wcandillon]

@Nodonisko this Icon component is fun ;-)

I've rebuilt a similar example but the only delay I can experience seems to be a "warmup" issue where some shaders need to be initialized. Once we draw the icon once, redrawing seems instantaneous even on a very low-end Android device (I'm testing on a Nokia 6.2).

@chrfalch I feel like it could be fun to have useSVG (or useImage) to return an SkPicture, then we can use it to warmup. Where would we draw these picture to warmup? 🤔 a Surface not visible on screen? (either below an opaque view or translated to not be visible? 🤔)

As a side note, you can use the Group for the icon size. For instance here, all my icons are of size 24x24:

      <Group
        layer={paint}
        transform={fitbox(
          "contain",
          Skia.XYWHRect(0, 0, 24, 24),
          Skia.XYWHRect(0, 0, size, size)
        )}
      >
        {svg && <ImageSVG svg={svg} x={0} y={0} width={24} height={24} />}
      </Group>

[Nodonisko]

Redraw seems to be OK, but problem is inital draw during mounting, because usually screen is not mounted before usage, so it will flicker when screen is pushed into stack (or tab changed) and do that expensive initial draw again.

If I understand correctly how SkPicture works and if will cache shaders then it could really help.

Also thanks for suggestion with Group transform, but all my SVG are preprocessed by SVGO and hardcoded dimensions are removed, so settings width, height to ImageSVG works fine. Are there any other benefits of using that transform?

[wcandillon]

haha indeed then width/height is fine. We will followup on the warmup stuff.

[Nodonisko]

I think maybe only adding SkPicture to useSvg will be enough to do some proof of concept, because then I can try some little bit hacky things like this:

const style = {
 // maybe transform out of the screen or something like that
}
export const iconsPictures = {};

const PredrawPictures = () => {

<View style={style}>
	  {icons.map(({source, name}) => {
		const picture = useSvg(source);
		const serialized = picture.serialize();
		if(serialized) {
			iconsPictures[name] = serialized;
		}
		return <Picture picture={picture} />;
	  })}
</View>
}

Then I can render icons from that iconsPictures object. If this will really solve issue maybe we can introduce some more refined caching solution that will be shipped with lib?

@wcandillon feel free to open open issue for that return of SkPicture and assign it to me, I would love to try it figure it out myself.

Also seems to be related to #449

[wcandillon]

It is definitely related to #449.

I think a fun component would be to do a <LoadAssets> component where you pass the icons and return the children only when you've draw the icon. The thing to test here is probably to only render one icon, the assumption being that this would create the necessary shaders on the GPU. Using the picture as seen at https://github.com/Shopify/react-native-skia/blob/main/example/src/Examples/API/Picture.tsx would give an extra speed boost (should be extremely small for simple icons) and we can serialize them into files so we could debug them at https://debugger.skia.org/ so we can understand the drawing commands that need to be warmed-up.

[wcandillon]

@Nodonisko I wrote this component based on Flutter: #612. It definitely does the job for your current example. Can you confirm? On our side we need to understand this topic a little bit more before committing to something.

[Nodonisko]

@wcandillon Not sure if I am doing it right but I took WarmupSkia component, wrapped my app in it, but it seems to have no effect, no change from what you can see on video.

[wcandillon]

This is what I am seeing on iphone x (x0.25). Could you send me your icons just in case?

test.mov

[Nodonisko]

Icons are here:
icons.zip

I also tried it with mounting/unmouting component with {isMounted && <Component /> to rule out some react-navigation magic, but it seems is has no effect. Same speed for both version with and without warmup.

[hirbod]

I've figured that wrapping the screens with https://github.com/nandorojo/react-navigation-heavy-screen (which basically just delays mount with InteractionManager) helps to cover up the delayed mounting (since per default it also adds a small opacity transition effect).

It makes

1. navigation faster
2. covers up the delayed render

   <OptimizedHeavyScreen style={{ flexGrow: 1 }}>
       ... my heavy stuff
   </OptimizedHeavyScreen>

This is by no means a fix, but a nice way to make it look good :)

[Nodonisko]

@hirbod Thanks for suggestion, I will give it a try but not sure if this will help during tab switching which is without screen transition animation. During the normal screen stack transition, icons are usually rendered before transition is finished so it looks good (need to test it on slower devices).

There is also one strange behavior that I noticed. I added unmountOnBlur: false to my Tab.Navigator which I thinked it will help because it should keep screens mounted, but actually it didn't. I still can see some delay which you can see on video (all screen was already visited and mounted before). Any idea what could be the cause? @wcandillon I believe this must be caused by some Skia internals because components are already mounted and RN should do nothing after screen switch.

Video speed 0.25x

screen-20220729-191131.online-video-cutter.com.mp4