diff --git a/src/components/Table/TableRow.tsx b/src/components/Table/TableRow.tsx index ef5b75a212f4..f29be997e877 100644 --- a/src/components/Table/TableRow.tsx +++ b/src/components/Table/TableRow.tsx @@ -8,14 +8,11 @@ import type {OfflineWithFeedbackProps} from '@components/OfflineWithFeedback'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; import type {PressableWithFeedbackProps} from '@components/Pressable/PressableWithFeedback'; import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; -import SkeletonViewContentLoader from '@components/SkeletonViewContentLoader'; import useAnimatedHighlightStyle from '@hooks/useAnimatedHighlightStyle'; import useLocalize from '@hooks/useLocalize'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; -import useSkeletonSpan from '@libs/telemetry/useSkeletonSpan'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import {useTableContext} from './TableContext'; @@ -33,15 +30,6 @@ type TableRowProps = Omit & { /** The index of the row in the table */ rowIndex: number; - /** Whether or not the table row is loading */ - isLoading?: boolean; - - /** The loading component to render within the table row when the row is loading */ - LoadingComponent?: React.ComponentType; - - /** The reason attributes if the table row is loading */ - skeletonReasonAttributes: SkeletonSpanReasonAttributes; - /** Attributes for when the client is offline and there is an error related to the table row */ offlineWithFeedback?: OfflineWithFeedbackProps; @@ -59,17 +47,12 @@ export default function TableRow({ disabled, sentryLabel, interactive, - isLoading, - skeletonReasonAttributes, - LoadingComponent, onPress, offlineWithFeedback, checkboxReplacementElement, rowFooter, ...props }: TableRowProps) { - useSkeletonSpan('TableRowSkeleton', skeletonReasonAttributes); - const theme = useTheme(); const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -79,12 +62,13 @@ export default function TableRow({ const item = processedData.at(rowIndex); const rowCount = processedData.length; - const isFirstRow = rowIndex === 0; - const isLastRow = rowIndex === rowCount - 1; - const isDisabled = !!disabled || !!isLoading; const gridTemplateColumns = columns.map((column) => (column.width ? `${column.width}px` : '1fr')); const isSelectionCheckboxVisible = selectionEnabled && (isMobileSelectionEnabled || !shouldUseNarrowLayout); + const isDisabled = !!disabled; + const isFirstRow = rowIndex === 0; + const isLastRow = rowIndex === rowCount - 1; + if (selectionEnabled && isSelectionCheckboxVisible) { gridTemplateColumns.unshift(`${variables.tableCheckboxColumnWidth}px`); } @@ -112,11 +96,10 @@ export default function TableRow({ const tableRowContentContainerStyles = [ styles.flex1, styles.gap3, - shouldUseNarrowTableLayout ? styles.ph4 : styles.ph3, - shouldUseNarrowTableLayout && !isLoading && styles.pv4, - !shouldUseNarrowTableLayout && !isLoading && styles.pv2, animatedHighlightStyle, isLastRow && styles.tableBottomRadius, + shouldUseNarrowTableLayout ? styles.ph4 : styles.ph3, + shouldUseNarrowTableLayout ? styles.pv4 : styles.pv2, ]; const tableRowContentStyles = [ @@ -224,34 +207,21 @@ export default function TableRow({ > {(state) => ( - {!!isLoading && LoadingComponent ? ( - - - - - - ) : ( - - {!!isSelectionCheckboxVisible && - (checkboxReplacementElement ?? ( - handleCheckboxPress(event)} - /> - ))} - {renderChildren(state)} - - )} + + {!!isSelectionCheckboxVisible && + (checkboxReplacementElement ?? ( + handleCheckboxPress(event)} + /> + ))} + {renderChildren(state)} + {rowFooter} diff --git a/src/components/Table/TableSkeleton.tsx b/src/components/Table/TableSkeleton.tsx deleted file mode 100644 index 71763b16a821..000000000000 --- a/src/components/Table/TableSkeleton.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import React from 'react'; -import {View} from 'react-native'; -import SkeletonViewContentLoader from '@components/SkeletonViewContentLoader'; -import useResponsiveLayout from '@hooks/useResponsiveLayout'; -import useTheme from '@hooks/useTheme'; -import useThemeStyles from '@hooks/useThemeStyles'; -import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; -import useSkeletonSpan from '@libs/telemetry/useSkeletonSpan'; -import variables from '@styles/variables'; - -type TableSkeletonProps = { - /** The number of skeleton rows to render */ - rowCount?: number; - - /** The reason attributes for the skeleton */ - reasonAttributes: SkeletonSpanReasonAttributes; - - /** The skeleton elements to render within the table row as a skeleton */ - renderSkeletonItem: () => React.ReactNode; -}; - -export default function TableSkeleton({renderSkeletonItem, reasonAttributes, rowCount = 5}: TableSkeletonProps) { - useSkeletonSpan('TableSkeleton', reasonAttributes); - - const theme = useTheme(); - const styles = useThemeStyles(); - const {shouldUseNarrowLayout, isMediumScreenWidth} = useResponsiveLayout(); - - const isSmallView = isMediumScreenWidth || shouldUseNarrowLayout; - - const tableSkeletonRowStyles = [ - styles.flex1, - styles.flexRow, - styles.overflowHidden, - styles.alignItemsCenter, - isSmallView ? styles.ph4 : styles.ph3, - isSmallView ? styles.tableRowHeightCompact : styles.tableRowHeight, - ]; - - const rows = new Array(rowCount).fill(null).map((_, index) => ( - - - {renderSkeletonItem()} - - - )); - - return {rows}; -} diff --git a/src/components/Tables/DomainAdminsTable/DomainAdminsTableRow.tsx b/src/components/Tables/DomainAdminsTable/DomainAdminsTableRow.tsx index 2ce501089ef9..71eed7384204 100644 --- a/src/components/Tables/DomainAdminsTable/DomainAdminsTableRow.tsx +++ b/src/components/Tables/DomainAdminsTable/DomainAdminsTableRow.tsx @@ -47,7 +47,6 @@ export default function DomainAdminsTableRow({item, rowIndex, shouldUseNarrowTab rowIndex={rowIndex} disabled={item.disabled} accessibilityLabel={accessibilityLabel} - skeletonReasonAttributes={{context: 'domainAdminsTableRow'}} sentryLabel={CONST.SENTRY_LABEL.DOMAIN.ADMINS.ROW} offlineWithFeedback={{ errors: item.errors, diff --git a/src/components/Tables/DomainGroupsTable/DomainGroupsTableRow.tsx b/src/components/Tables/DomainGroupsTable/DomainGroupsTableRow.tsx index 120387e75a3e..04ebdfbda6f0 100644 --- a/src/components/Tables/DomainGroupsTable/DomainGroupsTableRow.tsx +++ b/src/components/Tables/DomainGroupsTable/DomainGroupsTableRow.tsx @@ -60,7 +60,6 @@ export default function DomainGroupsTableRow({item, rowIndex, shouldUseNarrowTab rowIndex={rowIndex} disabled={item.disabled} accessibilityLabel={accessibilityLabel} - skeletonReasonAttributes={{context: 'domainGroupsTableRow'}} offlineWithFeedback={{ errors: item.errors, pendingAction: item.pendingAction, diff --git a/src/components/Tables/DomainListTable/DomainListTableRow.tsx b/src/components/Tables/DomainListTable/DomainListTableRow.tsx index 064648e9902f..aa7b68d29e76 100644 --- a/src/components/Tables/DomainListTable/DomainListTableRow.tsx +++ b/src/components/Tables/DomainListTable/DomainListTableRow.tsx @@ -81,7 +81,6 @@ export default function DomainListTableRow({item, rowIndex, shouldUseNarrowTable onPress={item.action} disabled={item.disabled} accessibilityLabel={accessibilityLabel} - skeletonReasonAttributes={{context: 'domainTableRow'}} offlineWithFeedback={{ errors: item.errors, pendingAction: item.pendingAction, diff --git a/src/components/Tables/DomainMembersTable/DomainMembersTableRow.tsx b/src/components/Tables/DomainMembersTable/DomainMembersTableRow.tsx index f414ab5550dc..93066e7e5f89 100644 --- a/src/components/Tables/DomainMembersTable/DomainMembersTableRow.tsx +++ b/src/components/Tables/DomainMembersTable/DomainMembersTableRow.tsx @@ -51,7 +51,6 @@ export default function DomainMembersTableRow({item, rowIndex, shouldUseNarrowTa rowIndex={rowIndex} disabled={item.disabled} accessibilityLabel={accessibilityLabel} - skeletonReasonAttributes={{context: 'domainMembersTableRow'}} sentryLabel={CONST.SENTRY_LABEL.DOMAIN.MEMBERS.ROW} offlineWithFeedback={{ errors: item.errors, diff --git a/src/components/Tables/WorkspaceCategoriesTable/WorkspaceCategoriesTableRow.tsx b/src/components/Tables/WorkspaceCategoriesTable/WorkspaceCategoriesTableRow.tsx index 0e074f864a81..cf1e44dbbc28 100644 --- a/src/components/Tables/WorkspaceCategoriesTable/WorkspaceCategoriesTableRow.tsx +++ b/src/components/Tables/WorkspaceCategoriesTable/WorkspaceCategoriesTableRow.tsx @@ -51,7 +51,6 @@ export default function WorkspaceCategoriesTableRow({rowIndex, shouldUseNarrowTa rowIndex={rowIndex} disabled={item.disabled} accessibilityLabel={accessibilityLabel} - skeletonReasonAttributes={{context: 'categoriesTableRow'}} sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.CATEGORIES.ROW} onPress={item.action} offlineWithFeedback={{ diff --git a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx index f4ac34160422..f772e6e490fe 100644 --- a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx +++ b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableRow.tsx @@ -10,18 +10,15 @@ import Text from '@components/Text'; import TextWithTooltip from '@components/TextWithTooltip'; import {useMemoizedLazyExpensifyIcons} from '@hooks/useLazyAsset'; import useLocalize from '@hooks/useLocalize'; -import useNetwork from '@hooks/useNetwork'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import {formatMaskedCardName} from '@libs/CardUtils'; import Navigation from '@libs/Navigation/Navigation'; -import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import ROUTES from '@src/ROUTES'; import type {Card, CompanyCardFeed, CompanyCardFeedWithDomainID} from '@src/types/onyx'; import type {CardAssignmentData} from '@src/types/onyx/Card'; -import WorkspaceCompanyCardsTableSkeleton from './WorkspaceCompanyCardsTableSkeleton'; type WorkspaceCompanyCardTableRowData = TableData & CardAssignmentData & { @@ -84,14 +81,11 @@ function WorkspaceCompanyCardTableRow({ }: WorkspaceCompanyCardTableRowProps) { const theme = useTheme(); const styles = useThemeStyles(); - const {isOffline} = useNetwork(); const {translate} = useLocalize(); const Expensicons = useMemoizedLazyExpensifyIcons(['ArrowRight']); const {cardName, encryptedCardNumber, customCardName, cardholder, assignedCard, isAssigned, errors, pendingAction, isCardDeleted, onDismissError} = item; - const isDeleting = !isOffline && pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE; - const formattedCustomCardName = customCardName ?? ''; const formattedCardDetails = formatMaskedCardName(cardName); const formattedCustomCardNameSuffix = formattedCustomCardName ? ` • ${formattedCustomCardName}` : ''; @@ -102,11 +96,6 @@ function WorkspaceCompanyCardTableRow({ const memberColumnTitle = isAssigned ? Str.removeSMSDomain(cardholder?.displayName ?? '') : translate('workspace.moreFeatures.companyCards.unassignedCards'); const memberCardSubtitle = shouldUseNarrowTableLayout ? narrowWidthCardName : cardholderLoginText; - const reasonAttributes: SkeletonSpanReasonAttributes = { - context: 'WorkspaceCompanyCardsTableItem', - isDeleting, - }; - const avatarSize = shouldUseNarrowTableLayout ? CONST.AVATAR_SIZE.DEFAULT : CONST.AVATAR_SIZE.SMALL; const subscriptCardFeedIconSize = shouldUseNarrowTableLayout ? {width: variables.cardAvatarWidth, height: variables.cardAvatarHeight} @@ -138,11 +127,8 @@ function WorkspaceCompanyCardTableRow({ diff --git a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableSkeleton.tsx b/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableSkeleton.tsx deleted file mode 100644 index 16807cbcde39..000000000000 --- a/src/components/Tables/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableSkeleton.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import React from 'react'; -import {Circle} from 'react-native-svg'; -import SkeletonRect from '@components/SkeletonRect'; - -export default function WorkspaceCompanyCardsTableSkeleton() { - return ( - <> - - - - - ); -} diff --git a/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx b/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx index cdad20649355..74850a2f7b69 100644 --- a/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx +++ b/src/components/Tables/WorkspaceCompanyCardsTable/index.tsx @@ -1,13 +1,13 @@ import type {ListRenderItemInfo} from '@shopify/flash-list'; import React, {useEffect, useRef, useState} from 'react'; import {View} from 'react-native'; +import ActivityIndicator from '@components/ActivityIndicator'; import BlockingView from '@components/BlockingViews/BlockingView'; import Button from '@components/Button'; import CardFeedIcon from '@components/CardFeedIcon'; import ScrollView from '@components/ScrollView'; import Table from '@components/Table'; import type {ActiveSorting, CompareItemsCallback, FilterConfig, IsItemInFilterCallback, IsItemInSearchCallback, TableColumn, TableHandle} from '@components/Table'; -import TableSkeleton from '@components/Table/TableSkeleton'; import useBottomSafeSafeAreaPaddingStyle from '@hooks/useBottomSafeSafeAreaPaddingStyle'; import useCardFeedErrors from '@hooks/useCardFeedErrors'; import type {UseCompanyCardsResult} from '@hooks/useCompanyCards'; @@ -16,10 +16,10 @@ import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useOnyx from '@hooks/useOnyx'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; +import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import {resetFailedWorkspaceCompanyCardUnassignment} from '@libs/actions/CompanyCards'; import {getDefaultCardName} from '@libs/CardUtils'; -import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; import tokenizedSearch from '@libs/tokenizedSearch'; import WorkspaceCompanyCardPageEmptyState from '@pages/workspace/companyCards/WorkspaceCompanyCardPageEmptyState'; import WorkspaceCompanyCardsFeedAddedEmptyPage from '@pages/workspace/companyCards/WorkspaceCompanyCardsFeedAddedEmptyPage'; @@ -31,7 +31,6 @@ import isLoadingOnyxValue from '@src/types/utils/isLoadingOnyxValue'; import WorkspaceCompanyCardsTableHeaderButtons from './WorkspaceCompanyCardsTableHeaderButtons'; import WorkspaceCompanyCardTableItem from './WorkspaceCompanyCardsTableRow'; import type {WorkspaceCompanyCardTableItemData} from './WorkspaceCompanyCardsTableRow'; -import WorkspaceCompanyCardsTableSkeleton from './WorkspaceCompanyCardsTableSkeleton'; type CompanyCardsTableColumnKey = 'member' | 'card' | 'customCardName' | 'actions'; @@ -75,10 +74,12 @@ function WorkspaceCompanyCardsTable({ onReloadPage, onReloadFeed, }: WorkspaceCompanyCardsTableProps) { + const theme = useTheme(); const styles = useThemeStyles(); const {isOffline} = useNetwork(); const {translate, localeCompare} = useLocalize(); const {shouldUseNarrowLayout, isMediumScreenWidth} = useResponsiveLayout(); + const tableRef = useRef>(null); const { feedName, @@ -97,12 +98,12 @@ function WorkspaceCompanyCardsTable({ const isFeedConnectionBroken = feedName ? cardFeedErrors[feedName]?.isFeedConnectionBroken : false; const [countryByIp] = useOnyx(ONYXKEYS.COUNTRY); - const [personalDetails, personalDetailsMetadata] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); const [customCardNames] = useOnyx(ONYXKEYS.NVP_EXPENSIFY_COMPANY_CARDS_CUSTOM_NAMES); + const [personalDetails, personalDetailsMetadata] = useOnyx(ONYXKEYS.PERSONAL_DETAILS_LIST); const hasNoAssignedCard = Object.keys(assignedCards ?? {}).length === 0; - const areWorkspaceCardFeedsLoading = !!workspaceCardFeedsStatus?.[domainOrWorkspaceAccountID]?.isLoading; + // Synthesize error locally since Onyx discards writes to collection keys with member ID '0'. const shouldShowWorkspaceFeedsLoadError = domainOrWorkspaceAccountID === CONST.DEFAULT_NUMBER_ID && isPolicyLoaded && !isOffline; const workspaceCardFeedsErrors = shouldShowWorkspaceFeedsLoadError @@ -117,6 +118,7 @@ function WorkspaceCompanyCardsTable({ let feedErrorTitle: string | undefined; let feedErrorReloadAction: (() => void) | undefined; + if (feedErrorKey === CONST.COMPANY_CARDS.WORKSPACE_FEEDS_LOAD_ERROR) { feedErrorTitle = translate('workspace.companyCards.error.workspaceFeedsCouldNotBeLoadedTitle'); feedErrorReloadAction = onReloadPage; @@ -125,12 +127,12 @@ function WorkspaceCompanyCardsTable({ feedErrorReloadAction = onReloadFeed; } - // If we already have fetched cards, then do not show skeleton loader (let the remaining updates refresh in the background), else show it + // If we already have fetched cards, then do not show a loading spinner (let the remaining updates refresh in the background), else show it const hasCards = (companyCardEntries ?? []).length > 0; // When the last feed is removed, card data already implies no feed (isNoFeed); lastSelectedFeed Onyx metadata can still report loading after optimistic clear. const isLoadingFeed = !hasCards && ((!feedName && isInitiallyLoadingFeeds) || !isPolicyLoaded || (!isNoFeed && isLoadingOnyxValue(lastSelectedFeedMetadata)) || !!selectedFeedStatus?.isLoading); - const isLoadingCards = !hasCards ? isLoadingOnyxValue(cardListMetadata) : false; + const isLoadingCards = !hasCards && isLoadingOnyxValue(cardListMetadata); const isLoadingPage = !isOffline && !hasCards && (isLoadingFeed || isLoadingOnyxValue(personalDetailsMetadata) || areWorkspaceCardFeedsLoading); const isLoading = isLoadingPage || isLoadingFeed; @@ -146,8 +148,6 @@ function WorkspaceCompanyCardsTable({ // we want to hide the table header and the middle column of the card rows, so that the content is not overlapping. const shouldUseNarrowTableLayout = shouldUseNarrowLayout || isMediumScreenWidth; - const tableRef = useRef>(null); - const columns: Array> = [ { key: 'member', @@ -176,23 +176,26 @@ function WorkspaceCompanyCardsTable({ const cardsData: WorkspaceCompanyCardTableItemData[] = isLoadingCards ? [] - : (companyCardEntries ?? []).map(({cardName, encryptedCardNumber, isAssigned, assignedCard}) => { - const cardholder = assignedCard?.accountID ? personalDetails?.[assignedCard.accountID] : undefined; - - return { - cardName, - keyForList: `${cardName}_${assignedCard?.cardID ?? 'unassigned'}_${encryptedCardNumber}`, - encryptedCardNumber, - customCardName: assignedCard?.cardID && customCardNames?.[assignedCard.cardID] ? customCardNames?.[assignedCard.cardID] : getDefaultCardName(cardholder?.displayName ?? ''), - isCardDeleted: assignedCard?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE, - isAssigned, - assignedCard, - cardholder, - errors: isFeedConnectionBroken || assignedCard?.pendingFields?.lastScrape ? undefined : assignedCard?.errors, - pendingAction: assignedCard?.pendingAction, - onDismissError: () => resetFailedWorkspaceCompanyCardUnassignment(domainOrWorkspaceAccountID, bankName, assignedCard?.cardID), - }; - }); + : (companyCardEntries ?? []) + .map(({cardName, encryptedCardNumber, isAssigned, assignedCard}) => { + const cardholder = assignedCard?.accountID ? personalDetails?.[assignedCard.accountID] : undefined; + + return { + cardName, + keyForList: `${cardName}_${assignedCard?.cardID ?? 'unassigned'}_${encryptedCardNumber}`, + encryptedCardNumber, + customCardName: + assignedCard?.cardID && customCardNames?.[assignedCard.cardID] ? customCardNames?.[assignedCard.cardID] : getDefaultCardName(cardholder?.displayName ?? ''), + isCardDeleted: assignedCard?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE, + isAssigned, + assignedCard, + cardholder, + errors: isFeedConnectionBroken || assignedCard?.pendingFields?.lastScrape ? undefined : assignedCard?.errors, + pendingAction: assignedCard?.pendingAction, + onDismissError: () => resetFailedWorkspaceCompanyCardUnassignment(domainOrWorkspaceAccountID, bankName, assignedCard?.cardID), + }; + }) + .filter((item) => isOffline || item.pendingAction !== CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE); const keyExtractor = (item: WorkspaceCompanyCardTableItemData, index: number) => `${item.cardName}_${index}`; @@ -349,20 +352,6 @@ function WorkspaceCompanyCardsTable({ ) : undefined; - const reasonAttributes: SkeletonSpanReasonAttributes = { - context: 'WorkspaceCompanyCardsTable', - isLoading, - isLoadingCards, - }; - - const LoadingComponent = ( - - ); - const ListHeader = ( <> {headerButtonsComponent} @@ -370,6 +359,17 @@ function WorkspaceCompanyCardsTable({ ); + const LoadingComponent = ( + + + + ); + return ( {!shouldUseNarrowTableLayout && ListHeader} - {(isLoading || isFeedPending || isNoFeed) && !feedErrorKey && ( - - {isLoading && LoadingComponent} + {isLoading && !feedErrorKey && {LoadingComponent}} - {!isLoading && isFeedPending && ( + {!isLoading && isFeedPending && !feedErrorKey && ( + + {isFeedPending && ( {shouldUseNarrowTableLayout && headerButtonsComponent} )} + + )} - {!isLoading && isNoFeed && ( - - - - )} + {!isLoading && isNoFeed && !feedErrorKey && ( + + + + )} diff --git a/src/components/Tables/WorkspaceDistanceRatesTable/WorkspaceDistanceRatesTableRow.tsx b/src/components/Tables/WorkspaceDistanceRatesTable/WorkspaceDistanceRatesTableRow.tsx index 5d8c62b59b8e..e113f8a67797 100644 --- a/src/components/Tables/WorkspaceDistanceRatesTable/WorkspaceDistanceRatesTableRow.tsx +++ b/src/components/Tables/WorkspaceDistanceRatesTable/WorkspaceDistanceRatesTableRow.tsx @@ -14,7 +14,6 @@ import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import DistanceRequestUtils from '@libs/DistanceRequestUtils'; import {getRateStatus} from '@libs/PolicyDistanceRatesUtils'; -import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import type * as OnyxCommon from '@src/types/onyx/OnyxCommon'; @@ -70,7 +69,6 @@ function WorkspaceDistanceRatesTableRow({item, rowIndex, shouldUseNarrowTableLay const {processedData} = useTableContext(); const {rate, formattedRate, pendingAction, errors} = item; - const isDeleting = pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE; const isSelected = processedData.at(rowIndex)?.selected ?? false; const status = getRateStatus(rate); @@ -79,18 +77,12 @@ function WorkspaceDistanceRatesTableRow({item, rowIndex, shouldUseNarrowTableLay const accessibilityLabel = [rate.name, statusLabels[status], formattedRate, dateLabelText].filter(Boolean).join(', '); - const reasonAttributes: SkeletonSpanReasonAttributes = { - context: 'WorkspaceDistanceRatesTableItem', - isDeleting, - }; - return ( (); const tableRowItem = processedData.at(rowIndex) ?? item; - const isDeleting = tableRowItem.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE; - - const reasonAttributes: SkeletonSpanReasonAttributes = { - context: 'WorkspaceExpenseDefaultsTableItem', - isDeleting, - }; const accessibilityLabel = `${tableRowItem.typeLabel}. ${tableRowItem.conditionText}. ${tableRowItem.ruleDescription}`; const badgeColors = tableRowItem.isRename ? theme.reportStatusBadge.approved : theme.reportStatusBadge.draft; @@ -58,7 +51,6 @@ function WorkspaceExpenseDefaultsTableRow({item, rowIndex, shouldUseNarrowTableL rowIndex={rowIndex} disabled={tableRowItem.disabled} accessibilityLabel={accessibilityLabel} - skeletonReasonAttributes={reasonAttributes} sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.RULES.MERCHANT_RULE_ITEM} offlineWithFeedback={{pendingAction: tableRowItem.pendingAction, shouldHideOnDelete: false, errors: tableRowItem.errors, onClose: tableRowItem.onCloseError}} onPress={tableRowItem.action} diff --git a/src/components/Tables/WorkspaceExpensifyCardsTable/WorkspaceExpensifyCardsTableRow.tsx b/src/components/Tables/WorkspaceExpensifyCardsTable/WorkspaceExpensifyCardsTableRow.tsx index 8405dbbad0d4..0c1a2eea0f13 100644 --- a/src/components/Tables/WorkspaceExpensifyCardsTable/WorkspaceExpensifyCardsTableRow.tsx +++ b/src/components/Tables/WorkspaceExpensifyCardsTable/WorkspaceExpensifyCardsTableRow.tsx @@ -75,7 +75,6 @@ export default function WorkspaceExpensifyCardsTableRow({item, rowIndex, shouldU interactive rowIndex={rowIndex} accessibilityLabel={accessibilityLabel} - skeletonReasonAttributes={{context: 'workspaceExpensifyCardsTableRow'}} sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.EXPENSIFY_CARD.ROW} offlineWithFeedback={{ errors: item.errors, diff --git a/src/components/Tables/WorkspaceListTable/WorkspaceTableRow.tsx b/src/components/Tables/WorkspaceListTable/WorkspaceTableRow.tsx index ab7c30bfe173..ab47965f258f 100644 --- a/src/components/Tables/WorkspaceListTable/WorkspaceTableRow.tsx +++ b/src/components/Tables/WorkspaceListTable/WorkspaceTableRow.tsx @@ -108,7 +108,6 @@ export default function WorkspaceRow({item, shouldUseNarrowTableLayout, rowIndex rowIndex={rowIndex} disabled={item.disabled} accessibilityLabel={accessibilityLabel} - skeletonReasonAttributes={{context: 'WorkspaceRow'}} sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.LIST.ROW} onPress={item.action} offlineWithFeedback={{ diff --git a/src/components/Tables/WorkspaceMembersTable/WorkspaceMembersTableRow.tsx b/src/components/Tables/WorkspaceMembersTable/WorkspaceMembersTableRow.tsx index 979c68442cfe..7073a2219357 100644 --- a/src/components/Tables/WorkspaceMembersTable/WorkspaceMembersTableRow.tsx +++ b/src/components/Tables/WorkspaceMembersTable/WorkspaceMembersTableRow.tsx @@ -55,7 +55,6 @@ export default function WorkspaceMembersTableRow({item, rowIndex, shouldShowCust disabled={item.disabled} accessibilityLabel={accessibilityLabel} sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.MEMBERS.LIST_ROW} - skeletonReasonAttributes={{context: 'WorkspaceMembersTableRow'}} offlineWithFeedback={{errors: item.errors, pendingAction: item.pendingAction, onClose: item.dismissError}} onPress={item.action} > diff --git a/src/components/Tables/WorkspaceRoomsTable/WorkspaceRoomsTableRow.tsx b/src/components/Tables/WorkspaceRoomsTable/WorkspaceRoomsTableRow.tsx index 44c8fb5f7a77..770cde618680 100644 --- a/src/components/Tables/WorkspaceRoomsTable/WorkspaceRoomsTableRow.tsx +++ b/src/components/Tables/WorkspaceRoomsTable/WorkspaceRoomsTableRow.tsx @@ -51,7 +51,6 @@ function WorkspaceRoomsTableRow({item, rowIndex, shouldUseNarrowTableLayout}: Wo interactive rowIndex={rowIndex} accessibilityLabel={item.name} - skeletonReasonAttributes={{context: 'WorkspaceRoomsTableRow'}} onPress={item.action} > {({hovered}) => ( diff --git a/src/components/Tables/WorkspaceSpendRulesTable/WorkspaceSpendRulesTableRow.tsx b/src/components/Tables/WorkspaceSpendRulesTable/WorkspaceSpendRulesTableRow.tsx index 8101c66bb792..a0e9a9c3435c 100644 --- a/src/components/Tables/WorkspaceSpendRulesTable/WorkspaceSpendRulesTableRow.tsx +++ b/src/components/Tables/WorkspaceSpendRulesTable/WorkspaceSpendRulesTableRow.tsx @@ -11,7 +11,6 @@ import useLocalize from '@hooks/useLocalize'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan'; import variables from '@styles/variables'; import CONST from '@src/CONST'; import type * as OnyxCommon from '@src/types/onyx/OnyxCommon'; @@ -44,12 +43,6 @@ function WorkspaceSpendRulesTableRow({item, rowIndex, shouldUseNarrowTableLayout const tableRowItem = processedData.at(rowIndex) ?? item; const isDeleting = tableRowItem.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE; - - const reasonAttributes: SkeletonSpanReasonAttributes = { - context: 'WorkspaceSpendRulesTableItem', - isDeleting, - }; - const accessibilityLabel = `${tableRowItem.actionLabel}. ${tableRowItem.cardSummary}. ${tableRowItem.ruleSummary}`; const prevItem = rowIndex > 0 ? processedData.at(rowIndex - 1) : undefined; @@ -80,7 +73,6 @@ function WorkspaceSpendRulesTableRow({item, rowIndex, shouldUseNarrowTableLayout rowIndex={rowIndex} disabled={isDeleting} accessibilityLabel={accessibilityLabel} - skeletonReasonAttributes={reasonAttributes} sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.RULES.SPEND_RULE_ITEM} offlineWithFeedback={{pendingAction: tableRowItem.pendingAction, shouldHideOnDelete: false}} onPress={tableRowItem.action} diff --git a/src/components/Tables/WorkspaceTagsTable/WorkspaceTagsTableRow.tsx b/src/components/Tables/WorkspaceTagsTable/WorkspaceTagsTableRow.tsx index f44e2c1555eb..6e80da2bbd12 100644 --- a/src/components/Tables/WorkspaceTagsTable/WorkspaceTagsTableRow.tsx +++ b/src/components/Tables/WorkspaceTagsTable/WorkspaceTagsTableRow.tsx @@ -76,7 +76,6 @@ export default function WorkspaceTagsTableRow({ rowIndex={rowIndex} disabled={item.disabled} accessibilityLabel={accessibilityLabel} - skeletonReasonAttributes={{context: 'workspaceTagsTableRow'}} sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.TAGS.ROW} onPress={item.action} offlineWithFeedback={{ diff --git a/src/components/Tables/WorkspaceTaxesTable/WorkspaceTaxesTableRow.tsx b/src/components/Tables/WorkspaceTaxesTable/WorkspaceTaxesTableRow.tsx index d4f6d59699a3..50e8a604af19 100644 --- a/src/components/Tables/WorkspaceTaxesTable/WorkspaceTaxesTableRow.tsx +++ b/src/components/Tables/WorkspaceTaxesTable/WorkspaceTaxesTableRow.tsx @@ -46,7 +46,6 @@ function WorkspaceTaxesTableRow({item, rowIndex, shouldUseNarrowTableLayout}: Wo const isDeleting = item.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE; const enabledStatusLabel = item.enabled ? translate('common.enabled') : translate('common.disabled'); - const accessibilityLabel = [item.name, item.alternateText, enabledStatusLabel].filter(Boolean).join(', '); return ( @@ -55,7 +54,6 @@ function WorkspaceTaxesTableRow({item, rowIndex, shouldUseNarrowTableLayout}: Wo rowIndex={rowIndex} disabled={isDeleting} accessibilityLabel={accessibilityLabel} - skeletonReasonAttributes={{context: 'workspaceTaxesTableRow'}} sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.TAXES.ROW} onPress={item.action} offlineWithFeedback={{ diff --git a/src/styles/variables.ts b/src/styles/variables.ts index 99af5b46b19d..96acddbeb2fc 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -133,7 +133,6 @@ export default { tableRowPaddingHorizontal: 12, tableGroupRowPaddingVertical: 4, tableGroupRowHeight: 36, - tableSkeletonHeight: 32, tableCheckboxColumnWidth: 20, tableStatusColumnWidth: 56, tableTypeColumnWidth: 84,