Open slafortune opened 1 month ago
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.
:warning: 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 :warning:
Triggered auto assignment to Design team member for new feature review - @dubielzyk-expensify (NewFeature
)
@slafortune could you assign me here too? thanks :)
Assigned you @getusha
Excited about this one. Let me know when there's something to look and test 😄
Unable to auto-create job on Upwork. The BZ team member should create it manually for this issue.
Current assignee @getusha is eligible for the External assigner, not assigning anyone new.
Edited by proposal-police: This proposal was edited at 2024-08-06 15:13:28 UTC.
Add loading indicator when ReconnectApp
is running
This is a new feature
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)
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
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}/>}
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}/>}
NA
https://github.com/user-attachments/assets/c45fda81-5b3b-4e7f-9176-64547e7fdf63
https://github.com/user-attachments/assets/e7986b41-9f54-47ce-b9ad-43ee97502705
Add loading indicator when ReconnectApp is running.
New feature.
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.
https://github.com/user-attachments/assets/6205d25f-0764-4957-84ed-43c457ce4de7
https://github.com/user-attachments/assets/39e0c9f7-b2c1-4f7a-9702-7765cb361f32
Note that the exact animation can be created during the PR time.
Updated to include videos.
Not overdue
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?
@getusha I updated my proposal with the result as the expected design from codepen and also updated the test branch.
I modified my proposal with the expected.
Reviewing @nkdengineer's proposal
@jliexpensify, @getusha, @dubielzyk-expensify Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!
How's the proposal review going?
I will provide an update today
I think it's better than the previous one, @nkdengineer. As you probably noticed, the timing isn't constant on which the width of the bar fills and goes away. https://www.w3schools.com/cssref/tryit.php?filename=trycss_func_cubic-bezier
It's in the demo too:
animation: 1.5s loading-bar .3s cubic-bezier(0.65, 0, 0.35, 1) infinite;
Could you check this and include in your proposal how we will implement the animation effect here?
@getusha Updated proposal with the detail about the animation.
The new result here
https://github.com/user-attachments/assets/19ba2f04-4861-42e0-80ff-6135e7fe4ec1
This is looking great. Minor detail, but can we have it start from a place of empty, then fill? That is, it shouldn't start as fully green.
cc @Expensify/design for visibility
This is looking great. Minor detail, but can we have it start from a place of empty, then fill? That is, it shouldn't start as fully green.
@dubielzyk-expensify Sure, it's expected from my solution. Here is the full result.
https://github.com/user-attachments/assets/0f34d0ba-ed49-4325-a11b-c21fc306ef1f
Coming from https://github.com/Expensify/App/issues/43453 we've landed on showing the thin bar loader at the top of the screen when ReconnectApp is running.
@dubielzyk-expensify sorry for realizing this so late -- why are we not showing the loader on the LHN in large screen mode?
Dang this is feeling pretty darn slick!
sorry for realizing this so late -- why are we not showing the loader on the LHN in large screen mode?
@shawnborton @flodnv @dubielzyk-expensify Good call. You're right that we had decided to initially go with the LHN on large screens. Relevant links:
I'm honestly not sure how much I care re: LHN vs. Content pane, I think both look good. Just noting what we decided on that other issue 🙃
Yeah, I don't feel super strongly but I did initially like just using the LHN to start since it would be consistent everywhere. Does ReconnectApp
really only modify what's in the LHN? Or does it also impact what is seen in the content pane?
Does ReconnectApp really only modify what's in the LHN? Or does it also impact what is seen in the content pane?
It could be both. If it modifies the content pane, it probably also modifies something in the LHN.
I'm honestly not sure how much I care re: LHN vs. Content pane, I think both look good. Just noting what we decided on that other issue 🙃
So this means, on larger screens, display it only on the LHN. and on smaller screens, display it in both the LHN and the content pane. right?
I think that makes the most sense to me.
Hmm I think it could look weird if we have two different loading bars on desktop for the LHN and the content pane. I would rather we just pick one (and I would probably pick LHN?) or make the loading bar one continuous bar that stretches across the LHN and content pane at the same latitude.
Yeah. Now that the proof of concept is out, I'd agree with those two solutions. I think across the whole thing would be the best though, but LHN works too. I guess it's weird to see pulsing of skeleton and the bar in the same area
Not overdue
@nkdengineer Instead of the bar suddenly disappearing, can we make it slide away? I think it would be better to render it all the time with a transparent background as well to avoid layout shift. WDYT @flodnv?
I think it would be better to render it all the time with a transparent background as well to avoid layout shift
@getusha If we display a transparent background after the API is complete, doesn't it suddenly disappearing?
We also want it to start from an empty place. So I think it's good to mount this component when the ReconnectApp
API is in progress.
This is looking great. Minor detail, but can we have it start from a place of empty, then fill? That is, it shouldn't start as fully green.
@getusha If we display a transparent background after the API is complete, doesn't it suddenly disappearing?
I don't understand your question @nkdengineer, it will stay with a transparent background and we will just animate the green bar as needed.
@getusha As my proposal we have a wrap view and the animated view (green line), do you mean we will always display the wrap view and only display the animated view when we need, right?
@getusha As my proposal we have a wrap view and the animated view (green line), do you mean we will always display the wrap view and only display the animated view when we need, right?
@nkdengineer Yes, so when the ReconnectApp
call ends, we will simply slide the green line away so it won't appear to be sudden.
@getusha Got it, I updated my test branch and proposal. The new result:
https://github.com/user-attachments/assets/cf26c464-ce0c-4e3d-bf9c-3dc701ed70dc
when the ReconnectApp call ends, we will simply slide the green line away so it won't appear to be sudden.
@nkdengineer can we also make sure the green bar slides away (set the width/left value with animation) instead of suddenly disappearing?
@getusha Is this the expected behavior that we want?
https://github.com/user-attachments/assets/f0f364f8-1e55-43da-97dd-c641d7353943
Hmm it looks like there is a permanent 2px border now under the header area, which I don't think we want.
We could match the background? Otherwise it will appear jumpy when it gets mounted and removed. Not sure but could also shift the layout for a moment, which wouldn’t look ideal.
On Mon, 26 Aug 2024 at 2:23 PM Shawn Borton @.***> wrote:
Hmm it looks like there is a permanent 2px border now under the header area, which I don't think we want.
— Reply to this email directly, view it on GitHub https://github.com/Expensify/App/issues/46611#issuecomment-2309971094, or unsubscribe https://github.com/notifications/unsubscribe-auth/AR4OEVYENBSUNFOECICCJATZTMF3FAVCNFSM6AAAAABLZH7ZSGVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMBZHE3TCMBZGQ . You are receiving this because you were mentioned.Message ID: @.***>
I think it should be absolutely positioned so it doesn't bump the content at all.
I think it should be absolutely positioned so it doesn't bump the content at all.
100% agree.
I think it should be absolutely positioned so it doesn't bump the content at all.
That makes perfect sense!
@shawnborton @dubielzyk-expensify do you think the way we hide the bar matters? (i.e. adding a transition out/slide out instead of just disappearing suddenly?)
I think adding some kind of transition would be nice, whether it slides down from the top, or fades in, or something.
Agree with you all about making it so the bar doesn't make the UI bump. Whether that's absolutely positioning it or using a transparent border as a placeholder, I don't have strong feelings. I just don't want a jumpy UI haha.
As for the way we hide it, I think a decently quick fade would be nice, because we don't really know at what point in its "bounce" it's going to go away, right?
Agree with a pretty quick fade would look good here.
Original post -
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.
Much discussion took place here
Issue Owner
Current Issue Owner: @