Use CSS keyframe animation for spinner on web (#3411)

* Use css keyframe animation for spinner on web

* duplicate css to index.html

bskyweb/templates/base.html

@@ -220,6 +220,21 @@
     .nativeDropdown-item:focus {
       outline: none;
     }
+
+    /* Spinner component */
+    @keyframes rotate {
+      0% {
+        transform: rotate(0deg);
+      }
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+    .rotate-500ms {
+      position: absolute;
+      inset:0;
+      animation: rotate 500ms linear infinite;
+    }
   </style>
   {% include "scripts.html" %}
   <link rel="apple-touch-icon" sizes="180x180" href="/static/apple-touch-icon.png">

src/components/Loader.tsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import Animated, {
   Easing,
-  useSharedValue,
   useAnimatedStyle,
+  useSharedValue,
   withRepeat,
   withTiming,
 } from 'react-native-reanimated'
 
-import {atoms as a, useTheme, flatten} from '#/alf'
+import {atoms as a, flatten, useTheme} from '#/alf'
 import {Props, useCommonSVGProps} from '#/components/icons/common'
 import {Loader_Stroke2_Corner0_Rounded as Icon} from '#/components/icons/Loader'
 

src/components/Loader.web.tsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import {View} from 'react-native'
+
+import {atoms as a, flatten, useTheme} from '#/alf'
+import {Props, useCommonSVGProps} from '#/components/icons/common'
+import {Loader_Stroke2_Corner0_Rounded as Icon} from '#/components/icons/Loader'
+
+export function Loader(props: Props) {
+  const t = useTheme()
+  const common = useCommonSVGProps(props)
+
+  return (
+    <View
+      style={[
+        a.relative,
+        a.justify_center,
+        a.align_center,
+        {width: common.size, height: common.size},
+      ]}>
+      {/* css rotation animation - /bskyweb/templates/base.html */}
+      <div className="rotate-500ms">
+        <Icon
+          {...props}
+          style={[
+            a.absolute,
+            a.inset_0,
+            t.atoms.text_contrast_high,
+            flatten(props.style),
+          ]}
+        />
+      </div>
+    </View>
+  )
+}

web/index.html

@@ -224,6 +224,21 @@
       .nativeDropdown-item:focus {
         outline: none;
       }
+
+      /* Spinner component */
+      @keyframes rotate {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+      .rotate-500ms {
+        position: absolute;
+        inset:0;
+        animation: rotate 500ms linear infinite;
+      }
     </style>
   </head>