Update loading indicators for tables

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<PressableWithFeedbackProps, 'accessible'> & {
     /** 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) => (
                     <Animated.View style={tableRowContentContainerStyles}>
-                        {!!isLoading && LoadingComponent ? (
-                            <View style={[styles.flexRow, styles.alignItemsCenter, styles.flex1]}>
-                                <SkeletonViewContentLoader
-                                    width="100%"
-                                    backgroundColor={theme.skeletonLHNIn}
-                                    foregroundColor={theme.skeletonLHNOut}
-                                    height={variables.tableSkeletonHeight}
-                                >
-                                    <LoadingComponent />
-                                </SkeletonViewContentLoader>
-                            </View>
-                        ) : (
-                            <View style={tableRowContentStyles}>
-                                {!!isSelectionCheckboxVisible &&
-                                    (checkboxReplacementElement ?? (
-                                        <Checkbox
-                                            shouldStopMouseDownPropagation
-                                            containerStyle={styles.m0}
-                                            style={styles.flex1}
-                                            isChecked={!!item.selected}
-                                            disabled={!!item.disabled || !!item.isSelectionDisabled}
-                                            accessibilityLabel={translate('common.select')}
-                                            onPress={(event) => handleCheckboxPress(event)}
-                                        />
-                                    ))}
-                                {renderChildren(state)}
-                            </View>
-                        )}
+                        <View style={tableRowContentStyles}>
+                            {!!isSelectionCheckboxVisible &&
+                                (checkboxReplacementElement ?? (
+                                    <Checkbox
+                                        shouldStopMouseDownPropagation
+                                        containerStyle={styles.m0}
+                                        style={styles.flex1}
+                                        isChecked={!!item.selected}
+                                        disabled={!!item.disabled || !!item.isSelectionDisabled}
+                                        accessibilityLabel={translate('common.select')}
+                                        onPress={(event) => handleCheckboxPress(event)}
+                                    />
+                                ))}
+                            {renderChildren(state)}
+                        </View>
 
                         {rowFooter}
 

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,

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,

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,

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,

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={{

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({
         <Table.Row
             interactive
             rowIndex={rowIndex}
-            isLoading={isDeleting}
             disabled={isCardDeleted || !canPressRow}
-            skeletonReasonAttributes={reasonAttributes}
             sentryLabel={CONST.SENTRY_LABEL.WORKSPACE.COMPANY_CARDS.TABLE_ITEM}
-            LoadingComponent={WorkspaceCompanyCardsTableSkeleton}
             offlineWithFeedback={{errors, pendingAction, onClose: onDismissError, shouldHideOnDelete: false}}
             onPress={handleRowPress}
         >