From 0d6408ab63c54da9d8c2363db4ebd047040d4907 Mon Sep 17 00:00:00 2001
From: tapframe <nayifveliya99@gmail.com>
Date: Fri, 9 May 2025 16:50:06 +0530
Subject: [PATCH] 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      | 27 ++++++++++++++++-----------
 src/screens/StreamsScreen.tsx | 22 +++++++++++-----------
 2 files changed, 27 insertions(+), 22 deletions(-)

diff --git a/src/hooks/useMetadata.ts b/src/hooks/useMetadata.ts
index d464c311..49b4e42a 100644
--- a/src/hooks/useMetadata.ts
+++ b/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);
     }
   };
 
diff --git a/src/screens/StreamsScreen.tsx b/src/screens/StreamsScreen.tsx
index c31daea6..7dd820cb 100644
--- a/src/screens/StreamsScreen.tsx
+++ b/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',
   },