minor ui changes

src/components/common/TraktLoadingSpinner.tsx

@@ -0,0 +1,43 @@
+import React, { useEffect, useRef } from 'react';
+import { View, StyleSheet, Animated, Easing } from 'react-native';
+import TraktIcon from '../../../assets/rating-icons/trakt.svg';
+
+export const TraktLoadingSpinner = () => {
+    const spinValue = useRef(new Animated.Value(0)).current;
+
+    useEffect(() => {
+        const spin = Animated.loop(
+            Animated.timing(spinValue, {
+                toValue: 1,
+                duration: 1500,
+                easing: Easing.linear,
+                useNativeDriver: true,
+            })
+        );
+        spin.start();
+        return () => spin.stop();
+    }, [spinValue]);
+
+    const rotation = spinValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: ['0deg', '360deg'],
+    });
+
+    return (
+        <View style={styles.container}>
+            <Animated.View style={{ transform: [{ rotate: rotation }] }}>
+                <TraktIcon width={80} height={80} />
+            </Animated.View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 20,
+        transform: [{ translateY: -60 }],
+    },
+}); 

src/screens/LibraryScreen.tsx

@@ -29,6 +29,7 @@ import { useTheme } from '../contexts/ThemeContext';
 import { useTraktContext } from '../contexts/TraktContext';
 import TraktIcon from '../../assets/rating-icons/trakt.svg';
 import { traktService, TraktService, TraktImages } from '../services/traktService';
+import { TraktLoadingSpinner } from '../components/common/TraktLoadingSpinner';
 
 // Define interfaces for proper typing
 interface LibraryItem extends StreamingContent {
@@ -680,7 +681,7 @@ const LibraryScreen = () => {
 
   const renderTraktContent = () => {
     if (traktLoading) {
-      return <SkeletonLoader />;
+      return <TraktLoadingSpinner />;
     }
 
     // If no specific folder is selected, show the folder structure
@@ -839,7 +840,7 @@ const LibraryScreen = () => {
                   backgroundColor: currentTheme.colors.primary,
                   shadowColor: currentTheme.colors.black
                 }]}
-                onPress={() => navigation.navigate('Discover')}
+                onPress={() => navigation.navigate('MainTabs')}
                 activeOpacity={0.7}
               >
                 <Text style={[styles.exploreButtonText, { color: currentTheme.colors.white }]}>Explore Content</Text>