From 4fbfc4fd2a97cd2dcc1b13ed99de3def15d6b767 Mon Sep 17 00:00:00 2001 From: Hubert Sosinski Date: Fri, 6 Mar 2026 12:32:57 +0100 Subject: [PATCH 1/3] add reasonAttributes to OptionsListSkeletonView usages --- src/components/Search/SearchAutocompleteList.tsx | 8 ++++++++ .../SelectionList/BaseSelectionList.tsx | 15 ++++++++++++++- .../BaseSelectionListWithSections.tsx | 7 ++++++- .../BaseSelectionListWithSections.tsx | 7 +++++++ src/components/SelectionListWithSections/types.ts | 2 ++ src/pages/inbox/sidebar/SidebarLinks.tsx | 11 ++++++++++- 6 files changed, 47 insertions(+), 3 deletions(-) diff --git a/src/components/Search/SearchAutocompleteList.tsx b/src/components/Search/SearchAutocompleteList.tsx index 2deeb3c2f7107..0957baf2a5be0 100644 --- a/src/components/Search/SearchAutocompleteList.tsx +++ b/src/components/Search/SearchAutocompleteList.tsx @@ -31,6 +31,7 @@ import {getReportOrDraftReport} from '@libs/ReportUtils'; import {buildSearchQueryJSON, buildUserReadableQueryString, getQueryWithoutFilters, shouldHighlight} from '@libs/SearchQueryUtils'; import StringUtils from '@libs/StringUtils'; import {cancelSpan, endSpan, getSpan, startSpan} from '@libs/telemetry/activeSpans'; +import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import type {CardFeeds, CardList, PersonalDetailsList, Policy, Report} from '@src/types/onyx'; @@ -449,12 +450,19 @@ function SearchAutocompleteList({ const isLoading = !isRecentSearchesDataLoaded || !areOptionsInitialized; + const reasonAttributes: SkeletonSpanReasonAttributes = { + context: 'SearchAutocompleteList', + isRecentSearchesDataLoaded, + areOptionsInitialized, + }; + if (isLoading) { return ( ); } diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index 95acfa1ebe94b..404101fa28d63 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -17,6 +17,7 @@ import useScrollEnabled from '@hooks/useScrollEnabled'; import useSingleExecution from '@hooks/useSingleExecution'; import {focusedItemRef} from '@hooks/useSyncFocus/useSyncFocusImplementation'; import useThemeStyles from '@hooks/useThemeStyles'; +import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; import CONST from '@src/CONST'; import getEmptyArray from '@src/types/utils/getEmptyArray'; import Footer from './components/Footer'; @@ -366,7 +367,19 @@ function BaseSelectionList({ const renderListEmptyContent = () => { if (shouldShowLoadingPlaceholder) { - return customLoadingPlaceholder ?? ; + const reasonAttributes: SkeletonSpanReasonAttributes = { + context: 'BaseSelectionList', + shouldShowLoadingPlaceholder, + shouldUseUserSkeletonView, + }; + return ( + customLoadingPlaceholder ?? ( + + ) + ); } if (shouldShowListEmptyContent) { return listEmptyContent; diff --git a/src/components/SelectionList/SelectionListWithSections/BaseSelectionListWithSections.tsx b/src/components/SelectionList/SelectionListWithSections/BaseSelectionListWithSections.tsx index 064f258f42a6e..545c43c2f0cf6 100644 --- a/src/components/SelectionList/SelectionListWithSections/BaseSelectionListWithSections.tsx +++ b/src/components/SelectionList/SelectionListWithSections/BaseSelectionListWithSections.tsx @@ -27,6 +27,7 @@ import useSingleExecution from '@hooks/useSingleExecution'; import {focusedItemRef} from '@hooks/useSyncFocus/useSyncFocusImplementation'; import useThemeStyles from '@hooks/useThemeStyles'; import Log from '@libs/Log'; +import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; import CONST from '@src/CONST'; import type {FlattenedItem, ListItem, SelectionListWithSectionsProps} from './types'; @@ -282,7 +283,11 @@ function BaseSelectionListWithSections({ const renderListEmptyContent = () => { if (shouldShowLoadingPlaceholder) { - return ; + const reasonAttributes: SkeletonSpanReasonAttributes = { + context: 'BaseSelectionListWithSections', + shouldShowLoadingPlaceholder, + }; + return ; } if (shouldShowListEmptyContent) { return listEmptyContent; diff --git a/src/components/SelectionListWithSections/BaseSelectionListWithSections.tsx b/src/components/SelectionListWithSections/BaseSelectionListWithSections.tsx index 57b3d60dd181c..9b90b4a4d12c4 100644 --- a/src/components/SelectionListWithSections/BaseSelectionListWithSections.tsx +++ b/src/components/SelectionListWithSections/BaseSelectionListWithSections.tsx @@ -25,6 +25,7 @@ import {focusedItemRef} from '@hooks/useSyncFocus/useSyncFocusImplementation'; import useThemeStyles from '@hooks/useThemeStyles'; import getSectionsWithIndexOffset from '@libs/getSectionsWithIndexOffset'; import Log from '@libs/Log'; +import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import {isEmptyObject} from '@src/types/utils/EmptyObject'; @@ -717,11 +718,17 @@ function BaseSelectionListWithSections({ const renderListEmptyContent = () => { if (shouldShowLoadingPlaceholder) { + const reasonAttributes: SkeletonSpanReasonAttributes = { + context: 'BaseSelectionListWithSections', + shouldShowLoadingPlaceholder, + shouldUseUserSkeletonView, + }; return ( ); } diff --git a/src/components/SelectionListWithSections/types.ts b/src/components/SelectionListWithSections/types.ts index 74ca2c9c30e85..0ac026b0ed195 100644 --- a/src/components/SelectionListWithSections/types.ts +++ b/src/components/SelectionListWithSections/types.ts @@ -20,6 +20,7 @@ import type {AnimatedStyle} from 'react-native-reanimated'; import type {SearchRouterItem} from '@components/Search/SearchAutocompleteList'; import type {SearchColumnType, SearchGroupBy, SearchQueryJSON} from '@components/Search/types'; import type {ForwardedFSClassProps} from '@libs/Fullstory/types'; +import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; import type {BrickRoad} from '@libs/WorkspacesSettingsUtils'; import type UnreportedExpenseListItem from '@pages/UnreportedExpenseListItem'; // eslint-disable-next-line no-restricted-imports @@ -801,6 +802,7 @@ type LoadingPlaceholderComponentProps = { shouldStyleAsTable?: boolean; fixedNumItems?: number; speed?: number; + reasonAttributes?: SkeletonSpanReasonAttributes; }; type SectionWithIndexOffset = Section & { diff --git a/src/pages/inbox/sidebar/SidebarLinks.tsx b/src/pages/inbox/sidebar/SidebarLinks.tsx index f4e1249cb4c82..bffead80becd1 100644 --- a/src/pages/inbox/sidebar/SidebarLinks.tsx +++ b/src/pages/inbox/sidebar/SidebarLinks.tsx @@ -12,6 +12,7 @@ import useThemeStyles from '@hooks/useThemeStyles'; import {setSidebarLoaded} from '@libs/actions/App'; import Navigation from '@libs/Navigation/Navigation'; import {cancelSpan} from '@libs/telemetry/activeSpans'; +import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; import * as ReportActionContextMenu from '@pages/inbox/report/ContextMenu/ReportActionContextMenu'; import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; @@ -76,6 +77,11 @@ function SidebarLinks({insets, optionListItems, isLoading, priorityMode = CONST. const viewMode = priorityMode === CONST.PRIORITY_MODE.GSD ? CONST.OPTION_MODE.COMPACT : CONST.OPTION_MODE.DEFAULT; + const sidebarSkeletonReasonAttributes: SkeletonSpanReasonAttributes = { + context: 'SidebarLinks', + isLoading: !!isLoading, + }; + // eslint-disable-next-line react-hooks/exhaustive-deps const contentContainerStyles = useMemo(() => StyleSheet.flatten([styles.pt2, {paddingBottom: StyleUtils.getSafeAreaMargins(insets).marginBottom}]), [insets]); @@ -93,7 +99,10 @@ function SidebarLinks({insets, optionListItems, isLoading, priorityMode = CONST. /> {!!isLoading && optionListItems?.length === 0 && ( - + )} From 071b7eea76ba9bab5a3d7072c7f9615ee84d2258 Mon Sep 17 00:00:00 2001 From: Hubert Sosinski Date: Wed, 11 Mar 2026 11:25:46 +0100 Subject: [PATCH 2/3] typecheck fix --- src/pages/inbox/sidebar/SidebarLinks.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/pages/inbox/sidebar/SidebarLinks.tsx b/src/pages/inbox/sidebar/SidebarLinks.tsx index cdaabec657a65..7bcf9793a89d2 100644 --- a/src/pages/inbox/sidebar/SidebarLinks.tsx +++ b/src/pages/inbox/sidebar/SidebarLinks.tsx @@ -79,7 +79,9 @@ function SidebarLinks({insets, optionListItems, priorityMode = CONST.PRIORITY_MO const sidebarSkeletonReasonAttributes: SkeletonSpanReasonAttributes = { context: 'SidebarLinks', - isLoading: !!isLoading, + isLoadingReportData, + optionListItemsCount: optionListItems?.length + }; // eslint-disable-next-line react-hooks/exhaustive-deps @@ -97,7 +99,7 @@ function SidebarLinks({insets, optionListItems, priorityMode = CONST.PRIORITY_MO optionMode={viewMode} onFirstItemRendered={setSidebarLoaded} /> - {!!isLoadingReportData && optionListItems?.length === 0 && ( + {isLoadingReportData && optionListItems?.length === 0 && ( Date: Wed, 11 Mar 2026 11:28:49 +0100 Subject: [PATCH 3/3] typecheck fix --- src/pages/inbox/sidebar/SidebarLinks.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/pages/inbox/sidebar/SidebarLinks.tsx b/src/pages/inbox/sidebar/SidebarLinks.tsx index 7bcf9793a89d2..4c1bdc22ff6be 100644 --- a/src/pages/inbox/sidebar/SidebarLinks.tsx +++ b/src/pages/inbox/sidebar/SidebarLinks.tsx @@ -80,8 +80,7 @@ function SidebarLinks({insets, optionListItems, priorityMode = CONST.PRIORITY_MO const sidebarSkeletonReasonAttributes: SkeletonSpanReasonAttributes = { context: 'SidebarLinks', isLoadingReportData, - optionListItemsCount: optionListItems?.length - + optionListItemsCount: optionListItems?.length, }; // eslint-disable-next-line react-hooks/exhaustive-deps