Create indicator to show content is syncing

[kadiealexander]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

This project will add a syncing indicator to the User icon in order to show that the app is still refreshing with the most recent information.

You'll use a pre-existing Onyx key to hook into the API loading state (relevant API information here) and display a syncing indicator on the User icon as per the Expected Results below.

Expected Result:

While the app is syncing, the small green availability indicator (AvatarWithIndicator) should grow in size and a small syncing icon should appear:

When the loading is complete, the icon should return to a regular green dot.

Actual Result:

Currently, there is no UI change when the app is syncing.

Action Performed:

1. Install and log into the Expensify.cash mobile app
2. Close the app and wait long enough that new information should need to sync
3. Open the app to observe the behaviour that is occurring while syncing

Platform:

Where is this issue occurring?

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

Version Number: v.1.011
Logs: N/A
Notes/Photos/Videos:
Additional context from original issue: when I open up the mobile app it shows that I'm connected and shows all of the content downloaded locally which is great, but I always know I need to wait a couple seconds because it's in the process of synchronizing down new content. It would be nice if it shows some kind of feedback indicating that it is in the process of actively reconnecting, so I know when I can stop waiting. I'm thinking some kind of animation around the Green Dot, or even just making the Green Dot blink or something. At this point the app is functional and you can click around, but its content is potentially out of date. I wouldn't want to introduce additional seconds into the startup process while waiting to complete synchronization.

Expensify/Expensify Issue URL: https://github.com/Expensify/Expensify/issues/159767

View all open jobs on Upwork

[marcaaron]

We're ready to go here.

[kadiealexander]

Upwork post: https://www.upwork.com/jobs/~0164f5c49a5af1701f

[parasharrajat]

Proposal

1. We will modify the SidebarLinks to Listen on the new ONYX key IS_LOADING_AFTER_RECONNECT here.
   https://github.com/Expensify/Expensify.cash/blob/53acb9ce968a9ea3007302e3debb8b2d9a345ebb/src/pages/home/sidebar/SidebarLinks.js#L177
2. Then we modify the AvatarWithIndicator as following:
   a) Add a new prop isSyncing which will be true based on the ONYX key IS_LOADING_AFTER_RECONNECT.
   b) We now add the new icon whenever isSyncing is true here https://github.com/Expensify/Expensify.cash/blob/53acb9ce968a9ea3007302e3debb8b2d9a345ebb/src/components/AvatarWithIndicator.js#L42.
   to something like

 <View style={StyleSheet.flatten(indicatorStyles)}>
     <Icon src={Gear} />
 </View>

c) we also apply styling to the indicator dot to suffice the design changes.

Questions

1. Do we need to animate the icon?

[MelvinBot]

Triggered auto assignment to @Luke9389 (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[Luke9389]

Hey @parasharrajat, thanks for the proposal. A few quick clarifiers before we get started.

Can you be a bit more specific about how we'll add the icon on line 42? Would we be conditionally rendering the icon vs the view?

I think we could loop @Expensify/design in on whether the icon should be animated. My guess is 'no', but it could be a fun way to make the app a bit 'juicier'. Not sure if that's really our brand direction but I figured I'd mention it.

[parasharrajat]

@Luke9389 We could just drop the Icon inside View.

<View style={StyleSheet.flatten(indicatorStyles)}>
     <Icon src={Gear} />
 </View>

which looks like after changing the styles

I would be updating the styles based on the instructions. The icon is yet to be provided.

[shawnborton]

I think we'd like the icon to spin while the content is syncing. From the mockups, it looks like the green dot would become larger, then a content indicator would spin, and then it would stop when it's finished. Happy to make a Figma prototype of this if that's helpful, too.

[Luke9389]

Ok cool! So @parasharrajat, what would be your take on how to implement the animation?

[parasharrajat]

Yeah so @Luke9389. We can just add something like,

 const rotate = new Animated.Value(0);
    const scale = new Animated.Value(1);
    useEffect(() => {
        Animated.loop(Animated.timing(rotate, {
            toValue: 1,
            duration: 1500,
            easing: Easing.linear,
            useNativeDriver: true,
            isInteraction: false,
        })).start();
        Animated.spring(scale, {
            toValue: 1.5,
            useNativeDriver: true,
            isInteraction: false,
        }).start();
    }, []);
    const indicatorStyles = [
        {
            transform: [{
                rotate: rotate.interpolate({
                    inputRange: [0, 1],
                    outputRange: ['0deg', '360deg'],
                }),
            }, {
                scale,
            }],
        },
        

useEffect is used to just show demo

Replacing View to Animated.View.

[parasharrajat]

@Luke9389 any thoughts?

[Luke9389]

Op, sorry bout that 😅

Ok so just to be clear you're not planning on using useEffect correct? It'd be lifecycle methods instead?

[parasharrajat]

@Luke9389 from my old comment.

useEffect is used to just show demo

I would be converting it to a class component(We don't use hooks in the codebase) and then use the componentDidUpdate to check for syncing prop change and start the animations.

[Luke9389]

Ok cool. Yup, then this looks good! 👍 See ya on the PR!

[parasharrajat]

@shawnborton Could you please share the Sync Icon?

[parasharrajat]

@shawnborton Awaiting your response. We don't have an existing sync icon in the repo. Thanks.

[shawnborton]

Oops, here is the icon you need: sync.svg.zip