[HOLD for payment 2024-11-14] [$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

Issue Owner

Current Issue Owner: @jliexpensify

[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.

[jliexpensify]

Removed you @shubham1206agra - sorry about that!

[melvin-bot]

@jliexpensify, @srikarparsi, @getusha, @dubielzyk-expensify, @nkdengineer Huh... This is 4 days overdue. Who can take care of this?

[jliexpensify]

Looks like @srikarparsi has to address a comment in the PR?

[melvin-bot]

@jliexpensify, @srikarparsi, @getusha, @dubielzyk-expensify, @nkdengineer Whoops! This issue is 2 days overdue. Let's get this updated quick!

[jliexpensify]

I think we're now waiting on @getusha

[getusha]

PR in review

[melvin-bot]

@jliexpensify, @srikarparsi, @getusha, @dubielzyk-expensify, @nkdengineer Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

@jliexpensify, @srikarparsi, @getusha, @dubielzyk-expensify, @nkdengineer Still overdue 6 days?! Let's take care of this!

[srikarparsi]

PR in review

[melvin-bot]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[iwiznia]

Seems this PR caused various regressions, see #52112

[nkdengineer]

Noted to check in the next PR.

[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.