[$250] [New feature] Add loading indicator when ReconnectApp is running

[slafortune]

Original post -

Version Number: v1.4.77-11
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers): NA
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL: https://github.com/Expensify/Expensify/issues/350373
Issue reported by: @flodnv
Slack conversation: Original proposal here
: https://expensify.slack.com/archives/C01GTK53T8Q/p1699972596342559

Sometimes, the app is loading something for a little while; as an end user, you have no clue what's happening. Then, when loading finishes, sometimes several seconds later, all of a sudden, new data pops up and takes you by surprise, resulting in a very unpleasant UX that almost feels broken.

Coming from this we've landed on showing the thin bar loader at the top of the screen when ReconnectApp is running.

@dubielzyk-expensify created a CodePen and it's the animation called Rubber Band or #loading1 in code.

My code isn't the best so I'd urge us to optimize it rather than copy paste 😅

Much discussion took place here

Issue Owner

Current Issue Owner: @

Issue Owner

Current Issue Owner: @

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021836556152855644897
• Upwork Job ID: 1836556152855644897
• Last Price Increase: 2024-09-19
• Automatic offers:
• shubham1206agra | Contributor | 104442782

[melvin-bot]

Triggered auto assignment to @jliexpensify (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[melvin-bot]

⚠️ It looks like this issue is labelled as a New Feature but not tied to any GitHub Project. Keep in mind that all new features should be tied to GitHub Projects in order to properly track external CAP software time ⚠️

[melvin-bot]

Triggered auto assignment to Design team member for new feature review - @dubielzyk-expensify (NewFeature)

[getusha]

@slafortune could you assign me here too? thanks :)

[jliexpensify]

Assigned you @getusha

[dubielzyk-expensify]

Excited about this one. Let me know when there's something to look and test 😄

[melvin-bot]

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

[melvin-bot]

Current assignee @getusha is eligible for the External assigner, not assigning anyone new.

[nkdengineer]

Edited by proposal-police: This proposal was edited at 2024-08-06 15:13:28 UTC.

Proposal

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

Add loading indicator when ReconnectApp is running

What is the root cause of that problem?

This is a new feature

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

The test branch is here: https://github.com/nkdengineer/App/tree/fix/46611

About the animation: animation: 1.5s loading-bar .3s cubic-bezier(0.65, 0, 0.35, 1) infinite;

@keyframes loading-bar {
  0% {
    left: 0;
    width: 0;
  }
  50% {
    left: 0;
    width: 100%;
  }
  100% {
    left: 100%;
    width: 0;
  }
}

• Follow the animation in codePen, we will use animation style for left and width.

• infinite can be used as withRepeat, loading-bar can be used as withSequence with three values of left and width

• Delay .3s with withDelay

• cubic-bezier(0.65, 0, 0.35, 1) can be used as Easing.bezier(0.65, 0, 0.35, 1)

1. We can create a ProgressBar component showing a loading indicator as the design above. Here is an example of this. We can refactor the logic and variables in the PR phrase. The implement detail can see in the test branch above

2. When ReconnectApp is called, we have isLoadingReportData in Onyx to know when it's running and it's complete. So we can use this variable to show the ProgressBar while ReconnectApp API is running.

• For ReportScreen get isLoadingReportData using useOnyx and show the ProgressBar below the header view if the screen is the small screen

const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA);
{shouldUseNarrowLayout && <ProgressBar shouldShow={isLoadingReportData}/>}

App/src/pages/home/ReportScreen.tsx

Line 755 in 3666caa

{headerView}

• For LHN, we will show the ProgressBar below the TopBar component if the screen is small screen

const [isLoadingReportData] = useOnyx(ONYXKEYS.IS_LOADING_REPORT_DATA);
{<ProgressBar shouldShow={isLoadingReportData}/>}

App/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.tsx

Lines 56 to 59 in 3666caa

	<TopBar
	breadcrumbLabel={translate('common.inbox')}
	activeWorkspaceID={activeWorkspaceID}
	/>

What alternative solutions did you explore? (Optional)

NA

Result

Screen.Recording.2024-09-05.at.20.16.57.mov

Screen.Recording.2024-09-05.at.20.17.37.mov

[ShridharGoel]

Proposal

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

Add loading indicator when ReconnectApp is running.

