perf(loading spinner): optimize loading spinner and inline code + css animation

[VIKTORVAV99]

Description

Same as #6819 but uses CSS for the animation instead. Looks to be quicker than the animate elements in the code.
Closes: #6819

Double check

• I have run pnpx prettier@2 --write . and poetry run format in the top level directory to format my changes.

[VIKTORVAV99]

@tonypls if you think this works better feel free to merge this instead 🙂

[tonypls]

Maybe @Alportan can confirm the animation is perfect? Testing instructions, open dev tools, click on network tab, set throttling to fast 3G, reload tab and watch the spinner spin

[Alportan]

Maybe @Alportan can confirm the animation is perfect? Testing instructions, open dev tools, click on network tab, set throttling to fast 3G, reload tab and watch the spinner spin

The animation looks good 🙌

Maybe a small small thing, more regarding the logo SVG itself (*puts brand police cap on ⚡️👮‍♂️🚨), the zap in the middle seems a tiny bit bigger than the one we use in the logo asset. By far a nitpick and not a blocker to this PR 😅 🙈

☝️ I overlayed my asset on the screenshot of the spinner 🙌

[VIKTORVAV99]

Maybe @Alportan can confirm the animation is perfect? Testing instructions, open dev tools, click on network tab, set throttling to fast 3G, reload tab and watch the spinner spin

The animation looks good 🙌

Maybe a small small thing, more regarding the logo SVG itself (*puts brand police cap on ⚡️👮‍♂️🚨), the zap in the middle seems a tiny bit bigger than the one we use in the logo asset. By far a nitpick and not a blocker to this PR 😅 🙈

☝️ I overlayed my asset on the screenshot of the spinner 🙌

Well that's awkward as I copied the one we use for the favicon and animated that (it had cleaner proportions).
Do you have the original asset as SVG? if so I can update all our icons to use that later. Preferable in 512 or 1024 sizes?

[Alportan]

Well that's awkward as I copied the one we use for the favicon and animated that (it had cleaner proportions). Do you have the original asset as SVG? if so I can update all our icons to use that later. Preferable in 512 or 1024 sizes?

Haha, I don't know about the favicon, but I can definitely provide the SVGs. I've attached them here:

[madsnedergaard]

Nice! Minor comment, otherwise LGTM