Web - BaseVideoPlayer - Loader does not appear consistently during slow network

[jponikarchuk]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.3.21-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: #82480
Email or phone of affected tester (no customers): applausetester+th12@applause.expensifail.com
Issue reported by: Applause Internal Team
Bug source: Pull Request QA execution
Device used: Windows 11
App Component: Other

Action Performed:

1. Open the New Expensify App on Web.
2. Go to the workspace chat.
3. Click on “+” → “Add attachment”.
4. Select a short video (<24MB).
5. Before sending or playing the video, activate “Simulate poor internet connection” (network throttling / slow network).
6. Send or open the video.
7. Observe the loader behavior (ActivityIndicator).

Expected Result:

The loader (ActivityIndicator) should remain visible consistently while the video is loading or buffering under slow network conditions.

Once the video loads and starts playing, the loader disappears.

Actual Result:

The loader appears briefly at the start of the video load.

When the connection fluctuates, the app shows “No Connection” and does not keep the loader visible.

The video eventually loads and plays normally only after exiting and re-entering, without the loader being displayed during intermittent loading.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

Bug7081218_1771412107232.Grabando__332.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @rojiphil (External)

[melvin-bot]

Triggered auto assignment to @joekaufmanexpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[melvin-bot]

Unable to auto-create job on Upwork. The BZ team member should create it manually for this issue.

[MelvinBot]

Proposal

Please re-state the problem that we are trying to solve in this issue.

On web, when a video is loading or buffering under slow/intermittent network conditions, the loading spinner (ActivityIndicator) in BaseVideoPlayer disappears prematurely. Instead of showing a consistent loader while the video buffers, the app either shows "No Connection" briefly or shows nothing at all, and the video only plays correctly after exiting and re-entering the view.

What is the root cause of that problem?

There are two compounding issues in BaseVideoPlayer.tsx that cause the loader to disappear under slow/intermittent networks:

1. shouldShowLoadingIndicator excludes the offline case and mid-playback buffering

At BaseVideoPlayer.tsx:128-132:

const shouldShowLoadingIndicator = useMemo(() => {
    return isLoading && (!isPlaying || currentTime <= 0) && !isOffline && !hasError;
}, [currentTime, hasError, isLoading, isOffline, isPlaying]);

• The !isOffline condition means the spinner disappears the instant isOffline becomes true. On slow networks, NetInfo detects offline status when the reachability ping to api/Ping times out (10s threshold), even though the video CDN may still be serving data. This causes the spinner to vanish while the video is still buffering.
• The !isPlaying condition means once a video starts playing (isPlaying=true) and stalls due to a buffer underrun, the spinner will NOT reappear. This is because in the HTML5 video spec, the browser does NOT fire onpause during a buffering stall — playing stays true while the expo-video web player sets status back to 'loading' via onwaiting (VideoPlayer.web.js:367-371). So isLoading=true but isPlaying=true and currentTime > 0, making the condition evaluate to false.

2. The replaceAsync('') effect aggressively kills the video source

At BaseVideoPlayer.tsx:108-113:

useEffect(() => {
    if (!(isOffline && isLoading)) {
        return;
    }
    videoPlayerRef.current.replaceAsync('');
}, [isLoading, isOffline]);

When isOffline flips to true while the video is loading, the source is replaced with an empty string, aborting any in-progress load. The recovery path at lines 99-106 only fires replaceAsync(sourceURL) if currentTime <= 0 && hasError, which may not be satisfied if the empty source replacement doesn't produce an error status from expo-video.

Additionally, shouldShowOfflineIndicator at line 133-135 requires currentTime + bufferedPosition <= 0, so if any data was buffered before the offline flag triggered, neither the offline indicator nor the loading spinner shows — creating a visual dead zone where the user has no feedback at all.

What changes do you think we should make in order to solve the problem?

The fix should be applied in src/components/VideoPlayer/BaseVideoPlayer.tsx:

1. Remove the !isOffline condition from shouldShowLoadingIndicator (or add a secondary condition that shows the spinner when isLoading && isOffline). The loading spinner should remain visible when the video is in a loading status regardless of the offline flag, since the video may still be loading from CDN even when the Expensify API ping fails.

2. Remove or relax the !isPlaying condition for mid-playback buffering stalls. When status === 'loading' (which expo-video sets via onwaiting during buffer stalls), the spinner should show even if the video was previously playing. Consider changing the condition to just isLoading && !hasError — or alternatively, use the playingChange event from expo-video to track isPlaying reactively (currently it's read as a non-reactive snapshot at line 85).

3. Remove or guard the replaceAsync('') effect so it does not destroy the video source during intermittent network conditions. This effect should only fire if the device is confirmed fully offline for a sustained period, not on momentary NetInfo flickers. One approach is to add a debounce or only abort the load when the video has been offline+loading for longer than a threshold (e.g., matching the 10s NetInfo timeout).

What alternative solutions did you explore? (Optional)

An alternative would be to introduce a separate "video-specific" offline detection mechanism that checks CDN reachability rather than relying on the global isOffline flag from useNetwork() (which pings the Expensify API). This would more accurately reflect whether the video can actually load. However, this would be a larger architectural change and the simpler approach above (adjusting the indicator conditions and removing the aggressive source replacement) addresses the core symptoms directly.

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, or @MelvinBot <your feedback> to refine this analysis.

[PiyushChandra17]

🚨 Edited by proposal-police: This proposal was edited at 2026-02-20 08:05:01 UTC.

Proposal

Please re-state the problem that we are trying to solve in this issue.

Web - BaseVideoPlayer - Loader does not appear consistently during slow network

What is the root cause of that problem?

1. We only show LoadingIndicator if shouldShowLoadingIndicator is truthy,

App/src/components/VideoPlayer/BaseVideoPlayer.tsx

Lines 128 to 132 in c835e8d

	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]);

