diff --git a/bskyweb/templates/base.html b/bskyweb/templates/base.html
index 678729ffb3..34e5901069 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;
+ }
{% include "scripts.html" %}
diff --git a/src/components/Loader.tsx b/src/components/Loader.tsx
index b9f399f953..e0b3be6373 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 0000000000..d8182673f6
--- /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 (
+
+ {/* css rotation animation - /bskyweb/templates/base.html */}
+
+
+
+
+ )
+}