From f172cdc583d2e4b577b94011e137e626ebc2fdf8 Mon Sep 17 00:00:00 2001 From: MelvinBot Date: Fri, 20 Feb 2026 19:16:06 +0000 Subject: [PATCH 1/2] Use ref for employeeList to prevent skeleton flash after invite Store policy.employeeList in a ref instead of including it in the loadPolicyCompanyCardsPage useCallback dependency array. This prevents the callback from being recreated when a new member is invited during the card assignment flow, which was causing an unnecessary re-fetch that briefly showed a skeleton loader above the card list. Co-authored-by: Chavda Sachin --- .../companyCards/WorkspaceCompanyCardsPage.tsx | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx index 375516caa7003..930e501de3a7d 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx @@ -1,4 +1,4 @@ -import React, {useCallback, useEffect, useState} from 'react'; +import React, {useCallback, useEffect, useRef, useState} from 'react'; import DecisionModal from '@components/DecisionModal'; import useAssignCard from '@hooks/useAssignCard'; import useCompanyCards from '@hooks/useCompanyCards'; @@ -43,15 +43,22 @@ function WorkspaceCompanyCardsPage({route}: WorkspaceCompanyCardsPageProps) { const domainOrWorkspaceAccountID = getDomainOrWorkspaceAccountID(workspaceAccountID, selectedFeed); + // Use a ref so that changes to the employee list (e.g. after inviting a member) don't + // recreate the callback and trigger an unnecessary re-fetch that flashes a skeleton loader. + const employeeListRef = useRef(policy?.employeeList); + useEffect(() => { + employeeListRef.current = policy?.employeeList; + }, [policy?.employeeList]); + const loadPolicyCompanyCardsPage = useCallback(() => { // Skip the API call when workspaceAccountID is 0 -- Onyx discards writes to collection keys with member ID '0'. if (domainOrWorkspaceAccountID === CONST.DEFAULT_NUMBER_ID) { return; } - const emailList = Object.keys(getMemberAccountIDsForWorkspace(policy?.employeeList)); + const emailList = Object.keys(getMemberAccountIDsForWorkspace(employeeListRef.current)); openPolicyCompanyCardsPage(policyID, domainOrWorkspaceAccountID, emailList, translate); - }, [domainOrWorkspaceAccountID, policyID, policy?.employeeList, translate]); + }, [domainOrWorkspaceAccountID, policyID, translate]); const {isOffline} = useNetwork({ onReconnect: loadPolicyCompanyCardsPage, From a1264c7bcfad99d5960c815aa62e69cb45a4886b Mon Sep 17 00:00:00 2001 From: Fedi Rajhi Date: Fri, 20 Feb 2026 21:30:11 +0100 Subject: [PATCH 2/2] chore: Fix loading condition for company cards display Updated the logic for determining when to show company cards in the WorkspaceCompanyCardsTable component. The condition now checks for a general loading state instead of just the loading feed, improving the accuracy of the loading indicator. Co-authored-by: Chavda Sachin --- .../workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx index 38a62f61c4436..d7dd68d3e062c 100644 --- a/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx +++ b/src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx @@ -120,7 +120,7 @@ function WorkspaceCompanyCardsTable({ const isLoadingPage = !isOffline && (isLoadingFeed || isLoadingOnyxValue(personalDetailsMetadata) || areWorkspaceCardFeedsLoading); const isLoading = isLoadingPage || isLoadingFeed; - const showCards = !isInitiallyLoadingFeeds && !isFeedPending && !isNoFeed && !isLoadingFeed && !hasFeedErrors; + const showCards = !isInitiallyLoadingFeeds && !isFeedPending && !isNoFeed && !isLoading && !hasFeedErrors; const showTableControls = showCards && !!selectedFeed && !isLoadingCards && !hasFeedErrors; const showTableHeaderButtons = (showTableControls || isLoadingPage || isFeedPending || feedErrorKey === CONST.COMPANY_CARDS.FEED_LOAD_ERROR) && !!feedName;