Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix loading indicator when the app is loading #56314

Merged
merged 30 commits into from
Mar 5, 2025
Merged

fix loading indicator when the app is loading #56314

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
30 commits
Select commit Hold shift + click to select a range
3048d37
fix loading indicator when the app is loading
nkdengineer Feb 4, 2025
d430a4a
fix lint
nkdengineer Feb 4, 2025
9a04216
Merge branch 'main' into fix/55842
nkdengineer Feb 6, 2025
17f51a3
Merge branch 'main' into fix/55842
nkdengineer Feb 7, 2025
04dc31f
Merge branch 'main' into fix/55842
nkdengineer Feb 10, 2025
1118aa6
add padding top for search top bar wrapper
nkdengineer Feb 10, 2025
bf265ab
Merge branch 'main' into fix/55842
nkdengineer Feb 14, 2025
2e38961
fix loading thin while scrolling
nkdengineer Feb 14, 2025
03ca37b
fix lint error
nkdengineer Feb 14, 2025
80e7b6f
Merge branch 'main' into fix/55842
nkdengineer Feb 16, 2025
4289617
use absolute style
nkdengineer Feb 16, 2025
27ca1fd
Merge branch 'main' into fix/55842
nkdengineer Feb 17, 2025
9097e7f
Merge branch 'main' into fix/55842
nkdengineer Feb 18, 2025
8e2ddba
add zIndex for TopBar
nkdengineer Feb 18, 2025
15fdd11
Merge branch 'main' into fix/55842
nkdengineer Feb 18, 2025
b9b4852
remove padding if scrolling in Reports
nkdengineer Feb 18, 2025
181d081
remove log
nkdengineer Feb 18, 2025
584d56a
replace with variable
nkdengineer Feb 18, 2025
c7be3bd
merge main
nkdengineer Feb 19, 2025
1cf8145
remove hardcode
nkdengineer Feb 19, 2025
a7ad6ed
remove log
nkdengineer Feb 19, 2025
32e5e85
merge main
nkdengineer Feb 20, 2025
1886298
update correct topbar minimal offset
nkdengineer Feb 20, 2025
f963599
Merge branch 'main' into fix/55842
nkdengineer Feb 20, 2025
90391f3
merge main
nkdengineer Feb 22, 2025
7401b9d
Merge branch 'main' into fix/55842
nkdengineer Feb 26, 2025
7ad6120
Merge branch 'main' into fix/55842
nkdengineer Feb 27, 2025
d109fc1
fix the empty view is cut off
nkdengineer Feb 27, 2025
833bca5
Merge branch 'main' into fix/55842
nkdengineer Feb 28, 2025
5ddd049
Merge branch 'main' into fix/55842
nkdengineer Mar 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/components/Navigation/TopBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ function TopBar({breadcrumbLabel, activeWorkspaceID, shouldDisplaySearch = true,
const displaySearch = !isAnonymousUser && shouldDisplaySearch;

return (
<View style={styles.w100}>
<View style={[styles.w100, styles.zIndex10]}>
<View
style={[styles.flexRow, styles.gap4, styles.mh5, styles.mv5, styles.alignItemsCenter, styles.justifyContentBetween]}
dataSet={{dragArea: true}}
Expand Down
1 change: 1 addition & 0 deletions src/pages/Search/SearchPageNarrow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ function SearchPageNarrow({queryJSON, policyID, searchName, shouldGroupByReports
const currentOffset = contentOffset.y;
const isScrollingDown = currentOffset > scrollOffset.get();
const distanceScrolled = currentOffset - scrollOffset.get();

if (isScrollingDown && contentOffset.y > TOO_CLOSE_TO_TOP_DISTANCE) {
topBarOffset.set(clamp(topBarOffset.get() - distanceScrolled, variables.minimalTopBarOffset, StyleUtils.searchHeaderDefaultOffset));
} else if (!isScrollingDown && distanceScrolled < 0 && contentOffset.y + layoutMeasurement.height < contentSize.height - TOO_CLOSE_TO_BOTTOM_DISTANCE) {
Expand Down
8 changes: 4 additions & 4 deletions src/pages/home/sidebar/SidebarLinks.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ import useLocalize from '@hooks/useLocalize';
import useResponsiveLayout from '@hooks/useResponsiveLayout';
import useStyleUtils from '@hooks/useStyleUtils';
import useThemeStyles from '@hooks/useThemeStyles';
import {confirmReadyToOpenApp, setSidebarLoaded} from '@libs/actions/App';
import Navigation from '@libs/Navigation/Navigation';
import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
import * as App from '@userActions/App';
import CONST from '@src/CONST';
import ROUTES from '@src/ROUTES';
import type {Report} from '@src/types/onyx';
Expand Down Expand Up @@ -44,7 +44,7 @@ function SidebarLinks({insets, optionListItems, isLoading, priorityMode = CONST.
const {shouldUseNarrowLayout} = useResponsiveLayout();

useEffect(() => {
App.confirmReadyToOpenApp();
confirmReadyToOpenApp();
}, []);

useEffect(() => {
Expand Down Expand Up @@ -91,10 +91,10 @@ function SidebarLinks({insets, optionListItems, isLoading, priorityMode = CONST.
onSelectRow={showReportPage}
shouldDisableFocusOptions={shouldUseNarrowLayout}
optionMode={viewMode}
onFirstItemRendered={App.setSidebarLoaded}
onFirstItemRendered={setSidebarLoaded}
/>
{!!isLoading && optionListItems?.length === 0 && (
<View style={[StyleSheet.absoluteFillObject, styles.appBG]}>
<View style={[StyleSheet.absoluteFillObject, styles.appBG, styles.mt3]}>
<OptionsListSkeletonView shouldAnimate />
</View>
)}
Expand Down
5 changes: 3 additions & 2 deletions src/styles/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3743,7 +3743,7 @@ const styles = (theme: ThemeColors) =>
},

narrowSearchHeaderStyle: {
paddingTop: 1,
paddingTop: 12,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure why we adjusted this but it's causing this:

Screen.Recording.2025-02-21.at.10.59.16.at.night.mov

Screenshot 2025-02-21 at 11 04 14 at night

Component appears to be cut off.

This is before:

Screenshot 2025-02-21 at 11 05 39 at night

Screenshot 2025-02-21 at 11 06 04 at night

cc @shawnborton if this is something we'd want to fix.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@getusha What is the bug here, the empty state component is scrollable, and when the height is not enough, it will appear like this. Without this padding, you can also see the cut off in the device with small height.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catches on all of that, we want to fix these things for sure.

For the new search input on desktop, maybe we can put the loading bar underneath it in the gap between the search input and the tabs?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Or actually I'd be curious to see it at the very very top of the view even, on the top edge of the screen. Let's see what @Expensify/design thinks about that one since we don't have a standard page header on this particular page.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd definitely be down to see it at the very top.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I could have sworn we were showing it there for Reports/Search previously though? Otherwise yeah, we only show it in the MCP (lol) on mobile when a chat is loading I think...

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I feel like we've gone around a few places here, but I like the video above where it shows only in LHN area 👍

I see what you wanted with the top there Shawn, but I feel like I'd rather then explore one of the first explorations I did where it was always at the top. But then again, I think that's just a completely different thing. Would prefer it to stay in a consistent place as much as possible

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Totally agree, I think keeping the loading bar in the LHN for reports makes sense and I love that it translates well to mobile placement too.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I love that it translates well to mobile placement too.

@shawnborton It's worked well, see this comment #56314 (comment).

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agree! Let's start final reviewing this one cc @getusha

backgroundColor: theme.appBG,
flex: 1,
},
Expand Down Expand Up @@ -5415,7 +5415,8 @@ const styles = (theme: ThemeColors) =>
width: '100%',
backgroundColor: theme.transparent,
overflow: 'hidden',
marginBottom: -1,
position: 'absolute',
bottom: -1,
},

progressBar: {
Expand Down
4 changes: 2 additions & 2 deletions src/styles/variables.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -274,9 +274,9 @@ export default {
inlineImagePreviewMinSize: 64,
inlineImagePreviewMaxSize: 148,

minimalTopBarOffset: -106,
minimalTopBarOffset: -124,
searchHeaderDefaultOffset: 0,
searchListContentMarginTop: 116,
searchListContentMarginTop: 124,
searchTopBarZIndex: 9,
searchTopBarHeight: 52,
searchRouterInputMargin: 52,
Expand Down