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

* Use css keyframe animation for spinner on web

* duplicate css to index.html

1 files changed, 34 insertions, 0 deletions

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>
+  )
+}