diff --git a/src/components/metadata/HeroSection.tsx b/src/components/metadata/HeroSection.tsx index 80d15ab..78af079 100644 --- a/src/components/metadata/HeroSection.tsx +++ b/src/components/metadata/HeroSection.tsx @@ -21,6 +21,7 @@ import Animated, { withTiming, runOnJS, withRepeat, + FadeIn, } from 'react-native-reanimated'; import { useTheme } from '../../contexts/ThemeContext'; import { useTraktContext } from '../../contexts/TraktContext'; @@ -684,20 +685,24 @@ const HeroSection: React.FC = ({ }] }), []); - // Ultra-optimized genre rendering + // Ultra-optimized genre rendering with smooth animation const genreElements = useMemo(() => { if (!metadata?.genres?.length) return null; const genresToDisplay = metadata.genres.slice(0, 3); // Reduced to 3 for performance return genresToDisplay.map((genreName: string, index: number, array: string[]) => ( - + {genreName} {index < array.length - 1 && ( )} - + )); }, [metadata.genres, currentTheme.colors.text]); diff --git a/src/screens/MetadataScreen.tsx b/src/screens/MetadataScreen.tsx index d280638..e553d24 100644 --- a/src/screens/MetadataScreen.tsx +++ b/src/screens/MetadataScreen.tsx @@ -189,7 +189,7 @@ const MetadataScreen: React.FC = () => { useEffect(() => { if (isReady) { setIsContentReady(true); - transitionOpacity.value = withTiming(1, { duration: 200 }); + transitionOpacity.value = withTiming(1, { duration: 50 }); } else if (!isReady && isContentReady) { setIsContentReady(false); transitionOpacity.value = 0;