[HOLD for payment 2021-11-04] Sync indicator get stuck when on a slow internet connection - Reported by: @parasharrajat

[isagoico]

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. Log in to New Expensify
2. Open console tools > Network
3. Set the page as Offline
4. Set the page to Slow 3G

Expected Result:

Sync indicator should spin for a bit and then show the online status.

Actual Result:

Sync indicator gets stuck after a bit.

Workaround:

None needed. Visual issue.

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.8-0

Reproducible in staging?: Yes
Reproducible in production?: Yes

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Grabando.231.mp4

Expensify/Expensify Issue URL:

Issue reported by: @parasharrajat
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1634327555375700

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @thienlnam (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[parasharrajat]

Proposal

1. I remember the main issue that caused the spinner to stop when I implemented this feature. But Recently, we abstracted the spinner animation code to a wrapper which caused it again.

2. On the Web, Animated.loop does not work with useNativeDriver: true. we only need native driver for Native.

So to fix this,
I would suggest creating a useNativeDriver lib which is false on the Web and the use it for animation.

App/src/styles/animation/SpinningIndicatorAnimation.js

Line 26 in c7812ac

useNativeDriver: true,

 Animated.loop(
            Animated.timing(this.rotate, {
                toValue: 1,
                duration: 2000,
                easing: Easing.linear,
                isInteraction: false,
                useNativeDriver: useNativeDriver(),
            }),
        ).start();

[MelvinBot]

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

[adelekennedy]

Created a job in Upwork:
Internal
External