Delay video offline state to show loader during intermittent network

src/CONST/index.ts

@@ -6209,6 +6209,7 @@ const CONST = {
             NORMAL: 8,
         },
         DEFAULT_VIDEO_DIMENSIONS: {width: 1900, height: 1400},
+        OFFLINE_THRESHOLD: 7000,
     },
 
     INTRO_CHOICES: {

src/components/VideoPlayer/BaseVideoPlayer.tsx

@@ -59,6 +59,7 @@ function BaseVideoPlayer({
     const {isFullScreenRef} = useFullScreenState();
 
     const isOffline = useNetwork().isOffline;
+    const [isVideoOffline, setIsVideoOffline] = useState(false);
     const session = useSession();
     const encryptedAuthToken = session?.encryptedAuthToken ?? '';
     const [duration, setDuration] = useState(videoDuration);
@@ -109,11 +110,24 @@ function BaseVideoPlayer({
     });
 
     useEffect(() => {
-        if (!(isOffline && isLoading)) {
+        if (!isOffline) {
+            setIsVideoOffline(false);
+            return;
+        }
+
+        const timer = setTimeout(() => {
+            setIsVideoOffline(true);
+        }, CONST.VIDEO_PLAYER.OFFLINE_THRESHOLD);
+
+        return () => clearTimeout(timer);
+    }, [isOffline]);
+
+    useEffect(() => {
+        if (!(isVideoOffline && isLoading && isOffline)) {
             return;
         }
         videoPlayerRef.current.replaceAsync('');
-    }, [isLoading, isOffline]);
+    }, [isLoading, isVideoOffline, isOffline]);
 
     const videoViewRef = useRef<VideoView | null>(null);
     const videoPlayerElementParentRef = useRef<View | HTMLDivElement | null>(null);
@@ -124,18 +138,18 @@ function BaseVideoPlayer({
     const isCurrentlyURLSet = currentlyPlayingURL === url;
     const isUploading = CONST.ATTACHMENT_LOCAL_URL_PREFIX.some((prefix) => url.startsWith(prefix));
     const shouldShowErrorIndicator = useMemo(() => {
-        // No need to set hasError while offline, since the offline indicator is already shown.
+        // No need to set hasError while confirmed offline, since the offline indicator is already shown.
         // Once the user reconnects, if the video is unsupported, the error will be triggered again.
-        return hasError && !isOffline;
-    }, [hasError, isOffline]);
+        return hasError && !isVideoOffline;
+    }, [hasError, isVideoOffline]);
     const shouldShowLoadingIndicator = useMemo(() => {
         // We want to show LoadingIndicator when video's loading and paused, except when it's loading
-        // for the first time, then playing/loading may vary. Video should be online and without errors.
-        return isLoading && (!isPlaying || currentTime <= 0) && !isOffline && !hasError;
-    }, [currentTime, hasError, isLoading, isOffline, isPlaying]);
+        // for the first time, then playing/loading may vary. Video should not be confirmed offline and without errors.
+        return isLoading && (!isPlaying || currentTime <= 0) && !isVideoOffline && !hasError;
+    }, [currentTime, hasError, isLoading, isVideoOffline, isPlaying]);
     const shouldShowOfflineIndicator = useMemo(() => {
-        return isOffline && currentTime + bufferedPosition <= 0;
-    }, [bufferedPosition, currentTime, isOffline]);
+        return isVideoOffline && currentTime + bufferedPosition <= 0;
+    }, [bufferedPosition, currentTime, isVideoOffline]);
     const {updateVolume} = useVolumeActions();
     const {lastNonZeroVolume} = useVolumeState();
     useHandleNativeVideoControls({