fix: loading spinner does not work on ios safari

components/Icon/IconSpinner.tsx

@@ -1,14 +1,21 @@
-import {SVGProps} from 'react';
+import styles from './styles.module.scss'
+import { SVGProps } from 'react'
 
 export function IconSpinner(props: SVGProps<SVGSVGElement>) {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+    <svg xmlns="http://www.w3.org/2000/svg"
+         width="1em"
+         height="1em"
+         viewBox="0 0 24 24"
+         { ...{
+           ...props,
+           className: `${ styles.spinner } ${ props.className }`,
+         } }
+    >
       <path fill="currentColor" d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
             opacity=".25"></path>
       <path fill="currentColor"
             d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z">
-        <animateTransform attributeName="transform" dur="0.75s" repeatCount="indefinite" type="rotate"
-                          values="0 12 12;360 12 12"></animateTransform>
       </path>
     </svg>
   )

components/Icon/IconTablerVolume.tsx

@@ -1,7 +1,10 @@
-import {SVGProps} from 'react';
+import { SVGProps } from 'react'
 
 export default function IconTablerVolume(props: SVGProps<SVGSVGElement>) {
   return (
-    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props}><path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 8a5 5 0 0 1 0 8m2.7-11a9 9 0 0 1 0 14M6 15H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2l3.5-4.5A.8.8 0 0 1 11 5v14a.8.8 0 0 1-1.5.5z"></path></svg>
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" { ...props }>
+      <path fill="none" stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
+            d="M15 8a5 5 0 0 1 0 8m2.7-11a9 9 0 0 1 0 14M6 15H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2l3.5-4.5A.8.8 0 0 1 11 5v14a.8.8 0 0 1-1.5.5z"></path>
+    </svg>
   )
 }

components/Icon/styles.module.scss

@@ -0,0 +1,12 @@
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.spinner {
+  animation: rotate 0.75s linear infinite;
+}