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

* Use css keyframe animation for spinner on web

* duplicate css to index.html

4 files changed, 66 insertions, 2 deletions

diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html
index 678729ffb..34e590106 100644
--- a/bskyweb/templates/base.html
+++ b/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">
diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx
index b9f399f95..e0b3be637 100644
--- a/src/components/Loader.tsx
+++ b/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'
 
diff --git a/src/components/Loader.web.tsx b/src/components/Loader.web.tsx
new file mode 100644
index 000000000..d8182673f
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/web/index.html b/web/index.html
index 7df097f22..06d00dec9 100644
--- a/web/index.html
+++ b/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>