[Matt Pay] Avatar online status icon will keep showing syncing icon if user close browser tab when sync icon appears - reported by @K4tsuki

[mvtglobally]

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

---

Action Performed:

1. Open staging.new.expensify.com
2. Turn off and turn on wifi
3. When synching icon appear, close browser tab
4. Go to http://staging.new.expensify.com/ again
5. Avatar online status will keep showing sync icon.

Expected Result:

Avatar online status must display solid green and not syncing icon.

Actual Result:

Avatar online status keep displaying syncing icon even after refreshing the page over and over.

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platform:

Where is this issue occurring?

• Web

Version Number: 1.1.37-0
Reproducible in staging?: Y
Reproducible in production?: Y
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

sync_icon2.mp4

Expensify/Expensify Issue URL:
Issue reported by: @K4tsuki & @adeel0202
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1643735860857629

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @puneetlath (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[K4tsuki]

proposal

The problem is from:

App/src/pages/home/sidebar/SidebarLinks.js

Lines 296 to 297 in 8431ed4

	isSyncingData: {
	key: ONYXKEYS.IS_LOADING_AFTER_RECONNECT,

The syncing indicator is depend on IS_LOADING_AFTER_RECONNECT.
IS_LOADING_AFTER_RECONNECT is set by triggerReconnectionCallbacks. On reconnect to network, set it to true and after all reconnectionCallbacks is finish set it to false:

App/src/libs/NetworkConnection.js

Lines 20 to 25 in 8431ed4

	const triggerReconnectionCallbacks = _.throttle((reason) => {
	Log.info(`[NetworkConnection] Firing reconnection callbacks because ${reason}`);
	Network.setIsLoadingAfterReconnect(true);
	promiseAllSettled(_.map(reconnectionCallbacks, callback => callback()))
	.then(() => Network.setIsLoadingAfterReconnect(false));
	}, 5000, {trailing: false});

When user close the browser/tab before all reconnectionCallbacks is finished, then IS_LOADING_AFTER_RECONNECT value is keep being true.

So, we must not init isSyncData with local data by adding initWithStoredValues: false, in the code below:

App/src/pages/home/sidebar/SidebarLinks.js

Lines 296 to 297 in 8431ed4

	isSyncingData: {
	key: ONYXKEYS.IS_LOADING_AFTER_RECONNECT,

`

[MelvinBot]

Triggered auto assignment to @JmillsExpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[JmillsExpensify]

Upwork job posted here: https://www.upwork.com/jobs/~01e447f8670b3d1f2a

[JmillsExpensify]

Adding the exported label so we can get a review on @K4tsuki's proposal.