fix(base-loading): revert to the old code & make animation work with blocking method & fix fur in animation

[suica]

closes #3556

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
naive-ui	❌ Failed (Inspect)			Dec 20, 2023 7:15pm

[codecov-commenter]

Codecov Report

Patch coverage: 100.00% and no project coverage change.

Comparison is base (437ce23) 62.38% compared to head (d2a60ce) 62.38%.

❗ Your organization is not using the GitHub App Integration. As a result you may experience degraded service beginning May 15th. Please install the Github App Integration for your organization. Read more.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #5072   +/-   ##
=======================================
  Coverage   62.38%   62.38%           
=======================================
  Files        1074     1074           
  Lines       22587    22588    +1     
  Branches     5929     5929           
=======================================
+ Hits        14091    14092    +1     
  Misses       6953     6953           
  Partials     1543     1543           

Impacted Files	Coverage Δ
src/_internal/loading/src/styles/index.cssr.ts	100.00% <ø> (ø)
src/_internal/loading/src/Loading.tsx	100.00% <100.00%> (ø)

☔ View full report in Codecov by Sentry.
📢 Do you have feedback about the report comment? Let us know in this issue.

[Sepush]

may add a demo for js blocking case like this one https://codesandbox.io/s/currying-hooks-ef7g87?file=/src/App.vue

[Sepush]

not blocking but animation get slow,Is this acceptable？cc @07akioni

[suica]

This is because I wrapped the svg with a rotating container, which has a longer period than the spinner itsself.
It turns out we cannot use svg animation and css animation together and expect them to have the same phase. Svg animation will be blocked by JS, but simple css animation will not.
So we need to replace all svg animation with css animation. Is there any way to construct css animation in tsx file?

[07akioni]

This is because I wrapped the svg with a rotating container, which has a longer period than the spinner itsself. It turns out we cannot use svg animation and css animation together and expect them to have the same phase. Svg animation will be blocked by JS, but simple css animation will not. So we need to replace all svg animation with css animation. Is there any way to construct css animation in tsx file?

Using css-render

[07akioni]

not blocking but animation get slow,Is this acceptable？cc @07akioni

It used to be this.