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

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

[nkdengineer]

@shawnborton @dubielzyk-expensify Is this the expected that we want?

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

[shawnborton]

Did we decide to use two different loading bars here?

I thought we wanted to just use one on the LHN, but I could be mistaken. If we did use both, I think it's slightly odd that they are at different spots longitudinally - we could either move the LHN up slightly, or update the content header to always be 80px to match the LHN's header area.

[nkdengineer]

@shawnborton How about the animation of the loading indicator, is that good now?

[shawnborton]

I like how it fades out, but can we also make it fade in?

[nkdengineer]

but can we also make it fade in?

@shawnborton Yes, we can also make fade-in like this video. The timing fade-in/out is 300ms.

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

[shawnborton]

Nice, something like that feels better to me. Let's get clarification on if we're doing just one or two of these on desktop as well. cc @Expensify/design for more thoughts and feedback!

[dannymcclain]

Love the fading. 🙌

I thought we wanted to just use one on the LHN, but I could be mistaken.

This is what we decided: only use one on the LHN. The chat/main content pane would only get it on mobile (where that's the only thing you can see).

on larger screens, display it only on the LHN. and on smaller screens, display it in both the LHN and the content pane.

#46611 (comment) ☝️

[nkdengineer]

Thanks for the confirmation.

@getusha Updated proposal.

[flodnv]

Love it! 👍

[getusha]

Looks good to me as well,
We can proceed with @nkdengineer's proposal
🎀 👀 🎀 C+ Reviewed

[melvin-bot]

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

[blimpich]

Even though this issue got marked as external it seems there wasn't an upwork job got created? Nor did it change the title to include the payment for this issue. @jliexpensify could you make sure that there is an upwork job for this issue, that @getusha and @nkdengineer are assigned to the job, and that it is for $250?

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021836556152855644897

[melvin-bot]

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

[jliexpensify]

Payment Summary

• C: @nkdengineer $250
• C+: @getusha $250 (ND payment)

Upworks job - https://www.upwork.com/jobs/~021836556152855644897