Enhance HeroSection with animated genre rendering and optimize transition duration in MetadataScreen

This update introduces smooth fade-in animations for genre elements in the HeroSection component, improving visual appeal. Additionally, the transition duration in the MetadataScreen has been reduced for quicker content display, enhancing overall user experience.

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<HeroSectionProps> = ({
     }]
   }), []);
 
-  // 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[]) => (
-      <React.Fragment key={`${genreName}-${index}`}>
+      <Animated.View
+        key={`${genreName}-${index}`}
+        entering={FadeIn.duration(400).delay(200 + index * 100)}
+        style={{ flexDirection: 'row', alignItems: 'center' }}
+      >
         <Text style={[styles.genreText, { color: currentTheme.colors.text }]}>
           {genreName}
         </Text>
         {index < array.length - 1 && (
           <Text style={[styles.genreDot, { color: currentTheme.colors.text }]}>•</Text>
         )}
-      </React.Fragment>
+      </Animated.View>
     ));
   }, [metadata.genres, currentTheme.colors.text]);
 

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;