Skip to content

Add ReportHeaderSkeletonView to ReportScreen #30367

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

Merged
hayata-suenaga merged 13 commits into from
Nov 17, 2023
Merged

Add ReportHeaderSkeletonView to ReportScreen #30367

Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
59b7e17
add ReportHeaderSkeletonView to ReportScreen
adamgrzybowski Oct 25, 2023
4e59669
Merge branch 'main' into @swm/fix-report-header-skeleton-view
adamgrzybowski Oct 30, 2023
ac217d0
add isLoading to condition for skeleton header
adamgrzybowski Oct 30, 2023
f2af3c3
Merge branch 'main' into @swm/fix-report-header-skeleton-view
WojtekBoman Nov 8, 2023
3df60a1
Merge branch 'main' into @swm/fix-report-header-skeleton-view
WojtekBoman Nov 13, 2023
c4219a3
Add isLoading to HeaderView
WojtekBoman Nov 13, 2023
e82fd1b
Refactor isLoading in HeaderView
WojtekBoman Nov 16, 2023
84ea486
Lint fixes
WojtekBoman Nov 16, 2023
df17568
Fix showing a back button when header is loading
WojtekBoman Nov 16, 2023
f5a7217
Merge branch 'main' into @swm/fix-report-header-skeleton-view
WojtekBoman Nov 16, 2023
0a3e85b
Merge branch 'main' into @swm/fix-report-header-skeleton-view
WojtekBoman Nov 16, 2023
3886c84
Refactor ReportHeaderSkeletonView
WojtekBoman Nov 16, 2023
175aa5c
Fix HeaderView styles
WojtekBoman Nov 17, 2023
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
165 changes: 86 additions & 79 deletions src/pages/home/HeaderView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import MultipleAvatars from '@components/MultipleAvatars';
import ParentNavigationSubtitle from '@components/ParentNavigationSubtitle';
import participantPropTypes from '@components/participantPropTypes';
import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
import ReportHeaderSkeletonView from '@components/ReportHeaderSkeletonView';
import SubscriptAvatar from '@components/SubscriptAvatar';
import TaskHeaderActionButton from '@components/TaskHeaderActionButton';
import Text from '@components/Text';
Expand Down Expand Up @@ -175,96 +176,102 @@ function HeaderView(props) {
const shouldShowBorderBottom = !isTaskReport || !props.isSmallScreenWidth;
const shouldDisableDetailPage = ReportUtils.shouldDisableDetailPage(props.report);

const isLoading = !props.report || !title;

@s77rt s77rt Feb 2, 2024

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

We should have checked for report id as well since the report id is used in ReportScreen. Not doing so made the report content show a skeleton view while the header not.

Another reason is that when a user leave a thread we will only clear the report id. We should show the skeleton view in this case. Otherwise the header will show unwanted UI components (Coming from #34820)


return (
<View
style={[styles.appContentHeader, shouldShowBorderBottom && styles.borderBottom]}
dataSet={{dragArea: true}}
>
<View style={[styles.appContentHeaderTitle, !props.isSmallScreenWidth && styles.pl5]}>
{props.isSmallScreenWidth && (
<PressableWithoutFeedback
onPress={props.onNavigationMenuButtonClicked}
style={[styles.LHNToggle]}
accessibilityHint={props.translate('accessibilityHints.navigateToChatsList')}
accessibilityLabel={props.translate('common.back')}
role={CONST.ACCESSIBILITY_ROLE.BUTTON}
>
<Tooltip
text={props.translate('common.back')}
shiftVertical={4}
>
<View>
<Icon src={Expensicons.BackArrow} />
</View>
</Tooltip>
</PressableWithoutFeedback>
)}
{Boolean(props.report && title) && (
<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
<PressableWithoutFeedback
onPress={() => ReportUtils.navigateToDetailsPage(props.report)}
style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}
disabled={shouldDisableDetailPage}
accessibilityLabel={title}
role={CONST.ACCESSIBILITY_ROLE.BUTTON}
>
{shouldShowSubscript ? (
<SubscriptAvatar
mainAvatar={icons[0]}
secondaryAvatar={icons[1]}
size={defaultSubscriptSize}
/>
) : (
<MultipleAvatars
icons={icons}
shouldShowTooltip={!isChatRoom || isChatThread}
/>
)}
<View style={[styles.flex1, styles.flexColumn]}>
<DisplayNames
fullTitle={title}
displayNamesWithTooltips={displayNamesWithTooltips}
tooltipEnabled
numberOfLines={1}
textStyles={[styles.headerText, styles.pre]}
shouldUseFullTitle={isChatRoom || isPolicyExpenseChat || isChatThread || isTaskReport}
/>
{!_.isEmpty(parentNavigationSubtitleData) && (
<ParentNavigationSubtitle
parentNavigationSubtitleData={parentNavigationSubtitleData}
parentReportID={props.report.parentReportID}
pressableStyles={[styles.alignSelfStart, styles.mw100]}
<View style={[styles.appContentHeaderTitle, !props.isSmallScreenWidth && !isLoading && styles.pl5]}>
{isLoading ? (
<ReportHeaderSkeletonView />
) : (
<>
{props.isSmallScreenWidth && (
<PressableWithoutFeedback
onPress={props.onNavigationMenuButtonClicked}
style={[styles.LHNToggle]}
accessibilityHint={props.translate('accessibilityHints.navigateToChatsList')}
accessibilityLabel={props.translate('common.back')}
role={CONST.ACCESSIBILITY_ROLE.BUTTON}
>
<Tooltip
text={props.translate('common.back')}
shiftVertical={4}
>
<View>
<Icon src={Expensicons.BackArrow} />
</View>
</Tooltip>
</PressableWithoutFeedback>
)}
<View style={[styles.flex1, styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween]}>
<PressableWithoutFeedback
onPress={() => ReportUtils.navigateToDetailsPage(props.report)}
style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}
disabled={shouldDisableDetailPage}
accessibilityLabel={title}
role={CONST.ACCESSIBILITY_ROLE.BUTTON}
>
{shouldShowSubscript ? (
<SubscriptAvatar
mainAvatar={icons[0]}
secondaryAvatar={icons[1]}
size={defaultSubscriptSize}
/>
) : (
<MultipleAvatars
icons={icons}
shouldShowTooltip={!isChatRoom || isChatThread}
/>
)}
{!_.isEmpty(subtitle) && (
<Text
style={[styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting]}
<View style={[styles.flex1, styles.flexColumn]}>
<DisplayNames
fullTitle={title}
displayNamesWithTooltips={displayNamesWithTooltips}
tooltipEnabled
numberOfLines={1}
>
{subtitle}
</Text>
)}
</View>
{brickRoadIndicator === CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR && (
<View style={[styles.alignItemsCenter, styles.justifyContentCenter]}>
<Icon
src={Expensicons.DotIndicator}
fill={theme.danger}
textStyles={[styles.headerText, styles.pre]}
shouldUseFullTitle={isChatRoom || isPolicyExpenseChat || isChatThread || isTaskReport}
/>
{!_.isEmpty(parentNavigationSubtitleData) && (
<ParentNavigationSubtitle
parentNavigationSubtitleData={parentNavigationSubtitleData}
parentReportID={props.report.parentReportID}
pressableStyles={[styles.alignSelfStart, styles.mw100]}
/>
)}
{!_.isEmpty(subtitle) && (
<Text
style={[styles.sidebarLinkText, styles.optionAlternateText, styles.textLabelSupporting]}
numberOfLines={1}
>
{subtitle}
</Text>
)}
</View>
)}
</PressableWithoutFeedback>
<View style={[styles.reportOptions, styles.flexRow, styles.alignItemsCenter]}>
{isTaskReport && !props.isSmallScreenWidth && ReportUtils.isOpenTaskReport(props.report) && <TaskHeaderActionButton report={props.report} />}
{shouldShowThreeDotsButton && (
<ThreeDotsMenu
anchorPosition={styles.threeDotsPopoverOffset(props.windowWidth)}
menuItems={threeDotMenuItems}
shouldSetModalVisibility={false}
/>
)}
{brickRoadIndicator === CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR && (
<View style={[styles.alignItemsCenter, styles.justifyContentCenter]}>
<Icon
src={Expensicons.DotIndicator}
fill={theme.danger}
/>
</View>
)}
</PressableWithoutFeedback>
<View style={[styles.reportOptions, styles.flexRow, styles.alignItemsCenter]}>
{isTaskReport && !props.isSmallScreenWidth && ReportUtils.isOpenTaskReport(props.report) && <TaskHeaderActionButton report={props.report} />}
{shouldShowThreeDotsButton && (
<ThreeDotsMenu
anchorPosition={styles.threeDotsPopoverOffset(props.windowWidth)}
menuItems={threeDotMenuItems}
shouldSetModalVisibility={false}
/>
)}
</View>
</View>
</View>
</>
)}
</View>
</View>
Expand Down