feat(core): remove loop animations (#8242)

packages/frontend/component/src/ui/loading/loading.tsx

@@ -1,7 +1,8 @@
 import { assignInlineVars } from '@vanilla-extract/dynamic';
+import clsx from 'clsx';
 
 import { withUnit } from '../../utils/with-unit';
-import { loading, speedVar } from './styles.css';
+import { loading, rotateAnimation, speedVar } from './styles.css';
 
 export interface LoadingProps {
   size?: number | string;
@@ -18,7 +19,7 @@ export const Loading = ({
   const sizeWithUnit = size ? withUnit(size, 'px') : '16px';
   return (
     <svg
-      className={loading}
+      className={clsx(loading, speed !== 0 && rotateAnimation)}
       width={sizeWithUnit}
       height={sizeWithUnit}
       viewBox="0 0 24 24"

packages/frontend/component/src/ui/loading/styles.css.ts

@@ -12,10 +12,12 @@ const rotate = keyframes({
   },
 });
 export const loading = style({
+  transform: 'rotate(-90deg)',
+});
+
+export const rotateAnimation = style({
   vars: {
     [speedVar]: '1.5s',
   },
-  textRendering: 'optimizeLegibility',
-  transform: 'rotate(-90deg)',
   animation: `${rotate} ${speedVar} infinite linear`,
 });