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.

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
14 changes: 8 additions & 6 deletions src/pages/home/report/ReportActionsList.js
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
6 changes: 4 additions & 2 deletions src/pages/home/report/ReportActionsView.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import withLocalize, {withLocalizePropTypes} from '@components/withLocalize';
import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
import useCopySelectionHelper from '@hooks/useCopySelectionHelper';
import useInitialValue from '@hooks/useInitialValue';
import useNetwork from '@hooks/useNetwork';
import compose from '@libs/compose';
import getIsReportFullyVisible from '@libs/getIsReportFullyVisible';
import Performance from '@libs/Performance';
Expand Down Expand Up @@ -78,6 +79,7 @@ function ReportActionsView(props) {
const prevNetworkRef = useRef(props.network);
const prevIsSmallScreenWidthRef = useRef(props.isSmallScreenWidth);

const {isOffline} = useNetwork();
const isFocused = useIsFocused();
const reportID = props.report.reportID;

Expand Down Expand Up @@ -149,8 +151,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 (isOffline || props.isLoadingOlderReportActions) {
return;
}

Expand Down
Loading