Skip to content

[CP Staging] Fix skeleton loader flash after inviting a member on Company Cards page #83105

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
fedirjh wants to merge 3 commits into
base: main
Choose a base branch
from
+11 −4
Open

[CP Staging] Fix skeleton loader flash after inviting a member on Company Cards page #83105

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f172cdc
Use ref for employeeList to prevent skeleton flash after invite
MelvinBot Feb 20, 2026
8cba50c
Merge remote-tracking branch 'upstream' into claude-fixSkeletonLoader…
fedirjh Feb 20, 2026
a1264c7
chore: Fix loading condition for company cards display
fedirjh Feb 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 10 additions & 3 deletions src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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,
Expand Down
2 changes: 1 addition & 1 deletion src/pages/workspace/companyCards/WorkspaceCompanyCardsTable/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
Loading