2. Now We want to show the loading indicator when video is loading && paused or (currentTime <= 0) && it should be online and without error (all these conditions are met)

3. We show the you appears to offline via AttachmentOfflineIndicator here

App/src/components/AttachmentOfflineIndicator.tsx

Lines 46 to 51 in c835e8d

	{!isPreview && (
	<View>
	<Text style={[styles.notFoundTextHeader, styles.ph10]}>{translate('common.youAppearToBeOffline')}</Text>
	<Text style={[styles.textAlignCenter, styles.ph11, styles.textSupporting]}>{translate('common.attachmentWillBeAvailableOnceBackOnline')}</Text>
	</View>
	)}

App/src/components/VideoPlayer/BaseVideoPlayer.tsx

Lines 133 to 135 in c835e8d

	const shouldShowOfflineIndicator = useMemo(() => {
	return isOffline && currentTime + bufferedPosition <= 0;
	}, [bufferedPosition, currentTime, isOffline]);

App/src/components/VideoPlayer/BaseVideoPlayer.tsx

Line 517 in c835e8d

{shouldShowOfflineIndicator && <AttachmentOfflineIndicator isPreview={isPreview} />}

What changes do you think we should make in order to solve the problem?

• We need to add one more condition in shouldShowOfflineIndicator - > !isLoading

• We want to show shouldShowOfflineIndicator only when isOffline is true && currentTime + bufferedPosition <= 0 && !isLoading

• Remove the !isOffline check from shouldShowLoadingIndicator

• Updated code:

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. And without errors.
    return isLoading && (!isPlaying || currentTime <= 0) && !hasError;
}, [currentTime, hasError, isLoading, isPlaying]);

const shouldShowOfflineIndicator = useMemo(() => {
    return isOffline && currentTime + bufferedPosition <= 0 && !isLoading;
}, [bufferedPosition, currentTime, isOffline, isLoading]);

This will ensure the loader appears consistently

What alternative solutions did you explore? (Optional)

Result:

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[HiepPP]

Proposal

Please re-state the problem that we are trying to solve in this issue.

The loading spinner in the video player disappears inconsistently during slow or unstable network conditions. When the connection fluctuates, the "No Connection" indicator appears instead of the loading spinner, even though the video is still buffering.

What is the root cause of that problem?

The shouldShowLoadingIndicator logic in BaseVideoPlayer.tsx includes !isOffline as a condition. This causes the loading indicator to vanish whenever the network status reports offline, regardless of whether the video is actively loading. During poor connections, the video can still be buffering while the app reports offline, making this assumption incorrect.

App/src/components/VideoPlayer/BaseVideoPlayer.tsx

Lines 128 to 132 in 637a82c

	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]);

const shouldShowLoadingIndicator = useMemo(() => {
  return (
    isLoading && (!isPlaying || currentTime <= 0) && !isOffline && !hasError
  );
}, [currentTime, hasError, isLoading, isOffline, isPlaying]);

What changes do you think we should make in order to solve the problem?

Modify the indicator display logic in src/components/VideoPlayer/BaseVideoPlayer.tsx:

1. Remove !isOffline from shouldShowLoadingIndicator so the loading indicator shows whenever the video is actively loading, regardless of network status.

2. Add !isLoading to shouldShowOfflineIndicator to prevent both indicators from displaying simultaneously.

App/src/components/VideoPlayer/BaseVideoPlayer.tsx

Lines 128 to 135 in 637a82c

	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]);
	const shouldShowOfflineIndicator = useMemo(() => {
	return isOffline && currentTime + bufferedPosition <= 0;
	}, [bufferedPosition, currentTime, isOffline]);

const shouldShowLoadingIndicator = useMemo(() => {
  // Show loading indicator when video is loading, even on poor connection.
  return isLoading && (!isPlaying || currentTime <= 0) && !hasError;
}, [currentTime, hasError, isLoading, isPlaying]);

const shouldShowOfflineIndicator = useMemo(() => {
  // Show offline indicator only when not actively loading.
  return isOffline && currentTime + bufferedPosition <= 0 && !isLoading;
}, [bufferedPosition, currentTime, isOffline, isLoading]);

This ensures the loading indicator takes priority when the video is buffering, while the offline indicator only appears when no content is buffered and the video is not loading.

What alternative solutions did you explore? (Optional)

Considered debouncing the network state to handle rapid fluctuations, but rejected because:

• Adds complexity
• The proposed fix already prevents simultaneous indicator display
• No flickering was reported in the issue

---

Files Modified:

• src/components/VideoPlayer/BaseVideoPlayer.tsx - Updated loading and offline indicator conditions

Testing Performed:

• TypeScript compilation passes
• Prettier formatting verified
• Lint checks pass (no new warnings introduced)

[mobile84developer-ctrl]

🚫 Duplicated proposal withdrawn by 🤖 ProposalPolice.