From bbc0a273fdb1a11d8a0c0eb551e00214b3421a93 Mon Sep 17 00:00:00 2001 From: tapframe Date: Sat, 5 Jul 2025 12:39:47 +0530 Subject: [PATCH] Refactor StreamsScreen loading state management and remove "Sync pending" label from HeroSection --- src/components/metadata/HeroSection.tsx | 5 ++--- src/screens/StreamsScreen.tsx | 24 ++++++++++++++++++++---- 2 files changed, 22 insertions(+), 7 deletions(-) diff --git a/src/components/metadata/HeroSection.tsx b/src/components/metadata/HeroSection.tsx index b64cf98..21625f2 100644 --- a/src/components/metadata/HeroSection.tsx +++ b/src/components/metadata/HeroSection.tsx @@ -366,9 +366,8 @@ const WatchProgressDisplay = React.memo(({ displayText = `${Math.round(progressPercent)}% watched (${Math.round(watchProgress.traktProgress)}% on Trakt)`; } } else { - // Only show "Sync pending" if the content hasn't been synced AND the local progress is significant - const hasSignificantProgress = progressPercent > 1; - syncStatus = hasSignificantProgress ? ' • Sync pending' : ''; + // Do not show "Sync pending" label anymore; leave status empty. + syncStatus = ''; } } diff --git a/src/screens/StreamsScreen.tsx b/src/screens/StreamsScreen.tsx index 7d9380e..8eafdb1 100644 --- a/src/screens/StreamsScreen.tsx +++ b/src/screens/StreamsScreen.tsx @@ -244,8 +244,8 @@ export const StreamsScreen = () => { - // Add timing logs - const [loadStartTime, setLoadStartTime] = useState(0); + // Track when we started fetching streams so we can show an extended loading state + const [streamsLoadStart, setStreamsLoadStart] = useState(null); const [providerLoadTimes, setProviderLoadTimes] = useState<{[key: string]: number}>({}); // Prevent excessive re-renders by using this guard @@ -378,9 +378,11 @@ export const StreamsScreen = () => { 'stremio': true }); setSelectedEpisode(episodeId); + setStreamsLoadStart(Date.now()); loadEpisodeStreams(episodeId); } else if (type === 'movie') { logger.log(`🎬 Loading movie streams for: ${id}`); + setStreamsLoadStart(Date.now()); loadStreams(); } @@ -927,6 +929,12 @@ export const StreamsScreen = () => { const isLoading = type === 'series' ? loadingEpisodeStreams : loadingStreams; const streams = type === 'series' ? episodeStreams : groupedStreams; + // Determine extended loading phases + const streamsEmpty = Object.keys(streams).length === 0; + const loadElapsed = streamsLoadStart ? Date.now() - streamsLoadStart : 0; + const showInitialLoading = streamsEmpty && (streamsLoadStart === null || loadElapsed < 10000); + const showStillFetching = streamsEmpty && loadElapsed >= 10000; + const heroStyle = useAnimatedStyle(() => ({ transform: [{ scale: heroScale.value }], opacity: headerOpacity.value @@ -1151,8 +1159,8 @@ export const StreamsScreen = () => { Add Sources - ) : Object.keys(streams).length === 0 ? ( - (loadingStreams || loadingEpisodeStreams) ? ( + ) : streamsEmpty ? ( + showInitialLoading ? ( { {isAutoplayWaiting ? 'Finding best stream for autoplay...' : 'Finding available streams...'} + ) : showStillFetching ? ( + + + Still fetching streams… + ) : ( // No streams and not loading = no streams available