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

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

fix loading indicator when the app is loading #56314

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 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
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 @@ -11,9 +11,9 @@
import usePolicy from '@hooks/usePolicy';
import useThemeStyles from '@hooks/useThemeStyles';
import Navigation from '@libs/Navigation/Navigation';
import * as SearchQueryUtils from '@libs/SearchQueryUtils';

Check failure on line 14 in src/components/Navigation/TopBar.tsx

View workflow job for this annotation

GitHub Actions / Changed files ESLint check 

Namespace imports from @libs are not allowed. Use named imports instead. Example: import { method } from "@libs/module"
import SignInButton from '@pages/home/sidebar/SignInButton';
import * as Session from '@userActions/Session';

Check failure on line 16 in src/components/Navigation/TopBar.tsx

View workflow job for this annotation

GitHub Actions / Changed files ESLint check 

Namespace imports from @userActions are not allowed. Use named imports instead. Example: import { action } from "@userActions/module"
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import ROUTES from '@src/ROUTES';
Expand Down Expand Up @@ -43,7 +43,7 @@
const displaySearch = !isAnonymousUser && shouldDisplaySearch;

return (
<View style={styles.w100}>
<View style={styles.topBarWrapper}>
Copy link
Contributor

Choose a reason for hiding this comment

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

I think what I don't understand is... why do we need some kind of wrapper here with margin? Why can't we just use absolute position and have the loading bar just appear directly below the header portion of the LHN? If there is a 12px gap between the header and the first LHN item, we have plenty of space (12px worth) to place a 2px tall loading bar.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

The RCA of the above issue is marginBottom: -1px in the loading indicator. We added this to get it to fit with the border-bottom in the header and then when we scroll down the loading indicator is cut off.

Copy link
Contributor

Choose a reason for hiding this comment

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

But why wouldn't we just make this whole thing use absolute positioning? Maybe I am not understanding how it is implemented... but it seems like absolute position could save us some headaches here with regards to all of this extra margin/spacing considerations we need to make.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Let me check again with this idea.

<View
style={[styles.flexRow, styles.gap4, styles.mh3, styles.mv5, styles.alignItemsCenter, styles.justifyContentBetween]}
dataSet={{dragArea: true}}
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]}>
nkdengineer marked this conversation as resolved.
Show resolved Hide resolved
<OptionsListSkeletonView shouldAnimate />
</View>
)}
Expand Down
6 changes: 6 additions & 0 deletions src/styles/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1661,6 +1661,11 @@ const styles = (theme: ThemeColors) =>
width: variables.sidebarAvatarSize,
},

topBarWrapper: {
...sizing.w100,
marginBottom: 1,
},

selectedAvatarBorder: {
padding: 1,
borderWidth: 2,
Expand Down Expand Up @@ -3753,6 +3758,7 @@ const styles = (theme: ThemeColors) =>
position: 'absolute',
zIndex: variables.searchTopBarZIndex,
backgroundColor: theme.appBG,
paddingTop: 12,
},

threeDotsPopoverOffset: (windowWidth: number) =>
Expand Down
Loading