diff --git a/src/components/common/TraktLoadingSpinner.tsx b/src/components/common/TraktLoadingSpinner.tsx new file mode 100644 index 0000000..7e85c6b --- /dev/null +++ b/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 ( + + + + + + ); +}; + +const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + padding: 20, + transform: [{ translateY: -60 }], + }, +}); \ No newline at end of file diff --git a/src/screens/LibraryScreen.tsx b/src/screens/LibraryScreen.tsx index 25fffa2..049df19 100644 --- a/src/screens/LibraryScreen.tsx +++ b/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 ; + return ; } // 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} > Explore Content