diff --git a/src/components/SplashScreen.tsx b/src/components/SplashScreen.tsx index fabe7b81..e4657407 100644 --- a/src/components/SplashScreen.tsx +++ b/src/components/SplashScreen.tsx @@ -15,13 +15,13 @@ const SplashScreen = ({ onFinish }: SplashScreenProps) => { const timer = setTimeout(() => { Animated.timing(fadeAnim, { toValue: 0, - duration: 800, + duration: 400, useNativeDriver: true, }).start(() => { // Call onFinish when animation completes onFinish(); }); - }, 1500); // Show splash for 1.5 seconds + }, 300); // Show splash for 0.8 seconds return () => clearTimeout(timer); }, [fadeAnim, onFinish]); @@ -56,4 +56,4 @@ const styles = StyleSheet.create({ }, }); -export default SplashScreen; \ No newline at end of file +export default SplashScreen; \ No newline at end of file diff --git a/src/components/loading/MetadataLoadingScreen.tsx b/src/components/loading/MetadataLoadingScreen.tsx index c0a8ebf5..74186d2b 100644 --- a/src/components/loading/MetadataLoadingScreen.tsx +++ b/src/components/loading/MetadataLoadingScreen.tsx @@ -6,6 +6,7 @@ import { Dimensions, Animated, StatusBar, + Easing, } from 'react-native'; import { SafeAreaView } from 'react-native-safe-area-context'; import { LinearGradient } from 'expo-linear-gradient'; @@ -25,8 +26,37 @@ export const MetadataLoadingScreen: React.FC = ({ // Animation values - removed fadeAnim since parent handles transitions const pulseAnim = useRef(new Animated.Value(0.3)).current; const shimmerAnim = useRef(new Animated.Value(0)).current; + + // Scene transition animation values (matching tab navigator) + const sceneOpacity = useRef(new Animated.Value(0)).current; + const sceneScale = useRef(new Animated.Value(0.95)).current; + const sceneTranslateY = useRef(new Animated.Value(8)).current; useEffect(() => { + // Scene entrance animation (matching tab navigator) + const sceneAnimation = Animated.parallel([ + Animated.timing(sceneOpacity, { + toValue: 1, + duration: 200, + easing: Easing.bezier(0.25, 0.1, 0.25, 1.0), + useNativeDriver: true, + }), + Animated.timing(sceneScale, { + toValue: 1, + duration: 200, + easing: Easing.bezier(0.25, 0.1, 0.25, 1.0), + useNativeDriver: true, + }), + Animated.timing(sceneTranslateY, { + toValue: 0, + duration: 200, + easing: Easing.bezier(0.25, 0.1, 0.25, 1.0), + useNativeDriver: true, + }), + ]); + + sceneAnimation.start(); + // Continuous pulse animation for skeleton elements const pulseAnimation = Animated.loop( Animated.sequence([ @@ -56,6 +86,7 @@ export const MetadataLoadingScreen: React.FC = ({ shimmerAnimation.start(); return () => { + sceneAnimation.stop(); pulseAnimation.stop(); shimmerAnimation.stop(); }; @@ -130,7 +161,18 @@ export const MetadataLoadingScreen: React.FC = ({ barStyle="light-content" /> - + {/* Hero Skeleton */} = ({ )} - + ); };