Images loading time due to images sizes about rive-next HOT 7 CLOSED

@M-YasirGhaffar ,

Initially I was going with Image component but faced some issue where Image was not loading from tmdb image endpoint
If you want, you may work on this

from rive-next.

@M-YasirGhaffar ,
LazyLoadImage has been intentionally added
Without it the Images use to load line-by-line (raster scan)

We have used the react-lazy-load-image-component to solve this issue by loading the image only when the image has been fully loaded

And as we are using LazyLoadImage, we cannot use of next/image
And react-lazy-load-image-component's LazyLoadImage has been used in many large-scale projects for optimized and production ready image loading.
Initially we were not using this react-package but when slow internet the images use to load in raster scan fashion, which looks bad for a production ready app/web.

So this issue becomes irrelevant in image load optimization.

from rive-next.

@M-YasirGhaffar ,

I have tried using motion.img and yes it work well on local machine,
but when deployed and on slow internet it does the same raster scan

Initially our project was using motion.img only, and I didn't want to switch to a new package for lazy load,
but we had to switch due to issues after deployment
so always check in deployed and slow internet environment

And if there is space for improvement, then I will not close this issue as of now 👍

You can ask for environment vars using gmail for better functionalities

from rive-next.

Thanks @M-YasirGhaffar for opening this issue!

For COLLABORATOR only :

• To add labels, comment on the issue
  /label add label1,label2,label3

• To remove labels, comment on the issue
  /label remove label1,label2,label3

from rive-next.

First issue by @M-YasirGhaffar

Issues Details of @M-YasirGhaffar in rive-next :

from rive-next.

I have thought of a solution which requires changes at a lot of places (hence plenty of free time is required).
Use of LazyLoadImage is causing the images to load with a delay. I think it would be better to use motion.img since components are already using motion animations.
Leaving my suggestion here just in case someone would like to solve this issue.

from rive-next.

Although LazyLoadImage makes the loading animation look consistent but it still takes a lot of time for images to load. I have tried with one component on my local machine and use of motion.img (adjusting size using their inline property instead of scss) seem to have visibly reduced the loading time.
Maybe we can find a way to add more lazy loading and optimized images component like motion.img or next/Image
You can close this issue if you think its irrelevant but i think there is a space for improvement.

from rive-next.