What is the root cause of that problem?

New feature.

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

Add isLoadingApp in TopBar:

const [isLoadingApp] = useOnyx(ONYXKEYS.IS_LOADING_APP);

Then, add the animation component at the bottom:

{isLoadingApp && <LoadingAnimation />}

Example code for loading animation:

import React, { useEffect, useRef } from 'react';
import { Animated, View, StyleSheet, Dimensions } from 'react-native';

const { width } = Dimensions.get('window');

const LoadingAnimation= () => {
    const greenAnimation = useRef(new Animated.Value(0)).current;

    useEffect(() => {
        const animate = () => {
            greenAnimation.setValue(0);

            Animated.sequence([
                // Animation from 0 to width
                Animated.timing(greenAnimation, {
                    toValue: width,
                    duration: 2000,
                    useNativeDriver: false,
                }),
                // Animation from width to 0
                Animated.timing(greenAnimation, {
                    toValue: 0,
                    duration: 2000,
                    useNativeDriver: false,
                }),
            ]).start(() => animate());
        };

        animate();
    }, [greenAnimation]);

    const greenWidth = greenAnimation.interpolate({
        inputRange: [0, width],
        outputRange: [width, 0],
    });

    return (
        <View style={styles.container}>
            <Animated.View style={[styles.loadingBar, { width: greenWidth }]} />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        left: 0,
        width: '100%',
        height: 4,
        backgroundColor: 'transparent',
    },
    loadingBar: {
        position: 'absolute',
        height: '100%',
        backgroundColor: 'green',
    },
});

export default LoadingAnimation;

We can improve the animation.

Screen.Recording.2024-08-01.at.2.19.53.PM.mov

Screen.Recording.2024-08-01.at.2.27.54.PM.mov

Note that the exact animation can be created during the PR time.

[ShridharGoel]

Proposal

Updated to include videos.

[dubielzyk-expensify]

Not overdue

[getusha]

The demos attached by both @ShridharGoel & @nkdengineer look way off to me...
Could you guys refer to the codepen provided by @dubielzyk-expensify https://codepen.io/dubielzyk/full/ExBVxVG?

[nkdengineer]

@getusha I updated my proposal with the result as the expected design from codepen and also updated the test branch.

[nkdengineer]

I modified my proposal with the expected.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.58-2 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Feature: add loading indicator when ReconnectApp is running #48772

If no regressions arise, payment will be issued on 2024-11-14. 🎊

For reference, here are some details about the assignees on this issue:

• @getusha requires payment through NewDot Manual Requests
• @nkdengineer requires payment (Needs manual offer from BZ)

[melvin-bot]

BugZero Checklist: The PR adding this new feature has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@getusha] Please propose regression test steps to ensure the new feature will work correctly on production in further releases.
• [@jliexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon.

[srikarparsi]

To leave a quick update, the initial PR caused multiple regressions so a new PR is being worked on.

[srikarparsi]

@nkdengineer do you have an ETA on when the new PR will be ready?

[nkdengineer]

I'm investigating to avoid the previous regression, will give an update today or tomorrow.

[nkdengineer]

@getusha @srikarparsi we have a open follow PR here

[melvin-bot]

This issue has not been updated in over 15 days. @jliexpensify, @srikarparsi, @getusha, @dubielzyk-expensify, @nkdengineer eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[muttmuure]

How close are we with this one? Can we get it out before EoW?

[jliexpensify]

@srikarparsi @getusha @muttmuure - just a heads up that I am OOO from 19th - 29th December. If this needs payment, please feel free to reassign, otherwise I'll review and sort out when I'm back.

[srikarparsi]

How close are we with this one? Can we get it out before EoW?

Hey @muttmuure, we're waiting on deciding if we want the background of the loading indicator to be 1px or 2px tall and we'll make the necessary changes. I think towards the beginning of next week is probably a good estimate to get this merged.

[adhorodyski]

Hey everyone, I just stumbled upon this thread because I wanted to propose the ~same thing for a more native UX.

One question, how does this loading indicator play together with the skeletons on LHN? Ideally, we could get rid of them with this feature introduced. LTM if this should be moved to Slack.

[srikarparsi]

Yeah, slack would be perfect. This was the thread this was originally discussed so that should be a good place :)