Enhance loading state management in useMetadata hook and adjust StreamsScreen styles

This update improves the useMetadata hook by adding a delay before marking loading states as complete, allowing Stremio addons more time to load streams. Additionally, the StreamsScreen component has been refined with updated gradient colors and layout adjustments, including padding and height modifications for a more consistent user interface. These changes enhance the overall user experience and visual appeal of the application.

src/hooks/useMetadata.ts

@@ -150,8 +150,12 @@ export const useMetadata = ({ id, type }: UseMetadataProps): UseMetadataReturn =
               
               if (isEpisode) {
                 setEpisodeStreams(updateState);
+                // Turn off loading when we get streams
+                setLoadingEpisodeStreams(false);
               } else {
                 setGroupedStreams(updateState);
+                // Turn off loading when we get streams
+                setLoadingStreams(false);
               }
             } else {
                logger.log(`🤷 [${logPrefix}:${sourceName}] No streams found for addon ${addonName} (${addonId})`);
@@ -634,15 +638,15 @@ export const useMetadata = ({ id, type }: UseMetadataProps): UseMetadataReturn =
         return prev;
       });
 
+      // Add a delay before marking loading as complete to give Stremio addons more time
+      setTimeout(() => {
+        setLoadingStreams(false);
+      }, 10000); // 10 second delay to allow streams to load
+
     } catch (error) {
       console.error('❌ [loadStreams] Failed to load streams:', error);
       setError('Failed to load streams');
-    } finally {
-      // Loading is now complete when external sources finish, Stremio updates happen independently.
-      // We need a better way to track overall completion if we want a final 'FINISHED' log.
-      const endTime = Date.now() - startTime;
-      console.log(`🏁 [loadStreams] External sources FINISHED in ${endTime}ms`);
-      setLoadingStreams(false); // Mark loading=false, but Stremio might still be working
+      setLoadingStreams(false);
     }
   };
 
@@ -716,14 +720,15 @@ export const useMetadata = ({ id, type }: UseMetadataProps): UseMetadataReturn =
         return prev;
       });
 
+      // Add a delay before marking loading as complete to give Stremio addons more time
+      setTimeout(() => {
+        setLoadingEpisodeStreams(false);
+      }, 10000); // 10 second delay to allow streams to load
+
     } catch (error) {
       console.error('❌ [loadEpisodeStreams] Failed to load episode streams:', error);
       setError('Failed to load episode streams');
-    } finally {
-      // Loading is now complete when external sources finish
-      const endTime = Date.now() - startTime;
-      console.log(`🏁 [loadEpisodeStreams] External sources FINISHED in ${endTime}ms`);
-      setLoadingEpisodeStreams(false); // Mark loading=false, but Stremio might still be working
+      setLoadingEpisodeStreams(false);
     }
   };
 

src/screens/StreamsScreen.tsx

@@ -691,12 +691,12 @@ export const StreamsScreen = () => {
           >
             <LinearGradient
               colors={[
+                'rgba(0,0,0,0.2)',
                 'rgba(0,0,0,0.4)',
                 'rgba(0,0,0,0.6)',
-                'rgba(0,0,0,0.8)',
                 colors.darkBackground
               ]}
-              locations={[0, 0.3, 0.7, 1]}
+              locations={[0, 0.4, 0.7, 1]}
               style={styles.movieTitleGradient}
             >
               <View style={styles.movieTitleContent}>
@@ -738,12 +738,12 @@ export const StreamsScreen = () => {
                 <LinearGradient
                   colors={[
                     'rgba(0,0,0,0)',
-                    'rgba(0,0,0,0.4)',
-                    'rgba(0,0,0,0.6)',
-                    'rgba(0,0,0,0.8)',
+                    'rgba(0,0,0,0.3)',
+                    'rgba(0,0,0,0.5)',
+                    'rgba(0,0,0,0.7)',
                     colors.darkBackground
                   ]}
-                  locations={[0, 0.3, 0.5, 0.7, 1]}
+                  locations={[0, 0.4, 0.6, 0.8, 1]}
                   style={styles.streamsHeroGradient}
                 >
                   <View style={styles.streamsHeroContent}>
@@ -810,7 +810,7 @@ export const StreamsScreen = () => {
           )}
         </Animated.View>
 
-        {isLoading && Object.keys(streams).length === 0 ? (
+        {isLoading || (Object.keys(streams).length === 0 && (loadingStreams || loadingEpisodeStreams)) ? (
           <Animated.View 
             entering={FadeIn.duration(300)}
             style={styles.loadingContainer}
@@ -878,7 +878,7 @@ const createStyles = (colors: any) => StyleSheet.create({
     alignItems: 'center',
     gap: 8,
     padding: 14,
-    paddingTop: Platform.OS === 'android' ? 35 : 45,
+    paddingTop: Platform.OS === 'android' ? 20 : 15,
   },
   backButtonText: {
     color: colors.highEmphasis,
@@ -892,7 +892,7 @@ const createStyles = (colors: any) => StyleSheet.create({
     zIndex: 1,
   },
   streamsMainContentMovie: {
-    paddingTop: Platform.OS === 'android' ? 90 : 100,
+    paddingTop: Platform.OS === 'android' ? 10 : 15,
   },
   filterContainer: {
     paddingHorizontal: 16,
@@ -1074,7 +1074,7 @@ const createStyles = (colors: any) => StyleSheet.create({
   },
   streamsHeroContainer: {
     width: '100%',
-    height: 300,
+    height: 220,
     marginBottom: 0,
     position: 'relative',
     backgroundColor: colors.black,
@@ -1203,7 +1203,7 @@ const createStyles = (colors: any) => StyleSheet.create({
   },
   movieTitleContainer: {
     width: '100%',
-    height: 180,
+    height: 200,
     backgroundColor: colors.black,
     pointerEvents: 'box-none',
   },