use base tamagui spinner for now

tloncorp · Apr 5, 2024 · fefee41 · fefee41
1 parent 4659a66
commit fefee41
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 2 deletions.
diff --git a/packages/ui/src/components/ChannelSearch/SearchStatus.tsx b/packages/ui/src/components/ChannelSearch/SearchStatus.tsx
@@ -24,7 +24,7 @@ export function SearchStatus({
         <>
           {!searchComplete && (
             <View marginRight="$s">
-              <LoadingSpinner height={14} />
+              <LoadingSpinner />
             </View>
           )}
           {numResults > 0 && (

diff --git a/packages/ui/src/components/LoadingSpinner.tsx b/packages/ui/src/components/LoadingSpinner.tsx
@@ -9,13 +9,27 @@ import {
   useColorScheme,
 } from 'react-native';
 import { useTailwind } from 'tailwind-rn';
+import { ColorTokens } from 'tamagui';
+
+import { Spinner } from '../core';
 
 type Props = {
   height?: number;
   durationMs?: number;
 };
 
-export const LoadingSpinner = ({ height = 24, durationMs = 1000 }: Props) => {
+export function LoadingSpinner({
+  size,
+  color,
+}: {
+  size?: 'large' | 'small';
+  color?: ColorTokens;
+}) {
+  return <Spinner size={size} color={color ?? '$color.gray700'} />;
+}
+
+// Do not use this, here for reference only
+const LegacySpinner = ({ height = 24, durationMs = 1000 }: Props) => {
   const rotationDegree = useRef(new Animated.Value(0)).current;
   const tailwind = useTailwind();
   const isDarkMode = useColorScheme() === 'dark';

diff --git a/packages/ui/src/core/tamagui.ts b/packages/ui/src/core/tamagui.ts
@@ -12,6 +12,7 @@ export {
   ScrollView,
   YGroup,
   SizableText,
+  Spinner,
   TextArea,
   Text,
 } from 'tamagui';