react-native-skeleton-placeholder VS squoosh

A word of warning about https://github.com/chramos/react-native-skeleton-placeholder … v4 has a serious performance issue on Android in my experience, and v5 has a masking library conflict with React Navigation that I couldn’t resolve. I ended up removing it altogether… YMMV

Hi, i was asked to implement dnyamic skeleton loader to entire app instead of activity indicator. But packages i found are not performant and hard to use. You need to give a view as same as the component you need to mask. And also need at least one state to control. package: https://github.com/chramos/react-native-skeleton-placeholder usage:

Here's another handy tool that I use: https://squoosh.app/

Squoosh: A webpage that allows you to quickly optimize images for your blog.

One of the most complete image compressor out there, squoosh.app by Google, uses web assembly for decoding/encoding images and it works pretty well.

First off you want to shrink your images. Every mb your page is the more it will hurt your score. I use https://squoosh.app/

https://squoosh.app/

Having a quick look at squoosh, it uses lossy compression of webp by default.

Size images appropriately (https://squoosh.app/ can be used for this). Ideally, the size of the image should be kept below 100 KB.

if your images a large file size, remove them from the page, reduce file size, and place new reduced file size images in their place - publish the site to bring the new pics live - clear your cache - go the page and test it (good tool to reduce image file size is Google Squoosh - https://squoosh.app/ )

I'm just exporting normally from Figma, but then using squoosh.app (browser based) to adjust quality/compression and even for making sure png files are optimized for prod.

Hey I see your friend made a clan, but this guy found a workaround here if you still need it. I just used https://squoosh.app/ to basically save a new copy of the image and that worked