mirror of
https://github.com/stablyai/orca.git
synced 2026-11-15 18:37:24 +00:00
Kelvin Amoaba
6aa71261b9
* fix(mobile): stop page bounce and input zoom; URL keyboard for new browser tabs * feat(mobile): smoother motion, press feedback everywhere, reduced motion for sheets Working rings and the tool-run pulse run as compositor animations on the page. Sheets, the right panel, the page stack and the pager cross-fade under Reduce Motion. The right panel shares the sheet's drag physics. The composer cross-fades Send/Stop/Save and the mic, jump-to-latest and prompt cards ease in, banners ease their height, and every Pressable shows a pressed state. Pairing gets a success beat, and the clean state fades in after a commit.
25 lines
828 B
TypeScript
25 lines
828 B
TypeScript
import { Animated } from 'react-native'
|
|
import { Hourglass, LoaderCircle } from 'lucide-react-native'
|
|
import { useReducedMotionEnabled } from '../platform/use-reduced-motion'
|
|
import { useWorkingRingRotation } from './use-working-motion'
|
|
|
|
// Match desktop one-second spinner; reduced motion uses distinct working icon so frozen circle does not look stuck.
|
|
export function LoadingSpinner({
|
|
size,
|
|
color
|
|
}: {
|
|
size: number
|
|
color: string
|
|
}): React.JSX.Element {
|
|
const reducedMotion = useReducedMotionEnabled()
|
|
const ring = useWorkingRingRotation(reducedMotion === false)
|
|
if (reducedMotion) {
|
|
return <Hourglass size={size} color={color} strokeWidth={2} />
|
|
}
|
|
return (
|
|
<Animated.View ref={ring.ref} style={ring.style}>
|
|
<LoaderCircle size={size} color={color} strokeWidth={2} />
|
|
</Animated.View>
|
|
)
|
|
}
|