optimize svg loading "especially for chrome"

[ctf0]

chrome is very dump when it comes to svg, as having more than 15 or 20 svg on the same page could simply render a very unpleasant experience.

so as the package atm uses svg + blurring , masking, loop the numbers list at least a couple of times b4 showing the final value, it means that any other animation that happens at the same time will hang a bit.

so we need to find a way to optimize the svg animation to minimize the jerking effect that affects chrome, some solutions could be

• shorten the animation duration
• disable the blurring Make Blur and Gradient optional! #29
• use font instead "one way or another will render badly at some point"
• have a maximum value for looping, ex.
  • if the current is 5 and the next value is 100, don't play the slot machine effect and go straight to it. how to animate the number change without the slot machine effect ? #45
  • if the difference between current and next were something like 10 digits or less, then make the loop to create the big list illusion.

[coderitual]

Thanks for your feedback and suggestions! I will be investigating possible options to make it more performant at certain circumstances.

[ctf0]

@coderitual btw, do you have any time frame for the new api ?

[coderitual]

I will be starting by the end of the week. Unfortunately December is quite busy for me so I would expect begining of Jan to have it ready. Ofc POC will be much faster. Also because this is an api change, all that will be part of v2. When do you need this?

[ctf0]

i wanted to use it in my prev mentioned package.
still np take ur time, but for a start can we get around the long list loop ?

[coderitual]

Yup, I can start from it.

[coderitual]

I reopen as this is part of the future optimization. Sorry I didn't improve it yet. I would leave this though to keep this in mind. Performance especially on mobiles is not satisfying.