Merge pull request Expensify#84395 from callstack-internal/fix/add-reason-attributes-table-row-skeleton

[No QA] Add reasonAttributes to TableRowSkeleton usage sites

Author: youssef-lr

src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/WorkspaceCompanyCardsTableItem.tsx

@@ -16,6 +16,7 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {formatMaskedCardName, getCardFeedWithDomainID, lastFourNumbersFromCardName, splitMaskedCardNumber} from '@libs/CardUtils';
 import Navigation from '@libs/Navigation/Navigation';
+import type {SkeletonSpanReasonAttributes} from '@libs/telemetry/useSkeletonSpan';
 import {getDefaultAvatarURL} from '@libs/UserAvatarUtils';
 import CONST from '@src/CONST';
 import ROUTES from '@src/ROUTES';
@@ -94,6 +95,11 @@ function WorkspaceCompanyCardTableItem({
     const assignCard = () => onAssignCard(cardName, encryptedCardNumber);
     const isDeleting = !isOffline && pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE;
 
+    const reasonAttributes: SkeletonSpanReasonAttributes = {
+        context: 'WorkspaceCompanyCardsTableItem',
+        isDeleting,
+    };
+
     return (
         <OfflineWithFeedback
             errorRowStyles={[styles.ph5, styles.mb4]}
@@ -107,6 +113,7 @@ function WorkspaceCompanyCardTableItem({
                     <TableRowSkeleton
                         fixedNumItems={1}
                         useCompanyCardsLayout
+                        reasonAttributes={reasonAttributes}
                     />
                 </View>
             ) : (

src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx

@@ -18,6 +18,7 @@ import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {resetFailedWorkspaceCompanyCardUnassignment} from '@libs/actions/CompanyCards';
 import {getDefaultCardName, getPlaidInstitutionId} 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';
@@ -330,6 +331,12 @@ function WorkspaceCompanyCardsTable({
         </View>
     ) : undefined;
 
+    const reasonAttributes: SkeletonSpanReasonAttributes = {
+        context: 'WorkspaceCompanyCardsTable',
+        isLoading,
+        isLoadingCards,
+    };
+
     return (
         <Table
             ref={tableRef}
@@ -342,14 +349,28 @@ function WorkspaceCompanyCardsTable({
             isItemInFilter={isItemInFilter}
             filters={filterConfig}
             initialSortColumn="member"
-            ListEmptyComponent={isLoadingCards ? <TableRowSkeleton fixedNumItems={5} /> : <WorkspaceCompanyCardsFeedAddedEmptyPage shouldShowGBDisclaimer={shouldShowGBDisclaimer} />}
+            ListEmptyComponent={
+                isLoadingCards ? (
+                    <TableRowSkeleton
+                        fixedNumItems={5}
+                        reasonAttributes={reasonAttributes}
+                    />
+                ) : (
+                    <WorkspaceCompanyCardsFeedAddedEmptyPage shouldShowGBDisclaimer={shouldShowGBDisclaimer} />
+                )
+            }
             ListHeaderComponent={shouldUseNarrowTableLayout ? headerButtonsComponent : undefined}
         >
             {shouldRenderHeaderAsChild && headerButtonsComponent}
 
             {(isLoading || isFeedPending || isNoFeed) && !feedErrorKey && (
                 <ScrollView>
-                    {isLoading && <TableRowSkeleton fixedNumItems={5} />}
+                    {isLoading && (
+                        <TableRowSkeleton
+                            fixedNumItems={5}
+                            reasonAttributes={reasonAttributes}
+                        />
+                    )}
 
                     {!isLoading && isFeedPending && (
                         <View style={styles.flex1}>