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: Chat - Skeleton placeholder flickers when opening chat with IOU in offline mode #30658

Merged
merged 8 commits into from
Nov 7, 2023
Merged

fix: Chat - Skeleton placeholder flickers when opening chat with IOU in offline mode #30658

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
7fad6ac
Prevent fetching older actions when offline
paultsimura Oct 27, 2023
6c9b3b5
Merge branch 'main' into fix/30503-report-skeleton
paultsimura Oct 31, 2023
5dd8afb
Show skeleton on first render when offline
paultsimura Nov 1, 2023
0799c4f
Revert forced offline olderReportActions skeleton UI
paultsimura Nov 1, 2023
58b9957
Add missing dependencies
paultsimura Nov 1, 2023
fc3095c
Merge branch 'main' into fix/30503-report-skeleton
paultsimura Nov 3, 2023
bbf2217
Merge branch 'main' into fix/30503-report-skeleton
paultsimura Nov 7, 2023
7727150
Use props.network instead of useNetwork
paultsimura Nov 7, 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
14 changes: 8 additions & 6 deletions src/pages/home/report/ReportActionsList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -365,9 +365,10 @@ function ReportActionsList({
const lastReportAction = useMemo(() => _.last(sortedReportActions) || {}, [sortedReportActions]);

const listFooterComponent = useCallback(() => {
// Skip this hook on the first render, as we are not sure if more actions are going to be loaded
// Therefore showing the skeleton on footer might be misleading
if (!hasFooterRendered.current) {
// Skip this hook on the first render (when online), as we are not sure if more actions are going to be loaded,
// Therefore showing the skeleton on footer might be misleading.
// When offline, there should be no second render, so we should show the skeleton if the corresponding loading prop is present
if (!isOffline && !hasFooterRendered.current) {
hasFooterRendered.current = true;
return null;
}
Expand All @@ -380,7 +381,7 @@ function ReportActionsList({
lastReportActionName={lastReportAction.actionName}
/>
);
}, [isLoadingInitialReportActions, isLoadingOlderReportActions, lastReportAction.actionName]);
}, [isLoadingInitialReportActions, isLoadingOlderReportActions, lastReportAction.actionName, isOffline]);

const onLayoutInner = useCallback(
(event) => {
Expand All @@ -390,17 +391,18 @@ function ReportActionsList({
);

const listHeaderComponent = useCallback(() => {
if (!hasHeaderRendered.current) {
if (!isOffline && !hasHeaderRendered.current) {
hasHeaderRendered.current = true;
return null;
}

return (
<ListBoundaryLoader
type={CONST.LIST_COMPONENTS.HEADER}
isLoadingNewerReportActions={isLoadingNewerReportActions}
/>
);
}, [isLoadingNewerReportActions]);
}, [isLoadingNewerReportActions, isOffline]);

return (
<>
Expand Down
4 changes: 2 additions & 2 deletions src/pages/home/report/ReportActionsView.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,8 +177,8 @@ function ReportActionsView(props) {
* displaying.
*/
const loadOlderChats = () => {
// Only fetch more if we are not already fetching so that we don't initiate duplicate requests.
if (props.isLoadingOlderReportActions) {
// Only fetch more if we are neither already fetching (so that we don't initiate duplicate requests) nor offline.
if (props.network.isOffline || props.isLoadingOlderReportActions) {
Copy link
Contributor

Choose a reason for hiding this comment

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

This caused a regression #31367. Previously even if we were offline Report.getOlderActions would be still called and sets isLoadingOlderReportActions to true which in turns show the skeleton view. Now with this early return we prevented the skeleton view from showing up in this case.

return;
}

Expand Down
Loading